WPF - 001 数据绑定

数据绑定

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

绑定源可以是：

• 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>

使用 DataContext 属性

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

后台代码：

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>

效果一致：

在后台代码中绑定

使用 Binding 类进行绑定，首先实例化一个 Binding 对象，包含两个字段 Source 和 Path，分别表示绑定源和绑定源的属性，然后使用控件的 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>

UpdateSourceTrigger 方法

Binding 类中的 UpdateSourceTrigger 用于指定更新源的触发方式，它有3个值，分别为 Explicit、LostFocus、PropertyChanged。

• Explicit : 需要手动触发更新
• LostFocus : 当控件失去焦点时更新
• PropertyChanged : 当控件属性更改时更新

Explicit

后台代码：

public partial class UpdateSourceTrigger : Window
{
    public UpdateSourceTrigger()
    {
        InitializeComponent();
        this.DataContext = this;
    }

    private void BtnUpdateSource_Click(object sender, RoutedEventArgs e)
    {
        // 获取绑定表达式对象
        var BindingExpression = txtWindowTitle.GetBindingExpression(TextBox.TextProperty);
        // 更新绑定源的属性
        BindingExpression.UpdateSource();  
    }
}

前台代码：

<StackPanel Margin="10">
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="窗体标题："></TextBlock>
        <TextBox Name="txtWindowTitle" Text="{Binding Title, UpdateSourceTrigger=Explicit}" Width="150"></TextBox>
    </StackPanel>
    <Button Name="BtnUpdateSource" Content="更新源" Click="BtnUpdateSource_Click" Width="200" Margin="0, 10" HorizontalAlignment="Left"></Button>
</StackPanel>

LostFocus

后台代码：

public partial class UpdateSourceTrigger : Window
{
    public UpdateSourceTrigger()
    {
        InitializeComponent();
        this.DataContext = this;
    }
}

前台代码：

<StackPanel Margin="10">
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="窗体标题："></TextBlock>
        <TextBox Name="txtWindowTitle" Text="{Binding Title, UpdateSourceTrigger=LostFocus}" Width="150"></TextBox>
    </StackPanel>
    <TextBox Margin="0 10" Width="150" HorizontalAlignment="Left"></TextBox>
</StackPanel>

PropertyChanged

后台代码：与 LostFocus 一致。

前台代码：

<StackPanel Margin="10">
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="窗体标题："></TextBlock>
        <TextBox Name="txtWindowTitle" Text="{Binding Title, UpdateSourceTrigger=PropertyChanged}" Width="150"></TextBox>
    </StackPanel>
    <TextBox Margin="0 10" Width="150" HorizontalAlignment="Left"></TextBox>
</StackPanel>