wpf 多页面切换 UserControl

wpf 多页面切换 UserControl

NavPage\NavPage\App.xaml

<Application x:Class="NavPage.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Application.Resources />
</Application>

NavPage\NavPage\App.xaml.cs

using System;
using NavPage.ViewModels;
using NavPage.Views;

namespace NavPage
{
    /// <summary>
    /// Interaction logic for App.xaml
    /// </summary>
    public partial class App
    {

        /// <summary>
        /// Application Entry for NavPage
        /// </summary>
        public App()
        {
            var view = new MainView
            {
                DataContext = Activator.CreateInstance<MainViewModel>()
            };

            view.Show();
        }

    }
}

NavPage\NavPage\NavPage.csproj

<Project Sdk="Microsoft.NET.Sdk">

    <PropertyGroup>
        <OutputType>WinExe</OutputType>
        <TargetFramework>net8.0-windows</TargetFramework>
        <Nullable>enable</Nullable>
        <UseWPF>true</UseWPF>
    </PropertyGroup>

    <ItemGroup>
      <PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.2" />
    </ItemGroup>

</Project>

NavPage\NavPage\Models\MainModel.cs

namespace NavPage.Models
{
    public class MainModel
    {

    }
}

NavPage\NavPage\ViewModels\MainViewModel.cs

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using NavPage.Views;
using System.Windows.Input;

namespace NavPage.ViewModels;


public partial class MainViewModel : ViewModelBase
{
    private object _currentView;
    public object CurrentView
    {
        get { return _currentView; }
        set { _currentView = value; OnPropertyChanged(); }
    }
    public ICommand PageOneCommand { get; set; }
    public ICommand PageTwoCommand { get; set; }
    public ICommand PageThreeCommand { get; set; }

    private void PageOne() => CurrentView = new PageOneView();
    private void PageTwo() => CurrentView = new PageTwoView();
    private void PageThree() => CurrentView = new PageThreeView();


    public MainViewModel()
    {
        PageOneCommand = new RelayCommand(PageOne);
        PageTwoCommand = new RelayCommand(PageTwo);
        PageThreeCommand = new RelayCommand(PageThree);
        // Startup Page
        CurrentView = new PageOneView();
    }
}

NavPage\NavPage\ViewModels\PageOneViewModel.cs

using CommunityToolkit.Mvvm.ComponentModel;
using System.Windows.Input;


namespace NavPage.ViewModels;


public partial class PageOneViewModel : ViewModelBase
{
    public PageOneViewModel()
    {
        
    }
}

NavPage\NavPage\ViewModels\PageThreeViewModel.cs

using CommunityToolkit.Mvvm.ComponentModel;
using System.Windows.Input;


namespace NavPage.ViewModels;


public partial class PageThreeViewModel : ViewModelBase
{
    public PageThreeViewModel()
    {
        
    }
}

NavPage\NavPage\ViewModels\PageTwoViewModel.cs

using CommunityToolkit.Mvvm.ComponentModel;
using System.Windows.Input;


namespace NavPage.ViewModels;


public partial class PageTwoViewModel : ViewModelBase
{
    public PageTwoViewModel()
    {
        
    }
}

NavPage\NavPage\ViewModels\ViewModelBase.cs

using CommunityToolkit.Mvvm.ComponentModel;

namespace NavPage.ViewModels
{
    public class ViewModelBase : ObservableObject
    {

    }
}

NavPage\NavPage\Views\MainView.xaml

<Window x:Class="NavPage.Views.MainView"
        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"
        Title="MainView"
        Width="500"
        Height="300"
        WindowStartupLocation="CenterScreen"
        mc:Ignorable="d">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3*"></ColumnDefinition>
            <ColumnDefinition Width="7*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Border BorderThickness="10" BorderBrush="Pink"></Border>
        <Border Grid.Column="1" BorderThickness="10" BorderBrush="DeepPink"></Border>
        <StackPanel Margin="20" VerticalAlignment="Center">
            <Button Content="PageOne" Command="{Binding PageOneCommand}"></Button>
            <Button Content="PageTwo" Command="{Binding PageTwoCommand}" ></Button>
            <Button Content="PageThree" Command="{Binding PageThreeCommand}" ></Button>
        </StackPanel>
        <Grid Grid.Column="1">
            👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇
            <ContentControl x:Name="Pages" Content="{Binding CurrentView}" />
        </Grid>


    </Grid>
