WPF元素绑定

紫云星2023-09-09 18:56

简单的说，数据绑定是一种关系，该关系告诉WPF从源对象提取一些信息，并用这些信息设置目标对象的属性。目标属性始终是依赖属性，通常位于WPF元素中------毕竟，WPF数据绑定的最终目标是在用户界面中显示一些信息。然而，源对象可以是任何内容，从另一个WPF元素乃至ADO.NET数据对象（如DataTable、DataRow）或您自行创建的纯数据对象。

将元素绑定到一起

数据绑定最简单的情形是，源对象是WPF元素而且源属性是依赖项属性，依赖性属性具有内置的更改通知支持。因此，当在源对象中改变依赖项属性的值时，会立即更新目标对象中的绑定属性，这正是我们所需要的的行为------而且不必为此构建任何额外的基础结构。

cs 复制代码 
<Slider Name="sliderFontSize" Minimum="1" Maximum="40" Value="10" TickFrequency="1" />
<TextBlock x:Name="textBlockFontSize" FontSize="{Binding ElementName=sliderFontSize, Path=Value, Mode=TwoWay}" Text="Simple Text"/>
<TextBlock Name="textBlockFontSize2" Text="Simple Text"/>
cs 复制代码 
textBlockFontSize2.SetBinding(TextBlock.FontSizeProperty, new Binding("Value") { ElementName = "sliderFontSize", Mode=BindingMode.TwoWay });

这里将两个TextBlock的FontSize属性绑定到Slider的Value属性上，其中一个通过绑定表达式设置，另一个则是通过代码设置，现在在滑动Slider的滑块时，两个TextBlock 的字体大小会随之发生变化。

数据绑定表达式使用XAML标记扩展，也会创建一个Binding 类的实例，所以绑定表达式以 Binding 开头。

使用代码创建绑定时，先创建一个绑定对象，构造函数参数指定Path字段，然后设置Binding相关的属性值，通过绑定目标的SetBinding函数，将绑定目标的属性与Binding对象关联即可。

因为基于标记的绑定更清晰并且需要完成的工作更少，所以更常用。但在一些特殊情况下，会希望使用代码创建绑定：

创建动态绑定如果希望根据其他运行时信息修改绑定，或者根据环境创建不同的绑定，这时使用代码创建绑定通常更合理（此外，也可以在窗口的Resources集合中定义可能希望使用的每个绑定，并只添加使用合适的绑定对象调用SetBinding() 方法的代码）。

删除绑定 如果希望删除绑定，从而可以通过普通方式设置属性，需要借助ClearBinding() 或 ClearAllBinding() 方法。仅为属性应用新值是不够的------如果正在使用双向绑定，设置的值会传播到链接的对象，并且两个属性保持同步。

绑定错误

WPF不会引发异常来通知与数据绑定相关的问题。如果指定的元素或属性不存在，那么不会收到任何指示，只是不能在目标属性中显示数据。WPF会输出绑定失败细节的跟踪信息。当调试应用程序时，该信息显示在Visual Studio 的输出窗口中。

绑定模式

绑定模式通过Binding.Mode 属性设置，WOF允许使用5个枚举值中的任何一个。

OneWay：当源属性变化时更新目标属性

TwoWay：当源属性变化时更新目标属性，并且当目标属性变化时更新源属性

OneTime：最初根据源属性值设置目标属性，然后，其后的所有变化都会被忽略。通常，如果知道源属性不会变化，可使用这种模式降低开销

OneWayToSource：与OneWay类似，但方向相反，当目标属性变化时更新源属性

Default：此类绑定依赖于目标属性。既可以是双向的（对于用户可以设置的属性，如TextBox.Text），也可以是单向的（对于所有其它属性）。除非明确指定了一种模式，否则所有绑定都是用该方式。

使用代码检索绑定

可使用代码检索绑定并检查其属性，而不必考虑绑定最初是使用代码还是标记创建的。可采用两种方式来获取绑定信息：

