WPF - 001 数据绑定

发布时间 2023-07-15 12:19:53作者: Snoopy1866

数据绑定

WPF数据绑定四大要素:绑定源、绑定源属性、绑定目标、绑定目标属性。

img

绑定源可以是:

  • CLR 对象
  • ADO
  • XML
  • Dependency Object

绑定目标可以是:

  • Dependency Object

能够绑定的属性都是依赖属性,即 Dependency Property,所有 Dependency Property 的值都是 Object -> DenpendencyProperty 类的对象。

数据绑定的方式

在 UI 代码中绑定

采用 {binding ElementName = xxx, Path = xxx} 的方式,将某个元素的某个属性绑定到当前元素的属性上。

例如:将 TextBox 的 Text 属性绑定到 TextBlock 的 Text 属性上。

后台代码:

<StackPanel Margin="10">
        <TextBox Name="txtName" Height="20" Width="200" HorizontalAlignment="Left"></TextBox>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="Hello "></TextBlock>
            <TextBlock Text="{Binding ElementName=txtName, Path=Text}"></TextBlock>
        </StackPanel>
    </StackPanel>

img

使用 DataContext 属性

使用控件的 DataContext 可以将另一个控件对象的属性绑定到当前对象的数据上下文中,这样在前台代码中就不需要声明绑定源了,仅需声明绑定源的属性即可,即 {Binding Path=xxx}

后台代码:

public partial class Binding2 : Window
{
    public Binding2()
    {
        InitializeComponent();

        // 设置 txbName 的数据上下文对象
        this.txbName.DataContext = this.txtName;
    }
}

前台代码:

<StackPanel Margin="10">
        <TextBox Name="txtName" Height="20" Width="200" HorizontalAlignment="Left"></TextBox>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="Hello "></TextBlock>
            <TextBlock Name ="txbName" Text="{Binding Path=Text}"></TextBlock>
        </StackPanel>
    </StackPanel>

效果一致:
img

在后台代码中绑定

使用 Binding 类进行绑定,首先实例化一个 Binding 对象,包含两个字段 SourcePath,分别表示绑定源和绑定源的属性,然后使用控件的 SetBinding 方法进行属性的绑定。

后台代码:

public partial class Binding3 : Window
{
    public Binding3()
    {
        InitializeComponent();

        BindingData();
    }

    private void BindingData()
    {
        var binding = new Binding
        {
            Source = txtName,
            Path = new PropertyPath("Text"),
        };
        txbName.SetBinding(TextBlock.TextProperty, binding);
    }
}

前台代码:

<StackPanel Margin="10">
    <TextBox Name="txtName" Height="20" Width="200" HorizontalAlignment="Left"></TextBox>
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="Hello "></TextBlock>
        <TextBlock Name ="txbName"></TextBlock>
    </StackPanel>
</StackPanel>