如何在(WPF)窗口中将UserControl加载到ContentPresenter中

Question

我有一个包含Viewbox的窗口。在该视图框中，我希望拥有我已经创建为UserControls的几个视图中的一个。我使用的是MVVM(模型-视图-视图-模型)设计模式。我在网上搜索了大约一个小时，找不到任何解释如何使用ContentPresenter显示UserControl的示例或教程。

Answer 1

取决于。

我认为您的主要问题是ContentPresenter仅在控制模板中使用。你不能只是把它粘贴在一个窗口中，然后期望它显示窗口的内容。我相信真正需要做的是使用ContentControl来托管您的UI。

通过将模型绑定到此控件的Content属性，可以设置包含该模型所需视图的DataTemplates。我给你举个简短的例子。请注意，这可能与您的设计不匹配，但它展示了所有这些是如何结合在一起的。

首先，为每个视图创建一个模型(或ViewModel)，用于管理该视图的数据(和交互)。

public sealed class Dialog : INotifyPropertyChanged // or DependencyObject
{
public string Input {get;set;} // INPC or DP implementation not shown
public ICommand Cancel {get;set;}
// class definition not shown
}

接下来，定义要在ContentPresenter 中显示的视图

<UserControl x:Class="Herp.DialogView" 
HideImplementationDetails="true">
<Border BorderBrush="Red" BorderThickness="5">
<TextBlock Text="{Binding Input}" />  
<Button Command="{Binding Cancel}">Cancel</Button>
<!-- etc etc -->      
</Border>
</UserControl>

接下来，在您的窗口中，添加ContentControl和DataTemplate

<Window HideImplementationDetailsForBrevityOfXaml="true">
<Window.Resources>
<DataTemplate xmlns:t="clr-namespace:Herp" 
DataType="{x:Type t:Dialog}">
<t:DialogView />
</DataTempalte>
</Window.Resources>
<ContentControl Content="{Binding}" />
</Window>

最后将Window的DataContext设置为您的Dialog模型。

public MyWindow()
{
InitializeComponent();
DataContext = new Dialog();
}

这就是逻辑流程：

1. 您的窗口已创建
2. Dialog控件的一个实例是在DataContext上设置的
3. ContentControl上的绑定已更新
4. ContentControl的默认DataTemplateSelector在资源中搜索其DataType设置为typeof(Dialog)的DataTemplate
5. 它在Window的资源中找到此DataTemplate
6. DataTemplate的内容被加载并添加为ContentControl的可视子级

每当ContentControl的Content发生变化时，都会重复相同的过程。因此，您可以有许多不同的模型，每个模型都有一个包含不同UserControl的不同DataTemplate，每次更新ContentControl上的绑定时，您都会看到预期的View。

使用MVVM，您可以将ViewModel的一个属性绑定到Content属性(称之为Current或其他)，然后根据ViewModel的当前状态将属性中的模型切换为预期值。请注意，在ContentControl中，设置为Content属性的内容将成为ContentControl的直接子级的DataContext。类似于ItemsControl内的每个ItemsSource是在ItemTemplate内定义的视觉树的DataContext。

Answer 2

我在这里隐藏了很多关于OK和Cancel的视图-视图模型交互的细节，但只要你设置了DataTemplate，这应该会在窗口内呈现你的视图。

我在应用程序的资源字典中定义了视图模型视图数据模板：

<DataTemplate DataType="{x:Type SaveDocumentChangesVM}">
<SaveDocumentChangesView />
</DataTemplate>

显示视图的窗口：

<Window x:Class="CustomDialogWindow" 
SizeToContent="WidthAndHeight" ShowInTaskbar="False">
<ContentPresenter Name="DialogContentPresenter" />
</Window>

窗口的构造函数：

public CustomDialogWindow(object viewModel, string dialogTitle)
{
InitializeComponent();
// A datatemplate will allow WPF to figure out how to render the window contents
DialogContentPresenter.Content = viewModel;
if (dialogTitle != null)
{
Title = dialogTitle;
}
}

显示如下对话框：

var vm = new SaveDocumentChangesVM();
var dialog = new CustomDialogWindow(vm, "This is my dialog");
dialog.ShowDialog();