WPF 中如何 Binding 到 UserControl

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 的繫結非常強大，要駕馭它也要相當的功夫。