走進WPF之數據綁定

在軟件三層架構中，數據需要在業務邏輯層，顯示層，數據處理層來回傳遞，在WPF中，Binding是可以實現數據關聯在一起的橋梁，所謂“一橋飛架南北，天塹變通途”。有了Binding，后台可以專心處理程序與算法，前台可以專注於UI設計。本文以一些簡單的小例子，簡述數據綁定的相關內容，僅供學習分享使用，如有不足之處，還請指正。

控件之間的綁定

通過綁定兩個控件，可以實現數據的實時同步，且不需要寫后台代碼。本例Slider源控件，TextBox為目標控件，通過Text="{Binding ElementName=one, Path=Value,Mode=TwoWay,FallbackValue=0,UpdateSourceTrigger=PropertyChanged}" 實現數據的雙向綁定。 如下所示：

 示例源碼

控件之間數據綁定的固定格式為{Binding ElementName=源, Path=屬性,Mode=方式,FallbackValue=默認值,UpdateSourceTrigger=觸發方式}。其中有些可以省略，如下所示：

<Window x:Class="WpfApp2.B1Window"
        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:WpfApp2"
        mc:Ignorable="d"
        Title="數據綁定基礎示例" Height="450" Width="600">
    <StackPanel>
        <Slider x:Name="one" Orientation="Horizontal" Minimum="0" Maximum="100" Height="25" Margin="5" Value="10" Foreground="AliceBlue" Background="LightSalmon" IsSnapToTickEnabled="True" ></Slider>
        <TextBox x:Name="two"  Text="{Binding ElementName=one, Path=Value,Mode=TwoWay,FallbackValue=0,UpdateSourceTrigger=PropertyChanged}" Padding="5" Margin="5" FontSize="20"></TextBox>
    </StackPanel>
</Window>

控件與資源的綁定

控件綁定資源，即可達到資源的一次定義，多次復用。通過Text="{Binding Source={StaticResource zero}}"進行綁定資源，如下所示：

 

 示例源碼

控件與資源之間，通過{Binding Source={StaticResource 資源名}}的方式進行綁定，如果資源還有其他屬性，則需要指定Path對應的屬性名，若純文本內容，則不需要指定Path。如下所示：

<Window x:Class="WpfApp2.B2Window"
        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:WpfApp2"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        mc:Ignorable="d"
        Title="資源綁定示例" Height="250" Width="400" Background="AliceBlue">
    <Window.Resources>
        <sys:String x:Key="zero">靜夜思</sys:String>
        <sys:String x:Key="one">床前明月光，疑似地上霜。</sys:String>
        <sys:String x:Key="two">舉頭望明月，低頭思故鄉。</sys:String>
    </Window.Resources>
    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" >
        <TextBlock x:Name="title"  Text="{Binding Source={StaticResource zero}}" Margin="5" Padding="5" FontSize="20" TextAlignment="Center"></TextBlock>
        <TextBlock x:Name="first"  Text="{Binding Source={StaticResource one}}" Margin="5" Padding="5" FontSize="20"></TextBlock>
        <TextBlock x:Name="after" Text="{Binding Source={StaticResource two}}" Margin="5" Padding="5" FontSize="20"></TextBlock>
    </StackPanel>
</Window>

DataContext

DataContext是指數據上下文，在WPF中，每一個控件都可以設置DataContext。通過上下文，可以自動匹配屬性進行綁定。

XAML中設置DataContext

1. 設置資源x:Key="student"，定義一個學生對象，如下所示：

    <Window.Resources>
        <Style TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Center"></Setter>
            <Setter Property="VerticalAlignment" Value="Center"></Setter>
            <Setter Property="FontSize" Value="16"></Setter>
        </Style>
        <Style TargetType="TextBox">
            <Setter Property="VerticalAlignment" Value="Center"></Setter>
            <Setter Property="FontSize" Value="16"></Setter>
        </Style>
        <local:Student x:Key="student" Name="張三" Age="18" Sex="男" Classes="三班" >
            
        </local:Student>
    </Window.Resources>

