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光爲我的框架。做這個的最好方式是什麼？

Answer 1

我也一直在用這個使用mmvm light的方法，並且想出了這個方法，我在主窗口中使用了一個綁定到我想要顯示的選定viewmodel的內容控件。這可能有點矯枉過正，但它有效，維護也不難。

在我創建一個菜單對象的主網頁瀏覽模式：

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; 
     } 
    }