使用MVVM切換視圖的最佳方法

Question

我正在開發一個使用與XAML和MVVM兼容的UI框架的游戲。 我設法使我的框架連接起來，並且能夠在視圖之間切換。 現在，我正在使用數據模板以及ContentControl來切換視圖，我也在使用類似狀態的模式來切換，並且我想知道這是否是一種好方法？ 我的視圖有一個小問題，目前的設置方式是，我的MainWindow.xaml包含其他xaml文件的數據模板。 問題在於視圖只是被添加到MainWindow.xaml中，我想知道是否有一種方法可以隱藏以前的視圖/內容，因此好像我在切換窗口/視圖一樣，而不僅僅是添加它們。 這是一個截圖，以說明我當前擁有的內容。 項目形象 。 我的xaml文件非常簡單，現在只包含一個按鈕，這是我的xaml文件：

MainWindow.xaml
<Grid
    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"
    mc:Ignorable="d"
    xmlns:local="clr-namespace:PsalmsOfEia"
    xmlns:viewmodels="clr-namespace:PsalmsOfEia.UI.Menus.ViewModels"
    xmlns:views="clr-namespace:PsalmsOfEia.UI.Menus.Views">


    <Grid.DataContext>
        <viewmodels:MainViewModel />
    </Grid.DataContext>

        <Grid.Resources>
            <DataTemplate DataType="{x:Type viewmodels:LoginViewModel}">
                <views:LoginView/>
            </DataTemplate>
        </Grid.Resources>

         <DockPanel LastChildFill="True">
            <StackPanel>
            <ContentControl Content="{Binding SelectedViewModel}"/> 
            <Button Content="Login" Command="{Binding ChangeCommand}"/>
        </DockPanel>


   </Grid>

LoginView.xaml

   <UserControl x:Class="PsalmsOfEia.UI.Menus.Views.LoginView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:PsalmsOfEia"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800"
             xmlns:viewmodels="clr-namespace:PsalmsOfEia.UI.Menus.ViewModels"
             xmlns:views="clr-namespace:PsalmsOfEia.UI.Menus.Views">

        <UserControl.DataContext>
            <viewmodels:LoginViewModel />
        </UserControl.DataContext>

        <UserControl.Resources>
            <DataTemplate DataType="{x:Type viewmodels:CreateCharacterViewModel}">
                <views:CreateCharacterView/>
            </DataTemplate>
        </UserControl.Resources>
    <StackPanel>
        <ContentControl Content="{Binding SelectedViewModel}"/>
        <Button Content="Click Here" Command="{Binding LoginCommand}"/>

    </StackPanel>
</UserControl>

`

誰能告訴我是否有更好的方法來切換視圖以及如何隱藏先前視圖的內容（因為目前所有內容都已添加到主窗口中）。

謝謝

-喬什蒙德

Answer 1

不太確定您要尋找什么，但我使用了TabControl

<TabControl>
    <TabItem Header="Tab1">
        <local:UserControl1/>
    </TabItem>

    <TabItem Header="Tab2">
        <local:UserControl2/>
    </TabItem>

    <TabItem Header="Tab3">
        <local:UserControl3/>
    </TabItem>        
</TabControl>

我嘗試將一個文件中的XAML數量減至最少，因此我創建了一個UserControl並將其添加到主視圖中。

Answer 2

我正在使用stackpanel和usercontrol。

    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <StackPanel x:Name="myStackpanel1"  Grid.Row="0"  />
    <StackPanel x:Name="myStackpanel2"  Grid.Row="1"  />
    <Button x:Name="myButton" Width="200" Height="30" Grid.Row="2" Click="myButton_Click" Content="Click Me SP1" />
    <Button x:Name="myButton2" Width="200" Height="30" Grid.Row="3" Click="myButton2_Click" Content="Click Me2 SP2" />
</Grid>

碼

private int i,j = 0;

    public MainWindow()
    {
        InitializeComponent();
    }

    private void myButton_Click(object sender, RoutedEventArgs e)
    {
        i++;
        if (i % 2 == 0)
        {
            myStackpanel1.Children.Clear();
            myStackpanel1.Children.Add(new UserControl1());
        }
        else
        {
            myStackpanel1.Children.Clear();
            myStackpanel1.Children.Add(new UserControl2());
        }

    }

    private void myButton2_Click(object sender, RoutedEventArgs e)
    {
        j++;
        if (j % 2 == 0)
        {
            myStackpanel2.Children.Clear();
            myStackpanel2.Children.Add(new UserControl2());
        }
        else
        {
            myStackpanel2.Children.Clear();
            myStackpanel2.Children.Add(new UserControl1());
        }
    }