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
