一文读懂WPF数据绑定基础

WPF数据绑定

数据绑定基础概念
数据绑定基础机制
数据绑定模式

数据绑定基础概念

数据绑定（Data Binding）是 WPF 的核心机制，用于建立数据源（Source）与界面元素（Target）之间的动态关联。通过绑定，数据的变化可以自动反映到 UI，反之亦然（取决于绑定模式）。
核心组件：
数据源（Source）：可以是任意对象、集合、依赖属性或其他 UI 元素。
目标（Target）：必须是依赖属性（Dependency Property）。
绑定表达式：通过 Binding 类定义，指定绑定路径、模式、转换逻辑等

数据绑定基础机制

DataContext

数据上下文的概念

定义：DataContext 是控件的数据源，所有未明确指定绑定源（如 Source、ElementName）的 Binding 默认从 DataContext 中查找属性路径。
作用：
简化绑定：通过继承机制，子控件自动共享父控件的 DataContext，无需重复设置源。
分层数据管理：将数据与 UI 解耦，便于实现 MVVM 模式（View 的 DataContext 绑定到 ViewModel）
继承性
DataContext 是依赖属性，具有继承性。若子控件未显式设置 DataContext，则会继承父容器的 DataContext。

DataContext 的设置方式

在 XAML 中直接赋值

方式说明
在 XAML 中直接为控件或容器的 DataContext 属性赋值静态对象或资源
适用场景
静态数据或设计时数据预览。
小型项目或简单界面，无需复杂依赖注入。
注意事项
对象生命周期由 XAML 解析器管理，无法动态替换。
不适合需要动态切换数据源的场景

<!-- 直接设置 Window 的 DataContext -->
<Window.DataContext>
    <local:UserViewModel Name="Alice" Age="25"/>
</Window.DataContext>

<!-- 或通过 StaticResource 引用资源 -->
<Window.Resources>
    <local:UserViewModel x:Key="UserData" Name="Bob" Age="30"/>
</Window.Resources>
<Grid DataContext="{StaticResource UserData}">
    <TextBlock Text="{Binding Name}"/>
</Grid>

代码后台设置

适用场景
动态创建或需要依赖注入（DI）的 ViewModel。
与 MVVM 模式结合，通过构造函数传递数据。
优点
灵活控制对象生命周期。
方便与依赖注入框架（如 Autofac、Prism）集成
示例：若窗口的 DataContext 设置为 ViewModel，内部所有控件的绑定默认指向 ViewModel 的属性

//代码后台设置 相应的数据业务处理都在后台
public MainWindow() {
    
    
    InitializeComponent();
    this.DataContext = new ViewModel{
    
    
    Id = 1,
    Name = "项目A"
   };
}

public class ViewModel
{
    
    
    public int Id {
    
     get; set; }
    public string Name {
    
     get; set; }
}

一般来讲一个页面对应一个ViewModel，根据业务复杂程度定义这个里面的成员
当然可以使用this指向当前对象,通过这种方式，无需额外创建 ViewModel 或数据对象，可直接在窗口类中定义属性供 UI 绑定,比如下面的这些不同绑定数据源的定义到时候直接xml页面使用

 public MainWindow()
 {
    
    
     InitializeComponent();
     DataContext = this;
 }
 public ObservableCollection<string> Items {
    
     get; } = new ObservableCollection<string>
 {
    
    
     "选项一", "选项二", "选项三"
 };

 public ObservableCollection<DataItem> DataItems {
    
     get; } = new ObservableCollection<DataItem>
 {
    
    
     new DataItem {
    
     Id = 1, Name = "项目A", IsActive = true },
     new DataItem {
    
     Id = 2, Name = "项目B", IsActive = false }
 };

public string textBoxText {
    
     get; set; } = "初始文本";

 public DataItem dataItem {
    
     get; set; } = new DataItem
 {
    
    
     Id = 1,
     Name = "项目A",
     IsActive = true
 };

继承父容器的 DataContext

方式说明
子控件默认继承父容器（如 Grid、StackPanel）的 DataContext，无需显式设置
适用场景
同一容器内多个控件共享同一数据源。
简化重复的绑定路径声明。
注意事项
若子控件显式设置自己的 DataContext，会覆盖继承的值

<!-- 父容器设置 DataContext -->
<Grid DataContext="{StaticResource UserData}">
    <!-- 子元素自动继承 DataContext -->
    <TextBlock Text="{Binding Name}"/>
    <TextBlock Text="{Binding Age}"/>
