使用WPF/MVVM在运行时动态更改UserControl内容

我试图创建的屏幕是多部分结果查看器。批量作业完成后，您可以双击它并打开此屏幕，该屏幕将包含有关刚刚运行的批量作业（屏幕顶部30％，全宽）的基本数据的顶部部分，然后下部70％将由一个左对齐的列表框（宽度的20％）和一组选定的子结果组成，而一个详细信息窗格占用剩余的80％宽度。使用WPF/MVVM在运行时动态更改UserControl内容

我希望它的行为方式是当您选择左侧列表框中的子结果时，右侧窗格将填充子结果的详细信息。因为它将变得复杂并且需要可扩展，所以我想将每个子结果细节显示面板实现为UserControl。

父ViewModel包含一个IDictionary<Enum.ResultType, IResultPanel> - 并且该列表框将从该字典的键中填充，并且当您选择一个选项时，它将从字典中获取IResultPanel对象，该对象将是User Control，下面是一个示例代码片段

public partial class SimpleCalcInfoResult : UserControl, IResultPanel 
    { 
     private SimpleCalcInfoResultViewModel _viewModel; 

     public SimpleCalcInfoResult(SimpleCalcInfoResultViewModel viewModel) 
     { 
      InitializeComponent(); 
      _viewModel = viewModel; 
     } 
    }

的IResultPanel接口是一个空白空接口，仅用来便于能够有字典上面具有公共类型，因为我觉得具有用户控件的字典太宽泛。

我得到的问题是我无法弄清楚什么XAML在父控制中使用有一个可更改的UserControl面板。很明显，你可以有

<local:MyControl> ... </local:MyControl>

作为一个硬编码用户的控制，但我怎么能有XAML的一个部分，这将让我改变显示其用户控制，这取决于列表框项目选择？

来源

2013-10-02 NZJames

查找到WPF模板，即DataTemplateSelectors（http://tech.pro/tutorial/807/wpf-tutorial-how-to-use-a-datatemplateselector）和DataTemplates（http://msdn.microsoft.com/en-us/library/ms742521.aspx）与DataType – DenisPostu

用WPF实现这很简单。但是，当使用MVVM时，我们'操纵'数据而不是UI控件。考虑到这一点，首先在Application.Resources部分声明每个自定义的Panel控件DataTemplate：

<DataTemplate DataType="{x:Type ViewModels:SimpleCalcInfoResultViewModel}"> 
    <Views:SimpleCalcInfoResult /> 
</DataTemplate> 
... 
<DataTemplate DataType="{x:Type ViewModels:MainViewModel}"> 
    <Views:MainView /> 
</DataTemplate>

现在，所有你需要做的使用ContentControl在右下角显示显示与视图模型：

<ContentControl Content="{Binding ViewModel}" />

最后，添加一个名为ViewModel到父视图模型IResultPanel类型的属性：

private IResultPanel viewModel = new FirstViewModel(); 

public IResultPanel ViewModel 
{ 
    get { return viewModel; } 
    set { if (viewModel != value) { viewModel = value; NotifyPropertyChanged("ViewModel"); } } 
}

现在，所有你需要做的，以显示在您的应用程序不同Panel是将此属性设置为不同的值：

ViewModel = new SimpleCalcInfoResultViewModel();

来源

2013-10-02 10:45:37 Sheridan

非常感谢，非常全面的答案。所以我正确地认为我仍然创建并定义一个UserControl xaml类，例如SimpleCalcInfoResult，其中包含该结果类型的所有显示逻辑，并且在Data Template中只指定一行，即创建该UserControl的实例？ – NZJames

另一个问题，我的SimpleCalcInfoResult UserControl具有一个构造函数，它接受一个SimpleCalcInfoResultViewModel对象的参数。我如何编写上面的数据模板来创建用户控件，将视图模型对象作为第一个参数传递给构造函数？ – NZJames

是的，你的第一个评论...这就是你需要做的。通过定义这些'DataTemplate'，无论框架在哪里看到视图模型的实例，它都将显示指定的'UserControl'。你的第二个注释似乎有点困惑......你的构造函数将视图模型作为参数，但是使用这种方法，你不需要这样做...... DataTemplate代替了设置DataContext 。您仍然可以通过将'DataContext'强制转换为正确类型的视图模型来从'UserControl'代码中获取视图模型：'ThisViewModel vm =（ThisViewModel）DataContext;' – Sheridan

使用WPF/MVVM在运行时动态更改UserControl内容

回答

相关问题