WPF實(shí)現(xiàn)頁(yè)面的切換的示例代碼

更新時(shí)間：2023年01月30日 11:05:14 作者：鯉籽鯤

本文主要介紹了WPF實(shí)現(xiàn)頁(yè)面的切換的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

本文主要講述如何在同一個(gè)窗體內(nèi)，實(shí)現(xiàn)不同功能模塊的頁(yè)面切換。

一、準(zhǔn)備工作

1.搭建一個(gè)簡(jiǎn)單的mvvm項(xiàng)目結(jié)構(gòu)

在這里插入圖片描述

首先搭建一個(gè)簡(jiǎn)單的項(xiàng)目框架，然后有紅和綠兩個(gè)頁(yè)面，ViewModels中的Base 中簡(jiǎn)單實(shí)現(xiàn)了ICommand 和 INotifyPropertyChanged接口

二、實(shí)現(xiàn)

1.使用Frame控件的方式實(shí)現(xiàn)

利用Frame的Source 屬性加載內(nèi)部的控件，使用Frame的時(shí)候，用于切換的頁(yè)面可以是UserControl 或者Page，如案例中使用的就是Page

實(shí)現(xiàn)代碼如下：

<Window x:Class="WpfApp2.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"
        xmlns:local="clr-namespace:WpfApp2.Views"
        xmlns:vm="clr-namespace:WpfApp2.ViewModels"
        mc:Ignorable="d"
        Title="MainView" Height="450" Width="800">
    <Window.DataContext>
        <vm:MainViewModel></vm:MainViewModel>
    </Window.DataContext>
    <DockPanel Grid.Column="0">
        <StackPanel Background="LightBlue">
            <RadioButton Command="{Binding ChangePageCommand}" CommandParameter="PageRedView.xaml" Content="紅色" Margin="10"></RadioButton>
            <RadioButton Command="{Binding ChangePageCommand}" CommandParameter="PageGreenView.xaml" Content="綠色" Margin="10"></RadioButton>
        </StackPanel>
        <Frame NavigationUIVisibility="Hidden" Source="{Binding PageName}"/>
    </DockPanel>
</Window>

注意：這里的CommandParameter傳入的是PageRedView.xaml文件

    public class MainViewModel:ViewModelBase
    {
        private string _pageName;

        public string PageName
        {
            get { return _pageName; }
            set { _pageName = value; OnPropertyChanged(); }
        }

        public ICommand ChangePageCommand { get; set; }

        public MainViewModel()
        {
            ChangePageCommand = new CommandBase(ChangePage);
        }

        private void ChangePage(object obj)
        {
            PageName = obj.ToString();
        }
    }

2.使用反射的方式實(shí)現(xiàn)

使用反射+ContentControl 的方式也可使用頁(yè)面切換，不過該方式下ContentControl 的Content不可以承接Page，Page只有Frame 和Window可以承接，但是可以承接UserControl。
首先將紅色和綠色兩個(gè)界面修改為UserControl并命名為UserControlRed和UserControlGreen ，然后修改代碼如下：

    <DockPanel Grid.Column="0">
        <StackPanel Background="LightBlue">
            <RadioButton Command="{Binding ChangePageCommand}" CommandParameter="UserControlRed" Content="紅色" Margin="10"></RadioButton>
            <RadioButton Command="{Binding ChangePageCommand}" CommandParameter="UserControlGreen" Content="綠色" Margin="10"></RadioButton>
        </StackPanel>
        <ContentControl Content="{Binding MainContent}"/>
    </DockPanel>

  public class MainViewModel:ViewModelBase
    {
        private FrameworkElement mainContent;

        public FrameworkElement MainContent
        {
            get { return mainContent; }
            set { mainContent = value; OnPropertyChanged(); }
        }


        public ICommand ChangePageCommand { get; set; }

        public MainViewModel()
        {
            ChangePageCommand = new CommandBase(ChangePage);
        }

        private void ChangePage(object obj)
        {
        	//【 * 】這里需要拼接路徑
            Type type = Type.GetType("WpfApp2.Views." + obj.ToString());
            MainContent = (FrameworkElement)System.Activator.CreateInstance(type);
        }
    }