Windows 8 應用開發：資料繫結基礎完整教學與實戰範例

前言

資料繫結是 XAML 應用開發的核心技術，實現 UI 與資料模型的自動同步。本文系統介紹 Windows 8 中的繫結模式、INotifyPropertyChanged 即時更新、元素間繫結、值轉換器與常用繫結控制項。

基本繫結語法

<TextBox Text="{Binding LastName, Mode=TwoWay}" />

資料模型定義

public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Email { get; set; }
}

設定 DataContext

private void LoadAccount()
{
    this.DataContext = new Person 
    { 
        FirstName = "Kevin", 
        LastName = "Fan", 
        Email = "qq34506@hotmail.com" 
    };
}

三種繫結模式詳細比較

即時更新：INotifyPropertyChanged 介面

當資料模型屬性變更時自動通知 UI 更新：

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class Person : INotifyPropertyChanged
{
    public string FirstName { get; set; }
    
    private string _lastname;
    public string LastName
    {
        get { return _lastname; }
        set 
        { 
            _lastname = value; 
            RaisePropertyChanged(); 
        }
    }
    
    public string Email { get; set; }
    
    public event PropertyChangedEventHandler PropertyChanged;
    
    private void RaisePropertyChanged([CallerMemberName] string caller = "")
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(caller));
    }
}

測試程式碼：

private void Button_Click_1(object sender, RoutedEventArgs e)
{
    person.LastName = "范"; // UI 會自動更新
}

元素間繫結

控制項屬性直接繫結至另一個控制項：

<ProgressRing x:Name="ProgressRing1" 
              IsActive="{Binding IsChecked, ElementName=chkRun}" />
<CheckBox Name="chkRun" Content="執行?" />

勾選 CheckBox 時，ProgressRing 立即啟動/停止動畫。

值轉換器 (IValueConverter)

public class BoolToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        return (bool)value ? Visibility.Visible : Visibility.Collapsed;
    }
    
    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        return (Visibility)value == Visibility.Visible;
    }
}

使用方式：

<Page.Resources>
    <local:BoolToVisibilityConverter x:Key="BoolToVis" />
</Page.Resources>

<TextBlock Visibility="{Binding IsAdmin, Converter={StaticResource BoolToVis}}" />

常用資料繫結控制項

ComboBox - 下拉選單

<ComboBox x:Name="cbUserList" 
          DisplayMemberPath="FullName" 
          SelectionChanged="cbUserList_SelectionChanged_1" />

public List Users { get; set; }

private void LoadUsers()
{
    Users = new List
    {
        new Person { FirstName = "Kevin", LastName = "Fan", Email = "qq34506@hotmail.com" },
        new Person { FirstName = "中國", LastName = "銀光", Email = "Admin@silverlightchina.net" }
    };
    cbUserList.ItemsSource = Users;
}

private void cbUserList_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
{
    SelectionGrid.DataContext = e.AddedItems[0] as Person;
}

ListBox - 清單方塊

<ListBox x:Name="lbUserList" 
         ItemsSource="{Binding Users}" 
         DisplayMemberPath="FullName" 
         SelectionChanged="lbUserList_SelectionChanged_1" />

完整範例原始碼

Win8DataBinding.zip - 包含所有示範專案

重點總結

1. DataContext 繼承性：子元素自動繼承父元素的 DataContext
2. Mode=TwoWay：表單輸入必須雙向繫結
3. INotifyPropertyChanged：動態資料即時更新的關鍵
4. ElementName 繫結：簡化 UI 互動邏輯
5. Converter：處理資料型別轉換與格式化

作者：cnblogs Kevin Fan