1、使用静态方法 BindingOperations.GetBinding() 来检索相应的Binding 对象。

2、使用静态方法 BindingOperations.GetBindingExpression() 方法获得更实用的 BindingExpression对象。

cs 复制代码 
Binding binding = BindingOperations.GetBinding(textBlockFontSize, TextBox.FontSizeProperty);
MessageBox.Show("Bound " + binding.Path.Path + " to source element " + binding.ElementName);

//BindingExpression expression = BindingOperations.GetBindingExpression(textBlockFontSize, TextBlock.FontSizeProperty);
BindingExpression expression = textBlockFontSize.GetBindingExpression(TextBlock.FontSizeProperty);
MessageBox.Show("Bound " + expression.ResolvedSourcePropertyName + " with data " + ((Slider)expression.ResolvedSource).Value);

多绑定

可以为一个控件设置多个绑定，比如为TextBlock的FontSize、Text分别创建各自的绑定。

甚至可以为同一个控件的同一个属性绑定至多个源。乍一看，这好像不可能实现，毕竟，当创建绑定时，只能指定一个目标属性，然而，可使用多种方法突破这一限制。最简单的方法是更改数据绑定模式，可以将Mode属性设置为TwoWay，这样可以在源上设置绑定到目标的绑定表达式。

cs 复制代码 
<Slider Name="sliderFontSize" Minimum="1" Maximum="40" Value="10" TickFrequency="1" />
<TextBlock x:Name="textBlockFontSize" FontSize="{Binding ElementName=sliderFontSize, Path=Value, Mode=TwoWay}" Text="Simple Text"/>
<TextBlock Name="textBlockFontSize2" Text="Simple Text"/>
<TextBox Name="txtContent" Text="{Binding ElementName=textBlockFontSize, Path=FontSize, Mode=TwoWay}"/>
<TextBox Name="txtContent2" Text="{Binding ElementName=sliderFontSize, Path=Value, Mode=TwoWay}"/>
<TextBlock FontSize="{Binding ElementName=sliderFontSize, Path=Value, Mode=TwoWay}" Text="{Binding ElementName=txtContent, Path=Text}"/>

双向绑定具有极大的灵活性，可使用它们从源向目标以及从目标向源应用改变。还可以组合应用它们来创建非常复杂的不需要编写代码的窗口。

绑定更新

当使用OneWay 或TwoWay 绑定模式时，改变后的值会立即从源传播到目标。然而，反向的变化传递------从目标到源------未必会立即发生。它们的行为由 Binding.UpdateSourceTrigger 属性控制：

PropertyChanged: 当目标属性发生变化时立即更新源

LostFocus:当目标属性发生变化并且目标丢失焦点时更新

Explicit:除非调用BindingExpress.UpdateSource()方法，否则无法更新源

Default:根据目标属性的元数据确定更新行为。大多数属性的默认行为是PropertyChanged，但TextBox.Text 属性的默认行为是LostFocus

通过BindingExpress.UpdateSource()方法更新源的方式如下：

cs 复制代码 
BindingExpression expression = txtContent2.GetBindingExpression(TextBox.TextProperty);
expression.UpdateSource();

绑定延迟

在极少数情况下，需要防止数据绑定触发操作和修改源对象，至少在某一时段是这样的。可使用Binding.Delay 属性，等待数毫秒，之后再提交更改。

绑定到非元素对象

当绑定到非元素对象时，需要放弃Binding.ElementName 属性，并使用一下属性中的一个：

Source：该属性是指向源对象的引用------换句话说，是提供数据的对象

RelativeSource：这是引用，使用RelativeSource 对象指向源对象。有了这个附加层，可在当前元素的基础上构建引用。这似乎无谓的增加了复杂程度，但实际上，RelativeSource 属性是一种特殊工具，当编写控件模板以及数据模板时是很方便的

