WPF - 001 数据绑定

数据绑定

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},甚至 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>

效果一致:
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>

UpdateSourceTrigger 方法

Binding 类中的 UpdateSourceTrigger 用于指定更新源的触发方式,它有3个值,分别为 ExplicitLostFocusPropertyChanged

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

img

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>

img

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>

img

posted @ 2023-07-15 12:13  Snoopy1866  阅读(90)  评论(0编辑  收藏  举报