MVVM：页面内的框架导航

Question

我的应用正在使用 SplitView，它的内容是 Frame。我似乎无法弄清楚如何使用拆分视图中的按钮来更改框架中的页面。现在我正在尝试将SourcePageType 绑定到我的视图模型，但这不起作用。这是我的设置。

框架

<SplitView.Content>
        <Frame x:Name="frame" SourcePageType="{Binding FrameSource}">
            <Frame.ContentTransitions>
                <TransitionCollection>
                    <NavigationThemeTransition>
                        <NavigationThemeTransition.DefaultNavigationTransitionInfo>
                            <EntranceNavigationTransitionInfo/>
                        </NavigationThemeTransition.DefaultNavigationTransitionInfo>
                    </NavigationThemeTransition>
                </TransitionCollection>
            </Frame.ContentTransitions>
        </Frame>
    </SplitView.Content>

查看模型

private string frameSource;
    public string FrameSource
    {
        get { return frameSource; }
        set
        {
            frameSource = value;
            RaisePropertyChanged("FrameSource");
        }
    }

    private RelayCommand<string> navCommand;
    public RelayCommand<string> NavCommand
    {
        get
        {
            navCommand = new RelayCommand<string>(ExecuteNav);
            return navCommand;
        }
    }
    public void ExecuteNav(string page)
    {
        FrameSource = page;
    }

我正在为我的框架使用 MVVM Light。最好的方法是什么？

Answer 1

我也一直在使用 mmvm light 来解决这个问题，并想出了这个方法，我在主窗口中使用了一个内容控件，该控件绑定到我想要显示的选定视图模型。它可能有点矫枉过正，但它可以工作并且维护起来并不难。

在主页面视图模型中，我创建了一个菜单对象：

  private void constructMenu()
    {
        MenuMessages = new ObservableCollection<MenuMessage>();
        MenuMessages.Add(new MenuMessage
        {
            menutext = "FirstPage",
            isactive = true,
            newWindow = false,
            viewModelName = "FirstPageViewModel"
        });
        MenuMessages.Add(new MenuMessage
        {
            menutext = "2page",
            isactive = true,
            newWindow = false,
            viewModelName = "2pageViewModel"
        });

我有以下 INotifyable 属性：

 public MenuMessage selectedmenuitem
  public ObservableCollection<MenuMessage> MenuMessages
 public Object selectedViewModel

此外，我使用的每个视图模型都是 INotifyable 属性

public FirstPageViewModel firstpageviewmodel;
public 2PageViewModel firstpageviewmodel;

我的主页 xaml 如下所示：

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:Myproj"
    xmlns:Views="clr-namespace:Myproj.Views"
    xmlns:vm="clr-namespace:Myproj.ViewModel"
    x:Class="Myproj.MainWindow"  mc:Ignorable="d"
    DataContext="{Binding Main, Source={StaticResource Locator}}">
        <Window.Resources>
    <DataTemplate DataType="{x:Type vm:FirstPageViewModel}">
        <Views:FirstPageView/>

    </DataTemplate>
    <DataTemplate DataType="{x:Type vm:2PageViewModel}">
        <Views2pageView/>
    </DataTemplate>
  </Window.Resources>
<DockPanel  LastChildFill="True">
    <StackPanel DockPanel.Dock="Top" >
        <ListView ItemsSource="{Binding MenuMessages}"  SelectedItem="{Binding selectedmenuitem}" >
            <ListView.ItemsPanel>
                <ItemsPanelTemplate> <StackPanel Orientation="Horizontal"/></ItemsPanelTemplate>                    
            </ListView.ItemsPanel>
            <ListView.ItemTemplate>
                <DataTemplate  DataType="{x:Type MenuItem}" >
                    <TextBlock Text="{Binding menutext}"/>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
     </StackPanel>  

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

在视图模型中，我在 selectedmenuitem 设置器的 RaisePropertyChanged 之后调用以下方法：

 private void switchviewmodel()
    {
        switch (selectedmenuitem.viewModelName)
        {
            case "FirstPageViewModel":
                selectedVM = irstpageviewmodel;
                break;
            case "2PageViewModel":
                selectedVM = 2pageviewmodel;
                break;
         }
    }