DataContext：如果没有使用Source或RelativeSource 属性指定源，WPF就从当前元素开始在元素数中向上查找，检查每个元素的DataContext 属性，并使用第一个非空的DataContext 属性。当我们要将同一个对象的多个属性绑定到不同的元素是，DataContext属性时非常有用的，因为可在更高陈词的容器对象上（而不是直接在目标元素上）设置DataContext 属性。

Source属性

Source属性非常简单，唯一的问题是为了进行绑定，需要具有数据对象。可以使用一些已经准备好的静态对象或来自.Net类库的组件，也可以是绑定到先前作为资源创建的对象。

cs 复制代码 
<Window>
    <Window.Resources>
        <local:InstrumentViewModel x:Key="instrument" ExchangeID="SHSE" InstrumentID="600000" InstrumentName="浦发银行"></local:InstrumentViewModel>
    </Window.Resources>
    <StackPanel>
        <TextBlock Text="{Binding Source={x:Static SystemFonts.IconFontFamily}, Path=Source}"/>
        <TextBlock Text="{Binding Source={x:Static local:MainWindow.StaticString}}"/>
        <TextBlock Text="{Binding Source={StaticResource instrument}, Path=ExchangeID}"/>
    </StackPanel>
</Window>

RelativeSource属性

通过RelativeSource属性可根据相对于目标对象的关系指向源对象。例如，可使用RelativeSource属性将元素绑定到自身或其父元素。RelativeSource 对象查找有四种模式，通过Mode 属性设置：

Self：表达式绑定到同一元素的另一个属性上

cs 复制代码 
<TextBlock Text="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Foreground, StringFormat={}{0}}"/>

FindAncestor：表达式绑定到父元素。WPF将查找元素树，直至发现期望的父元素。为了指定父元素，还必须设置AncestorType 属性以指示希望查找的父元素的类型。此外，还可以用AncestorLevel 属性略过发现的一定数量的特定元素。例如，当在一棵树中查找时，如果希望绑定到第三个ListBoxItem 类型的元素，应当使用如下设置------ AncestorType = {x:Type ListBoxItem} 并设置 AncestorLevel = 3，从而略过前两个ListBoxItem 元素。默认情况下，AncestorLevel 属性设置为1，并在找到第一个匹配的元素时停止查找

cs 复制代码 
<StackPanel x:Name="BindingTextBlockStackPanel">
    <TextBlock Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type StackPanel}}, Path=Name}"/>
</StackPanel>

PreviousData：表达式绑定到数据绑定列表中的前一个数据项。在列表项中会使用这种模式

cs 复制代码 
<ItemsControl ItemsSource="{Binding Path=Instruments}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Margin="2">
                <TextBlock Text="{Binding ExchangeID}" />
                <TextBlock Text="{Binding Path=InstrumentID, RelativeSource={RelativeSource Mode=PreviousData}}" Foreground="Red" Margin="5,0,0,0"/>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

TemplateParent：表达式绑定到应用模板的元素。只有当绑定位于控件模板或数据模板内部时，这种模式才能工作。

cs 复制代码 
<Button Width="64" Height="64" Content="Ellipse" Background="OrangeRed">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Grid>
                <Ellipse Fill="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Background}"/>
                <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>

DataContext属性

在某些情况下，会将大量元素绑定到同一个对象。对于这种情况，使用DataContext 属性一次性定义绑定源会更清晰，也更灵活。

cs 复制代码 
<StackPanel DataContext="{x:Static SystemFonts.IconFontFamily}">
    <TextBlock Text="{Binding Path=Source}"/>
    <TextBlock Text="{Binding Path=LineSpacing}"/>
    <TextBlock Text="{Binding Path=FamilyTypefaces[0].Style}"/>
    <TextBlock Text="{Binding Path=FamilyTypefaces[0].Weight}"/>
</StackPanel>

完整代码如下：

MainWindow.xaml

