WPF7-数据绑定基础

• 1. WPF数据绑定试验
  • 1.1. 数据绑定的核心实现
  • 1.2. {Binding}语法
  • 1.3. 理解 DataContext

1. WPF数据绑定试验

以下是一个简单的 WPF 数据绑定示例，使用两个TextBox控件分别表示Name和Age来进行进行数据绑定试验。

数据模型类

创建一个 Person 类，包含 Name 和 Age 属性，并实现 INotifyPropertyChanged 接口以支持数据绑定。

namespace WpfApp1

{

    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        private Person person;
        public MainWindow()
        {
            InitializeComponent();


            person = new Person { Name = "张三", Age = 25 };
            DataContext = person;
        }


        private void Button_Click_Update_Person(object sender, RoutedEventArgs e)
        {
            // 更新 Person 对象的属性值
            person.Name = "李四";
            person.Age = 30;
        }


        private void Button_Click_Submit_Person(object sender, RoutedEventArgs e)
        { 
            MessageBox.Show(string.Format("当前姓名为：{0}，年龄为:{1}", person.Name, person.Age));
        }
    }


    public class Person : INotifyPropertyChanged
    {
        private string name;
        private int age;


        public string Name
        {
            get { return name; }
            set
            {
                name = value;
                OnPropertyChanged(nameof(Name));
            }
        }


        public int Age
        {
            get { return age; }
            set
            {
                age = value;
                OnPropertyChanged(nameof(Age));
            }
        }


        public event PropertyChangedEventHandler PropertyChanged;


        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

XAML 界面

在 XAML 中创建一个简单的界面，包含一个 TextBox 用于输入名字，一个 TextBox 用于显示年龄。

两个button按钮，一个修改后台person对象，一个获取页面上输入的值。

<Window x:Class="WpfApp1.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF 数据绑定" Height="450" Width="800">
    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>


        <!-- 名字输入框 -->
        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Label Content="名字：" Grid.Column="0" />
            <TextBox Grid.Column="1" Text="{Binding Name}" />
        </Grid>


        <!-- 年龄显示 -->
        <Grid Grid.Row="1" Margin="0,10,0,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Label Content="年龄：" Grid.Column="0" />
            <TextBox Grid.Column="1" Text="{Binding Age}" />
        </Grid>
        
        <Grid Grid.Row="2" Margin="0,10,0,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="100" />
            </Grid.ColumnDefinitions>
            <Button Content="修改后台person" Click="Button_Click_Update_Person" Grid.Column="0"/>
            <Button Content="提交界面person" Click="Button_Click_Submit_Person" Grid.Column="1"/>
        </Grid>
    </Grid>
</Window>

运行效果:

运行程序后，你会看到初始界面中TextBox 中显示初始名字 “张三”，TextBox 中显示初始年龄 “25”。

当你在 TextBox 中修改名字时，Person 对象的 Name 属性会被自动更新，反之亦然。

这是因为 TextBox 和 Person 对象之间建立了双向数据绑定。

1.1. 数据绑定的核心实现

INotifyPropertyChanged 接口：Person 类实现了该接口，当属性值发生变化时，会通知绑定的控件更新。

1.2. {Binding}语法

在 XAML 中使用 {Binding Name} 和 {Binding Age} 将控件绑定到 Person 对象的属性。

1.3. 理解 DataContext

DataContext：通过设置DataContext = person，将 Person 对象设置为窗口的数据上下文，使控件能够访问 Person 对象的属性。

在 WPF中，DataContext 是一个非常重要的概念，它用于定义数据绑定的上下文环境。

当你看到 DataContext = person; 这句代码时，它实际上是在为当前的 UI 元素（如窗口、控件等）设置数据绑定的源对象。

DataContext 是一个依赖属性，存在于 FrameworkElement 类中，因此所有继承自 FrameworkElement 的控件（如 Window、UserControl、TextBox、Button 等）都可以设置 DataContext。它的主要作用是为控件及其子控件提供一个默认的数据源，用于数据绑定。

通过这个简单示例，你可以快速掌握WPF数据绑定的基本原理和实现方法。