mvvm 导航树视图

Question

我正在尝试使用树视图实现导航菜单。 在左侧面板上有一个树视图，在右侧面板上有匹配的视图。 因为它是 MVVM，所以我很难在正确的视图之间切换。

单击 Menu1 - 应显示 View1.xaml 视图 单击 Menu2 - 应显示 View2.xaml 视图

我的代码如下所示： MainView.xaml

<Window x:Class="Menu.View.MainView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Views="clr-namespace:Menu.View"
        Title="MainView" Height="300" Width="300">
    <Window.Resources>
        <DataTemplate DataType="{x:Type Views:Page1}">
            <Views:Page1 />
        </DataTemplate>
        <DataTemplate DataType="{x:Type Views:Page2}">
            <Views:Page2 />
        </DataTemplate>
    </Window.Resources>
    <DockPanel>
        <Grid DockPanel.Dock="Left">
            <TreeView>
                <TreeViewItem Header="Menu 1" />
                <TreeViewItem Header="Menu 2" />
                <TreeViewItem Header="Menu 3" />
            </TreeView>
        </Grid>

        <Grid DockPanel.Dock="Right">
                <Views:Page1 />
                <Views:Page2 />
        </Grid>
    </DockPanel>
</Window>

Page1.xaml（单击“菜单 1”时应该可见的视图）

<Grid>
    <Label FontSize="24" FontWeight="Bold">1</Label>
</Grid>

Page2.xaml（单击“菜单 2”时应该可见的视图）

<Grid>
    <Label FontSize="24" FontWeight="Bold">2</Label>
</Grid>

对于每个页面，我都有自己的 ViewModel，并且我有一个名为 MainViewModel 的主要页面。 我应该如何在 MVVM 模式下实现这样的事情？

Answer 1

我认为这是错误的。您应该将 ViewModel 放入 DataType 中。因此，当您填充 DataContext 时，DataTemplate 会完成他的工作。类似：

   <DataTemplate DataType="{x:Type ViewModels:Page1ViewModel}">
                <Views:Page1 />
            </DataTemplate>
            <DataTemplate DataType="{x:Type ViewModels:Page2ViewModel}">
                <Views:Page2 />
            </DataTemplate>

而不是：

<Views:Page1 />
<Views:Page2 />

添加一个 ContentControl 并对其内容进行绑定，如下所示：

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

myView 是 MainViewViewModel (which has to implement INotifyPropertyChanged) 中的属性可以是这样的：

        object _MyView;
        public object MyViewModel
        {
            get
            {
                return _MyView;
            }
            set
            {
                _MyView = value;
                OnPropertyChanged("MyViewModel");
            }
        }

现在，在每个 TreeViewItem 中添加一个 Command 来更新它的内容：

在您的 MainViewViewModel 添加 CallView1Command 属性并实现它(see how dealing with commands)

所以在Command的excute方法中你可以根据你想要显示的View来更新MyViewModel。

我建议使用 Unity 来实例化 ViewModel。

解释得不是很好，但是，无论如何希望它有所帮助