cs 复制代码 
<Window x:Class="TestElementBinding.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TestElementBinding"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <local:InstrumentViewModel x:Key="instrument" ExchangeID="SHSE" InstrumentID="600000" InstrumentName="浦发银行"></local:InstrumentViewModel>
    </Window.Resources>
    <StackPanel>
        <StackPanel>
            <Slider Name="sliderFontSize" Minimum="1" Maximum="40" Value="10" TickFrequency="1" />
            <TextBlock x:Name="textBlockFontSize" FontSize="{Binding ElementName=sliderFontSize, Path=Value, Mode=TwoWay}" Text="Simple Text"/>
            <TextBlock Name="textBlockFontSize2" Text="Simple Text"/>
            <TextBox Name="txtContent" Text="{Binding ElementName=textBlockFontSize, Path=FontSize, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Delay=500}"/>
            <TextBox Name="txtContent2" Text="{Binding ElementName=sliderFontSize, Path=Value, Mode=TwoWay, UpdateSourceTrigger=Explicit}"/>
            <TextBlock FontSize="{Binding ElementName=sliderFontSize, Path=Value, Mode=TwoWay}" Text="{Binding ElementName=txtContent, Path=Text}"/>
            <Button Click="Button_Click">GetBinding</Button>
            <Button Click="UpdateSourceButton_Click">UpdateSource</Button>
        </StackPanel>
        <StackPanel>
            <TextBlock Text="{Binding Source={x:Static SystemFonts.IconFontFamily}, Path=Source}"/>
            <TextBlock Text="{Binding Source={x:Static local:MainWindow.StaticString}}"/>
            <TextBlock Text="{Binding Source={StaticResource instrument}, Path=ExchangeID}"/>
        </StackPanel>
        <StackPanel x:Name="BindingTextBlockStackPanel">
            <TextBlock Text="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Foreground, StringFormat={}{0}}"/>
            <TextBlock Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type StackPanel}}, Path=Name}"/>
            <ItemsControl ItemsSource="{Binding Path=Instruments}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Margin="2">
                            <TextBlock Text="{Binding ExchangeID}" />
                            <TextBlock Text="{Binding Path=InstrumentID, RelativeSource={RelativeSource Mode=PreviousData}}" Foreground="Red" Margin="5,0,0,0"/>
                        </StackPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
            <Button Width="64" Height="64" Content="Ellipse" Background="OrangeRed">
                <Button.Template>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Ellipse Fill="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Background}"/>
                            <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </Grid>
                    </ControlTemplate>
                </Button.Template>
            </Button>
        </StackPanel>
        <StackPanel DataContext="{x:Static SystemFonts.IconFontFamily}">
            <TextBlock Text="{Binding Path=Source}"/>
            <TextBlock Text="{Binding Path=LineSpacing}"/>
            <TextBlock Text="{Binding Path=FamilyTypefaces[0].Style}"/>
            <TextBlock Text="{Binding Path=FamilyTypefaces[0].Weight}"/>
        </StackPanel>
    </StackPanel>
</Window>

MainWindow.xaml.cs

cs 复制代码 
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace TestElementBinding;

