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>

 

 

 

*** |  以上內容僅為學習參考、學習筆記使用  | ***