2. 將資源賦值給DataContext，並在控件上綁定屬性，如下所示：

   <Grid DataContext="{StaticResource student}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="3*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Margin="5" Padding="5">姓名：</TextBlock>
        <TextBox Grid.Row="0" Grid.Column="1" x:Name="txtName" Margin="5" Padding="5" Text="{Binding Name}"></TextBox>

        <TextBlock Grid.Row="1" Grid.Column="0" Margin="5" Padding="5">年齡：</TextBlock>
        <TextBox Grid.Row="1" Grid.Column="1" x:Name="txtAge" Margin="5" Padding="5" Text="{Binding Age}"></TextBox>

        <TextBlock Grid.Row="2" Grid.Column="0" Margin="5" Padding="5">性別：</TextBlock>
        <TextBox Grid.Row="2" Grid.Column="1" x:Name="txtSex" Margin="5" Padding="5" Text="{Binding Sex}"></TextBox>
        
        <TextBlock Grid.Row="3" Grid.Column="0" Margin="5" Padding="5">班級：</TextBlock>
        <TextBox Grid.Row="3" Grid.Column="1" x:Name="txtClassses" Margin="5" Padding="5" Text="{Binding Classes}"></TextBox>
        
    </Grid>

經過以上兩步，就可以實現數據的綁定，示例效果如下：

 

 代碼設置DataContext

DataContext不僅可以通過XAML進行賦值，也可以通過C#代碼設定，如下所示：

Student s = new Student()
{
     Name="李四",
     Age=22,
     Sex="女",
     Classes="4班"
};
//one是grid的Name
this.one.DataContext = s;

示例效果與XAML一致，如下所示：

 注意：要實現DataContext數據綁定，有以下兩點要求：

1. 數據源對象的屬性不能是private修飾。
2. 綁定的名稱必須和屬性名保持一致，如不一致，則綁定失效。

雙向綁定

普通的對象只能實現一次的單向綁定，如果要實現雙向綁定，需要實現通知接口【System.ComponentModel.INotifyPropertyChanged】並在屬性變更時進行通知，如下所示：

    public class Person:INotifyPropertyChanged
    {
        private string name;
        public string Name
        {
            get
            {
                return name;
            }
            set
            {
                name = value;
                OnPropertyChanged("Name");
            }
        }

        private int age;

        public int Age
        {
            get { return age; }
            set
            {
                age = value;
                OnPropertyChanged("Age");
            }
        }

        private string sex;

        public string Sex
        {
            get { return sex; }
            set
            {
                sex = value;
                OnPropertyChanged("Sex");
            }
        }

        private string classes;

        public string Classes
        {
            get { return classes; }
            set
            {
                classes = value;
                OnPropertyChanged("Classes");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null) {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

在初始化時對DataCotext進行賦值，然后在變更事件中，更改屬性值，則頁面綁定的值也會隨着改變。如下所示：

    /// <summary>
    /// B4Window.xaml 的交互邏輯
    /// </summary>
    public partial class B4Window : Window
    {
        private Person person;
        public B4Window()
        {
            InitializeComponent();
            person = new Person()
            {
                Name = "李四",
                Age = 22,
                Sex = "女",
                Classes = "4班"
            };
            //one是grid的Name
            this.one.DataContext = person;
        }

        private void btnUpdate_Click(object sender, RoutedEventArgs e)
        {
            this.person.Name = "王五";
            this.person.Age = 18;
            this.person.Sex = "男";
            this.person.Classes = "6班";

        }
    }

雙向綁定效果，如下所示：

備注

以上就是數據綁定的簡單介紹，旨在拋磚引玉，共同學習，一起進步。

夜雨寄北【作者】李商隱 【朝代】唐

君問歸期未有期，巴山夜雨漲秋池。何當共剪西窗燭，卻話巴山夜雨時。