WPF 中，最好用的莫過於強大的繫結(Binding)能力了。也因此，以往常用的 WinForm 寫作方式也必須作個改變。這裡以 UserControl 的 Binding 為例。
Windows Form 中 UserControl
第一個例子是舊習慣的 UserControl 寫作方式。
首先有個 MyUserControl，功能為：使用 Count propery，顯示出多個人名的下拉選單，讓使用者選擇。並以 SelectedName 作為選擇項目的輸出。
public partial class MyUserControl : UserControl
{
public MyUserControl() { InitializeComponent(); }
public int Count { get; set; }
public string SelectedName
{
get { return cbNames.SelectedValue as string; }
}
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
var q = from i in Enumerable.Range(1, Count)
select string.Format("Name{0}", i);
cbNames.ItemsSource = q;
}
}
使用此 UserControl 時，只需要在 xaml 中加上 Count 的屬性，就可以顯示多個人名。
MainWindow.xaml
<Window x:Class="NormalUserControl.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" xmlns:my="clr-namespace:NormalUserControl">
<Grid>
<my:MyUserControl HorizontalAlignment="Left" Margin="13,11,0,0" x:Name="myUserControl1" VerticalAlignment="Top" Count="3" />
<Button Content="Ok" Height="23" HorizontalAlignment="Left" Margin="25,87,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
</Grid>
</Window>
最後，在 Button Click event handler 中，如下的使用方式，可以知道使用者選擇了何人。
private void button1_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show(myUserControl1.SelectedName);
}
一切似乎運作的很好。這也是 Windows Form 的寫作方式。
有個問題來了，如果這個 UserControl 的 Count 值，是繫結自另一個控制項呢？
如下：
<Window x:Class="NormalUserControl.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" xmlns:my="clr-namespace:NormalUserControl">
<Grid>
<my:MyUserControl HorizontalAlignment="Left" Margin="13,11,0,0" x:Name="myUserControl1" VerticalAlignment="Top" Count="{Binding}" />
<Button Content="Ok" Height="23" HorizontalAlignment="Left" Margin="23,108,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
<TextBox x:Name="txtCount" Margin="160,12,247,265" Text="3" />
</Grid>
</Window>
我們想到將 Count 的值繫結自一個 txtCount 的 TextBox，然而 Visual Studio IDE 卻告訴我，A 'Binding' cannot be set on the 'Count' property of type 'MyUserControl'. A 'Binding' can only be set on a DependencyProperty of a DependencyObject.
WPF : Binding 到 Control
在 WPF 中，DependencyObject 的屬性如果要被繫結的話，該屬性必須是 DependencyProperty.
修改的方式也不難。首先在MyUserControl.xaml.cs 中使用 dependencyProperty 的 snippet，作一個 Count 的 dependencyProperty, 取代原先的 Count property
public static readonly DependencyProperty CountProperty =
DependencyProperty.Register("Count", typeof(int), typeof(MyUserControl), new PropertyMetadata(default(int))
);
public int Count
{
get { return (int)GetValue(CountProperty); }
set { SetValue(CountProperty, value); }
}
再執行一次，程式可以正常編譯了。
PropertyChangedCallback
執行程式，修改 TextBox為另一個數字後發現，Binding 只有第一次執行時才會繫結，其他時間都不會。為什麼？
原因是目前的實作，並沒有告訴它「當資料變化時該怎麼執行」。
以下是修改後的結果。
public static readonly DependencyProperty CountProperty =
DependencyProperty.Register("Count", typeof(int), typeof(MyUserControl),
new UIPropertyMetadata(default(int), OnCountChanged));
private static void OnCountChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
{
var count = (int)e.NewValue;
var q = from i in Enumerable.Range(1, count)
select string.Format("Name{0}", i);
var userControl = o as MyUserControl;
var comboBox = userControl.FindName("cbNames") as ComboBox;
comboBox.ItemsSource = q;
}
以上的重點在於，註冊 DependencyProperty 時，告訴 WPF，當 Count 的值有變化時，請執行 OnCountChanged.
UserControl 輸出的 Binding
上面談完了將值 Binding 到 UserControl，UserControl 可以讀值，並顯示 UI。那輸出的值是否也可以 Binding 呢？如下面的程式，我們發現 UserControl 的SelectedName 雖然可以讀出，但也不能做 DataBinding。
<Window x:Class="NormalUserControl.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" xmlns:my="clr-namespace:NormalUserControl">
<Grid>
<my:MyUserControl HorizontalAlignment="Left" Margin="13,11,0,0" x:Name="myUserControl1" VerticalAlignment="Top" Count="{Binding ElementName=txtCount, Path=Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<Button Content="Ok" Height="23" HorizontalAlignment="Left" Margin="23,108,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
<TextBox x:Name="txtCount" Margin="160,12,247,265" Text="4" />
<Label Content="{Binding SelectedName, ElementName=myUserControl1}" Height="28" HorizontalAlignment="Right" Margin="0,101,247,0" Name="label1" VerticalAlignment="Top" />
<Label Content="Your Select" Height="28" HorizontalAlignment="Left" Margin="150,101,0,0" Name="label2" VerticalAlignment="Top" />
</Grid>
</Window>
此時，要解這個問題，SelectedName仍然需要 dependencyproperty。
public string SelectedName
{
get { return (string)GetValue(SelectedNameProperty); }
set { SetValue(SelectedNameProperty, value); }
}
public static readonly DependencyProperty SelectedNameProperty =
DependencyProperty.Register("SelectedName", typeof(string), typeof(MyUserControl),
new UIPropertyMetadata(null));
光這樣是不夠的。ComboBox 的 SelectedItem 並不會自動更新這我們剛剛加上的 SelectedName。
此時在建構子上加如下的繫結(只不過是用程式加的)
var binding = new Binding("SelectedName") { Source = this };
cbNames.SetBinding(ComboBox.SelectedItemProperty, binding);
結論
當 UserControl 遇到 Binding 時，會發生許多原先在 Windows Form 上遇不到的事。正因為 WPF 的繫結非常強大，要駕馭它也要相當的功夫。
