WPF 数据绑定的方法

一、数据绑定

WPF中的数据绑定是应用程序UI与业务逻辑之间建立连接的过程。

如果绑定正确设置并且数据提供正确通知，则当数据的值发生更改时，绑定到该数据的视觉元素也会自动反映更改。

数据绑定可能还意味着如果视觉元素中数据的外部表现形式发生更改，则基础数据可以自动更新以反映更改。

简单理解一下就是：控件的属性由绑定的数据来动态判断的一种方式

二、绑定关系

一个绑定（Binding）关系由四个方面组成：

1）绑定目标

2）目标属性

3）源目标

4）源属性

也就是说：

绑定目标就是控件

目标属性就是控件对应的属性

源目标就是数据对象（类对象）

源属性就是数据对象的属性（用于动态判断的数据）

Binding可以通过XAML语句实现界面与数据的耦合。

如果把Binding比作数据的桥梁，那么它的两端分别是Binding的源和目标。

数据从哪里来哪里就是源，Binding是架在中间的桥梁，Binding目标是数据要往哪儿去。

一般情况下，Binding源是逻辑层的对象，Binding目标是UI层的控件对象，

这样，数据就会源源不断通过Binding送达UI层，被UI层展现，也就完成了数据驱动UI的过程。

三、数据绑定的方法

1）ElementName -- 依据Name属性相互绑定

关键字：

* Binding

* ElementName

* Path

🙌🌰：

            <TextBlock Name="txt1" FontSize="25" Text="这是一个文本数据"/>
            <TextBlock Name="txt2" FontSize="25" Foreground="Red" Text="{Binding ElementName=txt1,Path=Text}"/>

即：控件txt2通过数据绑定关联控件txt1的Text数据

2）RelativeSource -- 相对绑定（至本身或者父元素属性）

关键字：

* Binding

* RelativeSource

* Mode

* Path

🙌🌰：

        <StackPanel Margin="5">
            <TextBlock Name="txt1" Height="66" FontSize="25" HorizontalAlignment="Center"
                       Text="{Binding RelativeSource={RelativeSource Mode=Self},Path=Height}">
            </TextBlock>
            <TextBlock Name="txt2" Height="66" FontSize="25" HorizontalAlignment="Center"
                       Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=StackPanel},Path=Margin}">
            </TextBlock>
        </StackPanel>

即：将控件txt1的Text数据绑定到自身的Height属性

　　将控件txt2的Text数据绑定到父元素的Margin属性

3）ItemSource -- 绑定到集合元素

关键字：

* Binding

* DataContext

🙌🌰：

<ListBox Name="list1" ItemsSource="{Binding Collection}" HorizontalAlignment="Center"/>

创建临时的集合数据并进行绑定

    public partial class MainWindow : Window
    {
        ObservableCollection<string> collection = new ObservableCollection<string>();

        public ObservableCollection<string> Collection
        {
            get { return collection; }
            set { collection = value; }
        }

        public MainWindow()
        {
            InitializeComponent();

            collection.Add("这是第一个Text数据");
            collection.Add("这是第二个Text数据");
            collection.Add("这是第三个Text数据");
            DataContext = this;
        }
    }

即：将创建的集合数据绑定到ListBox控件上进行显示

再🙌🌰：

<TextBlock Margin="100" HorizontalAlignment="Center" Text="{Binding ElementName=list1,Path=SelectedItem}"/>

这样就可以将ListBox选择的项与TextBlock控件的Text属性绑定

4）DataContext -- 多种不同值的绑定

关键字：

* Binding

* DataContext

🙌🌰：

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new MainViewModel();
        }
    }

    public class MainViewModel
    {
        public MainViewModel()
        {
            Template = "2021年";
            Current = 1001;
            Voltage = 520.1314;
        }

        public string Template { get; set; }
        public int Current { get; set; }
        public double Voltage { get; set; }
    }

分别在页面的控件上绑定不同类型的数据

        <StackPanel HorizontalAlignment="Center">
            <TextBlock FontSize="20" Text="{Binding Template}"/>
            <TextBlock FontSize="20" Text="{Binding Current}"/>
            <TextBlock FontSize="20" Text="{Binding Voltage}"/>
        </StackPanel>

 

 

 

*** |  以上内容仅为学习参考、学习笔记使用  | ***