</Window>

NavPage\NavPage\Views\MainView.xaml.cs

using System.Windows;

namespace NavPage.Views
{
    public partial class MainView : Window
    {
        public MainView()
        {
            InitializeComponent();
        }
    }
}

NavPage\NavPage\Views\PageOneView.xaml

<UserControl x:Class="NavPage.Views.PageOneView"
             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:NavPage.Views"
             xmlns:vm="clr-namespace:NavPage.ViewModels"
             mc:Ignorable="d" 
             Background="WhiteSmoke"
             d:DesignHeight="100" d:DesignWidth="100">

    <UserControl.DataContext>
        <vm:PageOneViewModel />
    </UserControl.DataContext>
    <Grid VerticalAlignment="Center" HorizontalAlignment="Center"  >
        <TextBlock Text="PageOne" FontSize="30"></TextBlock>
    </Grid>
</UserControl>

NavPage\NavPage\Views\PageOneView.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace NavPage.Views
{
    /// <summary>
    /// Interaction logic for PageOneView.xaml
    /// </summary>
    public partial class PageOneView : UserControl
    {
        public PageOneView()
        {
            InitializeComponent();
        }
    }
}

NavPage\NavPage\Views\PageThreeView.xaml

<UserControl x:Class="NavPage.Views.PageThreeView"
             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:NavPage.Views"
             xmlns:vm="clr-namespace:NavPage.ViewModels"
             mc:Ignorable="d" 
             Background="WhiteSmoke"
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.DataContext>
        <vm:PageThreeViewModel />
    </UserControl.DataContext>
    <Grid VerticalAlignment="Center" HorizontalAlignment="Center"  >
        <TextBlock Text="PageThree" FontSize="30"></TextBlock>
    </Grid>
</UserControl>

NavPage\NavPage\Views\PageThreeView.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace NavPage.Views
{
    /// <summary>
    /// Interaction logic for PageThreeView.xaml
    /// </summary>
    public partial class PageThreeView : UserControl
    {
        public PageThreeView()
        {
            InitializeComponent();
        }
    }
}

NavPage\NavPage\Views\PageTwoView.xaml

<UserControl x:Class="NavPage.Views.PageTwoView"
             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:NavPage.Views"
             xmlns:vm="clr-namespace:NavPage.ViewModels"
             mc:Ignorable="d" 
             Background="WhiteSmoke"
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.DataContext>
        <vm:PageTwoViewModel></vm:PageTwoViewModel>
    </UserControl.DataContext>


    <Grid VerticalAlignment="Center" HorizontalAlignment="Center"  >
        <TextBlock Text="PageTwo" FontSize="30"></TextBlock>
    </Grid>

</UserControl>

NavPage\NavPage\Views\PageTwoView.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace NavPage.Views
{
    /// <summary>
    /// Interaction logic for PageTwoView.xaml
    /// </summary>
    public partial class PageTwoView : UserControl
    {
        public PageTwoView()
        {
            InitializeComponent();
        }
    }
}

NavPage\NavPage.sln

Microsoft Visual Studio Solution File, Format Version 12.00
# Visual Studio Version 17
VisualStudioVersion = 17.12.35707.178 d17.12
MinimumVisualStudioVersion = 10.0.40219.1
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "NavPage", "NavPage\NavPage.csproj", "{CEC68C2C-E747-4307-B69F-8BD6256ED99F}"
EndProject
Global
	GlobalSection(SolutionConfigurationPlatforms) = preSolution
		Debug|Any CPU = Debug|Any CPU
		Release|Any CPU = Release|Any CPU
	EndGlobalSection
	GlobalSection(ProjectConfigurationPlatforms) = postSolution
		{CEC68C2C-E747-4307-B69F-8BD6256ED99F}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
		{CEC68C2C-E747-4307-B69F-8BD6256ED99F}.Debug|Any CPU.Build.0 = Debug|Any CPU
		{CEC68C2C-E747-4307-B69F-8BD6256ED99F}.Release|Any CPU.ActiveCfg = Release|Any CPU
		{CEC68C2C-E747-4307-B69F-8BD6256ED99F}.Release|Any CPU.Build.0 = Release|Any CPU
	EndGlobalSection
	GlobalSection(SolutionProperties) = preSolution
		HideSolutionNode = FALSE
	EndGlobalSection
EndGlobal