WPF 使用用戶控件UserControl來切換界面（一）

程序集整體框架如下

 

 主窗體UI文件MainWindow.xaml

<Window x:Class="WpfApp1.MainWindow"
        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:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Border Grid.Column ="0"  BorderThickness="3" BorderBrush="Gray">
            <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="50"/>
                    <RowDefinition Height="50"/>
                </Grid.RowDefinitions>
                <Button Content="用戶控件1" Click="ButtonClick1" Margin="3"/><!--使用按鍵事件來切換-->
                <Button Content="用戶控件2" Click="ButtonClick2" Margin="3" Grid.Row="1"/>
            </Grid>
        </Border>

        <Border Grid.Column ="1" BorderBrush="Gray" BorderThickness="3">
            <ContentPresenter  Content="{Binding UserContent}"/><!--使用內容呈現器來顯示用戶控件界面-->
        </Border>
    </Grid>
</Window>

 

 主窗體后台代碼MainWindow.xaml.cs如下

using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;


namespace WpfApp1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        
        private UserControl1 UserControl1 = new UserControl1();//實例化用戶控件1
        private UserControl2 UserControl2 = new UserControl2();//實例化用戶控件2

        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;
        }

        private void ButtonClick1(object sender, RoutedEventArgs e)
        {
            UserContent = UserControl1;//內容呈現器綁定的UserContent賦值給用戶控件1
        }

        private void ButtonClick2(object sender, RoutedEventArgs e)
        {
            UserContent = UserControl2;//內容呈現器綁定的UserContent賦值給用戶控件2
        }

        private UserControl _content;
        //內容呈現器綁定到UserContent
        public UserControl UserContent
        {
            get { return _content; }
            set
            {
                _content = value;
                OnPropertyChanged("UserContent");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

用戶控件UserControl1.xaml UI文件如下

<UserControl x:Class="WpfApp1.UserControl1"
             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:WpfApp1"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <StackPanel>
        <Label  Content="用戶界面1" HorizontalAlignment="Center"/>
        <Label Name="myLabel" Content="0" HorizontalAlignment="Center"/>
        <Button Content="計數" Click="Button_Click"/>
    </StackPanel>
</UserControl>

其后台代碼

using System.Windows;
using System.Windows.Controls;

namespace WpfApp1
{
    /// <summary>
    /// UserControl1.xaml 的交互邏輯
    /// </summary>
    public  partial class UserControl1 : UserControl
    {
        private int i = 0;
        public UserControl1()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            i++;
            myLabel.Content = i.ToString();
        }
    }
}

用戶控件2與其類似，整體效果如下

 

 

 源碼下載地址：https://github.com/lizhiqiang0204/UserControl-change-interface

如果在用戶界面1增加一個清空計數按鍵，點擊一下立刻清空用戶界面1和用戶界面2的計數，此時就需要用綁定來實現跨文件訪問更改其屬性。

用戶界面1前台代碼增加一個清空計數按鍵，並且把標簽內容綁定到myStr字符串， 內容如下

    <StackPanel>
        <Label  Content="用戶界面1" HorizontalAlignment="Center"/>
        <Label Name="myLabel" Content="{Binding myStr}" HorizontalAlignment="Center"/>
        <Button Content="計數" Click="Button_Click"/>
        <Button Content="清空計數" Click="btn_Clear_Click"/>
    </StackPanel>

用戶界面1后台代碼如下

using System;
using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;

namespace WpfApp3
{
    /// <summary>
    /// UserControl1.xaml 的交互邏輯
    /// </summary>
    public partial class UserControl1 : UserControl
    {
        public static event EventHandler<PropertyChangedEventArgs> StaticPropertyChanged;//靜態事件處理屬性更改
        public static int i = 0;

        private static string _myStr = "0";
        public static string myStr //Label 標簽內容綁定到這個myStr字符串
        {
            get { return _myStr; }
            set
            {
                _myStr = value;
                StaticPropertyChanged?.Invoke(null, new PropertyChangedEventArgs(nameof(myStr)));//異步更新屬性
            }
        }
        public UserControl1()
        {
            InitializeComponent();
            DataContext = this;//設置綁定數據的上下文為UserControl1類
        }

        //累加按鍵處理事件
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            i++;//按一下數值累加一次
            myStr = i.ToString();//把累加完后的數值轉換成字符串賦給標簽內容值（立刻更新標簽內容）
        }

        //清空按鍵處理事件
        private void btn_Clear_Click(object sender, RoutedEventArgs e)
        {
            UserControl1.i = 0;//把累加計數值清空設為0
            UserControl1.myStr = "0";//立刻更新標簽內容

            UserControl2.i = 0;//同時把用戶界面2里的累加值清空
            UserControl2.myStr = "0";//立刻更新用戶界面2的標簽內容
        }
    }
}

用戶界面2前台代碼

    <StackPanel>
        <Label  Content="用戶界面2" HorizontalAlignment="Center"/>
        <Label Name="myLabel" Content="{Binding myStr}" HorizontalAlignment="Center"/>
        <Button Content="計數" Click="Button_Click"/>
        <Button Content="清空計數" Click="btn_Clear_Click"/>
    </StackPanel>

用戶界面2后台代碼

using System;
using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;


namespace WpfApp3
{
    /// <summary>
    /// UserControl2.xaml 的交互邏輯
    /// </summary>
    public partial class UserControl2 : UserControl
    {
        public static event EventHandler<PropertyChangedEventArgs> StaticPropertyChanged;//靜態事件處理屬性更改

        public static int i = 0;
        private static string _myStr = "0";
        public static string myStr //Label 標簽內容綁定到這個myStr字符串
        {
            get { return _myStr; }
            set
            {
                _myStr = value;
                StaticPropertyChanged?.Invoke(null, new PropertyChangedEventArgs(nameof(myStr)));//異步更新屬性
            }
        }

        public UserControl2()
        {
            InitializeComponent();
            DataContext = this;//設置綁定數據的上下文為UserControl2類
        }
        //累加按鍵處理事件
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            i++;//按一下數值累加一次
            myStr = i.ToString();//把累加完后的數值轉換成字符串賦給標簽內容值（立刻更新標簽內容）
        }

        private void btn_Clear_Click(object sender, RoutedEventArgs e)
        {
            UserControl2.i = 0;//把累加計數值清空設為0
            UserControl2.myStr = "0";//立刻更新標簽內容

            UserControl1.i = 0;//同時把用戶界面1里的累加值清空
            UserControl1.myStr = "0";//立刻更新用戶界面1的標簽內容
        }
    }
}

效果如下

源碼下載地址：https://github.com/lizhiqiang0204/UserControl-change-interface2

用Button切換頁面顯得不太美觀，可以用自定義的數據模板來改善一下，參考此博文https://www.cnblogs.com/lizhiqiang0204/p/12617924.html