根据 WPF 中的选定选项更改内容答案

【问题标题】：Changing content according to selected option in WPF根据 WPF 中的选定选项更改内容
【发布时间】：2013-01-14 08:20:37
【问题描述】：

我有兴趣创建一个显示一些按钮并根据所选按钮更改视口的应用程序。我的应用程序中的视口是ContentControl，我想在单击按钮时更改其内容。但是，我相信有一种更好的方法，也许通过将我想要呈现给ContentControl 的每个视图的 ViewModel 注入并使用DataTemplates 设置它们的样式（因为我想避免有一个包含许多控件的网格并且只是设置每当我想显示特定视图时，他们的Visibility 属性）。哪种方法对您来说更好？您对此有不同的方法吗？

视图应该类似于以下内容：

谢谢！

【问题讨论】：

你现在如何更改内容？
“我的问题是 - 你知道另一种更好的方法吗？” - 要回答这个问题，我们需要查看您的代码）
我通常使用 ItemsControl 显示的 ViewModel 对象的 ObservableCollection，其中 Button 用于 ItemTemplate，并将 ContentControl.Content 绑定到 SelectedItem .您可以查看此类代码的示例on my blog
我还没开始写呢。这只是我想到的第一种方法。在编写代码之前，我想确保我的方向是正确的。
@JonathanPerry：从 WPF 的角度来看，使用 PRISM（MVVM 模式）框架可以更好地实现您的功能。您可以在其中创建一个外壳（基本或主屏幕）将其划分为区域，创建视图，使它们交互，基于在一个视图中的选择，您可以更改 UI（基本上在该区域中加载相关视图。）

标签： c# .net wpf viewmodel contentpresenter

【解决方案1】：

通常在窗口后面有一个 ViewModel，其中包含：

ObservableCollection<IViewModel> AvailableViewModels
IViewModel SelectedViewModel
ICommand SetCurrentViewModelCommand

我使用ItemsControl 显示AvailableViewModels，它的ItemTemplate 设置为Button。 Button.Command 绑定到SetCurrentViewModelCommand，它通过CommandParameter 传递来自AvailableViewModels 集合的当前数据项

为了显示内容区域，我使用ContentControl 和ContentControl.Content 绑定到SelectedViewModel，并且DataTemplates 习惯于告诉 WPF 如何呈现每个 ViewModel。

最终结果是我的 XAML 看起来像这样：

<Window.Resources>
    <DataTemplate DataType="{x:Type local:ViewModelA}">
        <local:ViewA />
    </DataTemplate>
    <DataTemplate DataType="{x:Type local:ViewModelB}">
        <local:ViewB />
    </DataTemplate>
</Window.Resources>

<DockPanel>
    <Border DockPanel.Dock="Left" BorderBrush="Black" BorderThickness="0,0,1,0">
        <ItemsControl ItemsSource="{Binding AvailableViewModels}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button Content="{Binding Name}"
                            Command="{Binding DataContext.SetCurrentViewModelCommand, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
                            CommandParameter="{Binding }"
                            Margin="2,5"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Border>

    <ContentControl Content="{Binding SelectedViewModel}" />
</DockPanel>

您可以查看用于此类设置的完整代码示例on my blog

【讨论】：

正是我想要的。谢谢瑞秋！
@JonathanPerry 抱歉，RelayCommand 是一个自定义类，不是 MVVM Light 使用的类。它的代码发布在Simple MVVM example blog post（我试图将第 3 方库排除在我的示例之外）
谢谢，在 MVVM 灯上也找到了它（它有一个 RelayCommand 和 RelayCommand<T> 类，可以与您的示例一起使用。