public class ViewModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler? PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string? propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    protected virtual bool SetProperty<T>(ref T member, T value, [CallerMemberName] string? propertyName = null)
    {
        if (EqualityComparer<T>.Default.Equals(member, value))
        {
            return false;
        }
        member = value;
        OnPropertyChanged(propertyName);
        return true;
    }
}
public class InstrumentViewModel : ViewModelBase
{
    private string _exchangeID = string.Empty;
    private string _instrumentID = string.Empty;
    private string _instrumentName = string.Empty;
    public string ExchangeID { get => _exchangeID; set => SetProperty(ref _exchangeID, value); }
    public string InstrumentID { get => _instrumentID; set => SetProperty(ref _instrumentID, value); }
    public string InstrumentName { get => _instrumentName; set => SetProperty(ref _instrumentName, value); }
}

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        InitInstruments();
        BindingTextBlockStackPanel.DataContext = this;

        textBlockFontSize2.SetBinding(TextBlock.FontSizeProperty, new Binding("Value") { ElementName = "sliderFontSize", Mode = BindingMode.TwoWay });
    }
    public static string StaticString { get; set; } = "Static String";
    public ObservableCollection<InstrumentViewModel> Instruments { get; set; } = new ObservableCollection<InstrumentViewModel> ();
    public void InitInstruments()
    {
        Instruments.Add(new InstrumentViewModel() { ExchangeID = "SHSE", InstrumentID = "601155", InstrumentName = "新城控股" });
        Instruments.Add(new InstrumentViewModel() { ExchangeID = "SHSE", InstrumentID = "600036", InstrumentName = "招商银行" });
        Instruments.Add(new InstrumentViewModel() { ExchangeID = "SHSE", InstrumentID = "600266", InstrumentName = "城建发展" });
        Instruments.Add(new InstrumentViewModel() { ExchangeID = "SHSE", InstrumentID = "600837", InstrumentName = "海通证券" });
        Instruments.Add(new InstrumentViewModel() { ExchangeID = "SHSE", InstrumentID = "601668", InstrumentName = "中国建筑" });

        Instruments.Add(new InstrumentViewModel() { ExchangeID = "SZSE", InstrumentID = "000002", InstrumentName = "万科A" });
        Instruments.Add(new InstrumentViewModel() { ExchangeID = "SZSE", InstrumentID = "000001", InstrumentName = "平安银行" });
        Instruments.Add(new InstrumentViewModel() { ExchangeID = "SZSE", InstrumentID = "000623", InstrumentName = "吉林敖东" });
        Instruments.Add(new InstrumentViewModel() { ExchangeID = "SZSE", InstrumentID = "002739", InstrumentName = "万达电影" });
        Instruments.Add(new InstrumentViewModel() { ExchangeID = "SZSE", InstrumentID = "300642", InstrumentName = "透景生命" });
    }
    private void Button_Click(object sender, RoutedEventArgs e)
    {
        Binding binding = BindingOperations.GetBinding(textBlockFontSize, TextBox.FontSizeProperty);
        MessageBox.Show("Bound " + binding.Path.Path + " to source element " + binding.ElementName);

        //BindingExpression expression = BindingOperations.GetBindingExpression(textBlockFontSize, TextBlock.FontSizeProperty);
        BindingExpression expression = textBlockFontSize.GetBindingExpression(TextBlock.FontSizeProperty);
        MessageBox.Show("Bound " + expression.ResolvedSourcePropertyName + " with data " + ((Slider)expression.ResolvedSource).Value);
    }
    private void UpdateSourceButton_Click(object sender, RoutedEventArgs e)
    {
        BindingExpression expression = txtContent2.GetBindingExpression(TextBox.TextProperty);
        expression.UpdateSource();
    }
}
相关推荐
月落.1 小时前
WPF的＜ContentControl＞控件
wpf
就是有点傻1 小时前
WPF中的依赖属性
开发语言·wpf
wangnaisheng1 小时前
【WPF】把一个Window放在左上角/右上角顶格显示
wpf
WineMonk1 小时前
.NET WPF CommunityToolkit.Mvvm框架
.net·wpf·mvvm
月落.2 小时前
WPF中的INotifyPropertyChanged接口
wpf
界面开发小八哥2 小时前
界面控件DevExpress WPF中文教程：Data Grid——卡片视图设置
.net·wpf·界面控件·devexpress·ui开发
平凡シンプル2 小时前
WPF 打包
wpf
VickyJames2 小时前
基于XAML框架和跨平台项目架构设计的深入技术分析
wpf·开源分享·unoplatform·winui3·项目架构
冷眼Σ(-᷅_-᷄๑)5 小时前
WPF缩放动画和平移动画叠加后会发生什么?
wpf·动画
△曉風殘月〆7 小时前
WPF MVVM入门系列教程（二、依赖属性）
c#·wpf·mvvm
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play