</Grid>

绑定到其他对象的属性

适用场景
跨组件共享数据源（如全局配置）。
动态切换数据源（如多语言切换）
方式说明
将 DataContext 绑定到其他对象的属性，实现动态数据源切换

<!-- 绑定到其他控件的 DataContext -->
<Grid x:Name="ParentGrid">
    <StackPanel DataContext="{Binding ElementName=ParentGrid, Path=DataContext}">
        <TextBlock Text="{Binding Name}"/>
    </StackPanel>
</Grid>

<!-- 绑定到资源中的对象 -->
<Grid DataContext="{Binding Source={StaticResource GlobalData}}">
    <TextBlock Text="{Binding Version}"/>
</Grid>

设置方式对比

在这里插入图片描述

Binding

Path

Path 是 Binding 的关键属性，上面说了有不同的控件使用不同数据源，那么属性路径很重要。它支持多种语法形式，能够访问简单属性、嵌套属性、附加属性、索引器及集合元素
但是总是省略 Path：{Binding} 表示绑定到整个 DataContext 对象

基本用法直接绑定DataContext

<!-- 绑定到 DataContext 的 Name 属性 -->
<TextBlock Text="{Binding Name}"/>

<!-- 绑定到 DataContext 的 Person 对象的 Name 属性 -->
<TextBlock Text="{Binding Person.Name}"/>

<!-- 绑定到 DockPanel.Dock 附加属性 -->
<Button Content="Submit" DockPanel.Dock="{Binding DockPosition}"/>

<!-- 绑定到集合的索引为0的元素 -->
<TextBlock Text="{Binding Items[0]}"/>
<!-- 多参数索引器 -->
<TextBlock Text="{Binding Matrix[(sys:Int32)2,(sys:Int32)3]}"/>

特殊场景与高级用法

控件间绑定
结合 ElementName：绑定到其他控件的属性

<Slider x:Name="slider" Minimum="0" Maximum="100"/>
<TextBlock Text="{Binding Value, ElementName=slider}"/>

绑定到集合（Collection Binding）
使用 ItemsControl 绑定集合数据，支持动态更新

<ListBox ItemsSource="{Binding Users}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

相对绑定（RelativeSource Binding）
绑定到当前元素或父级元素的属性。

<!-- 绑定到父级容器的宽度 -->
<TextBlock Text="{Binding Width, RelativeSource={RelativeSource AncestorType=Grid}}"/>

<!-- 绑定到自身 Tag 属性 -->
<Button Content="Click" Tag="Info" 
        ToolTip="{Binding Tag, RelativeSource={RelativeSource Self}}"/>

模板绑定（TemplateBinding）

<ControlTemplate TargetType="Button">
    <Border Background="{TemplateBinding Background}">
        <ContentPresenter/>
    </Border>
</ControlTemplate>

多绑定（MultiBinding）

<TextBlock>
    <TextBlock.Text>
        <MultiBinding Converter="{StaticResource NameFormatConverter}">
            <Binding Path="FirstName"/>
            <Binding Path="LastName"/>
        </MultiBinding>
    </TextBlock.Text>
</TextBlock>

数据转换与验证

值转换器（Value Converter）
通过实现 IValueConverter 接口，自定义数据转换逻辑

public class BoolToVisibilityConverter : IValueConverter
{
    
    
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        => (value is bool boolVal && boolVal) ? Visibility.Visible : Visibility.Collapsed;

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        => throw new NotImplementedException();
}
<Button Visibility="{Binding IsVisible, Converter={StaticResource BoolToVisibilityConverter}}"/>

数据验证（Validation）
通过 ValidationRule 或 INotifyDataErrorInfo 实现输入验证

<TextBox>
    <TextBox.Text>
        <Binding Path="Age">
            <Binding.ValidationRules>
                <local:NumberValidationRule Min="0" Max="150"/>
            </Binding.ValidationRules>
        </Binding>
    </TextBox.Text>
</TextBox>

绑定更新触发机制（UpdateSourceTrigger）

控制数据源更新的时机：
PropertyChanged：目标属性变化时立即更新（适用于实时同步，如搜索框）。
LostFocus：目标元素失去焦点时更新（默认行为，适用于表单输入）。
Explicit：需手动调用 UpdateSource() 方法触发更新

数据绑定模式