逐步解說：使用 WPF 設計工具建立資料繫結

本逐步解說示範如何使用 WPF Designer for Visual Studio，建立將資料連接到控制項的資料繫結。 

在這個逐步解說中，您會執行下列工作：

• 建立專案。

• 建立 Student 類別和 StudentList 集合。

• 建立透過資料繫結顯示 StudentList 集合的 ListBox 控制項。

• 建立使用 IValueConverter 來自訂布林值屬性外觀的自訂 DataTemplate。

完成這些工作之後，您就會擁有繫結至學生名單的清單方塊。 每個清單方塊項目都會顯示一個彩色方塊，表示學生目前是否已註冊。

必要條件

您需要下列元件才能完成此逐步解說：

• Visual Studio 2010.

建立專案

第一個步驟是建立 WPF 應用程式專案並加入資料來源。 資料來源是 ObservableCollection<T>，內含簡單 Student 類別的執行個體。 此外，專案也有用來設定 ListBox 控制項樣式的 IValueConverter 和自訂 DataTemplate。

若要建立專案

1. 在 Visual Basic 或 Visual C# 中，建立名為 DataBindingDemo 的新 WPF 應用程式專案。 如需詳細資訊，請參閱 HOW TO：建立新的 WPF 應用程式專案。

   MainWindow.xaml 隨即在 WPF Designer中開啟。

2. 將名為 Student 的新類別加入至專案。 如需詳細資訊，請參閱 How to: Add New Project Items。

3. 以下列程式碼取代自動產生的程式碼。

   Imports System
   Imports System.Collections.ObjectModel
   Imports System.Windows
   
   ' Student is a simple class that stores a name and an 
   ' IsEnrolled value. 
   Public Class Student
   
       ' The default constructor is required for creation from XAML. 
       Public Sub New()
       End Sub
   
       ' The StudentName property is a string that holds the first and last name. 
       Public Property StudentName As String
   
       ' The IsEnrolled property gets or sets a value indicating whether 
       ' the student is currently enrolled. 
       Public Property IsEnrolled As Boolean
   
   End Class
   
   ' The StudentList collection is declared for convenience, 
   ' because declaring generic types in XAML is inconvenient. 
   Public Class StudentList
       Inherits ObservableCollection(Of Student)
   End Class
   

   using System;
   using System.Collections.ObjectModel;
   using System.Windows;
   
   namespace DataBindingDemo
   {
       // Student is a simple class that stores a name and an
       // IsEnrolled value.
       public class Student 
       {   
           // The default constructor is required for creation from XAML.
           public Student()
           {
           }
   
           // The StudentName property is a string that holds the first and last name.
           public string StudentName { get; set; }
   
           // The IsEnrolled property gets or sets a value indicating whether
           // the student is currently enrolled.
           public bool IsEnrolled { get; set; }
       }
   
       // The StudentList collection is declared for convenience,
       // because declaring generic types in XAML is inconvenient.
       public class StudentList : ObservableCollection<Student>
       {
   
       }
   }
   

4. 將名為 BoolToBrushConverter 的新類別加入至專案。

5. 以下列程式碼取代自動產生的程式碼。

   Imports System
   Imports System.Globalization
   Imports System.Windows.Data
   Imports System.Windows.Media
   
   ' The BoolToBrushConverter class is a value converter 
   ' that helps to bind a bool value to a brush property. 
   <ValueConversion(GetType(Boolean), GetType(Brush))> _
   Public Class BoolToBrushConverter
       Implements IValueConverter
   
       Public Function Convert( _
           ByVal value As Object, _
           ByVal targetType As Type, _
           ByVal parameter As Object, _
           ByVal culture As CultureInfo) As Object Implements IValueConverter.Convert
   
           Dim b As Brush = Nothing
   
           ' Only apply the conversion if value is assigned and 
           ' is of type bool. 
           If value IsNot Nothing AndAlso value.[GetType]() Is GetType(Boolean) Then
               ' true is painted with a green brush, 
               ' false with a red brush. 
               b = If(CBool(value), Brushes.Green, Brushes.Red)
           End If
   
           Return b
       End Function
   
       ' Not used. 
       Public Function ConvertBack( _
           ByVal value As Object, _
           ByVal targetType As Type, _
           ByVal parameter As Object, _
           ByVal culture As CultureInfo) As Object Implements IValueConverter.ConvertBack
           Return Nothing
       End Function
   
   End Class
   

   using System;
   using System.Collections.Generic;
   using System.Globalization;
   using System.Linq;
   using System.Text;
   using System.Windows.Data;
   using System.Windows.Media;
   
   namespace DataBindingDemo
   {
       // The BoolToBrushConverter class is a value converter
       // that helps to bind a bool value to a brush property.
       [ValueConversion(typeof(bool), typeof(Brush))]
       public class BoolToBrushConverter : IValueConverter
       {
           public object Convert(
               object value, 
               Type targetType, 
               object parameter, 
               CultureInfo culture)
           {
               Brush b = null;
   
               // Only apply the conversion if value is assigned and
               // is of type bool.
               if (value != null &&
                   value.GetType() == typeof(bool))
               {
                   // true is painted with a green brush, 
                   // false with a red brush.
                   b = (bool)value ? Brushes.Green : Brushes.Red;
               }
   
               return b;
           }
   
           // Not used.
           public object ConvertBack(
               object value, 
               Type targetType, 
               object parameter, 
               CultureInfo culture)
           {
               return null;
           }
       }
   }
   

6. 建置專案。

7. 在 WPF Designer中開啟 MainWindow.xaml。

8. 將自動產生的 XAML 替換成下列 XAML。

       <Window x:Class="DataBindingDemo.MainWindow"
           xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:local="clr-namespace:DataBindingDemo"
           Title="Databinding Demo" Height="300" Width="300">
       <Window.Resources>
   
           <local:StudentList x:Key="studentCollection" >
               <local:Student StudentName="Syed Abbas" IsEnrolled="false" />
               <local:Student StudentName="Lori Kane" IsEnrolled="true" />
               <local:Student StudentName="Steve Masters" IsEnrolled="false" />
               <local:Student StudentName="Tai Yee" IsEnrolled="true" />
               <local:Student StudentName="Brenda Diaz" IsEnrolled="true" />
           </local:StudentList>
   
           <local:BoolToBrushConverter x:Key="boolToBrushConverter" />
   
           <DataTemplate x:Key="listBoxTemplate">
               <StackPanel Orientation="Horizontal" >
                   <Rectangle Fill="{Binding Path=IsEnrolled, Converter={StaticResource boolToBrushConverter}}"
                              Height="10" 
                              Width="10" 
                              Margin="0,0,5,0" />
                   <TextBlock Text="{Binding Path=StudentName}" />
               </StackPanel>
           </DataTemplate>
   
       </Window.Resources>
       <Grid></Grid>
   
   </Window>
   

指派資料繫結

您使用 Binding，在 ListBox 控制項中顯示 studentCollection。 WPF Designer可讓您啟用資料繫結，而不需要撰寫任何程式碼或 XAML。

若要將 ListBox 繫結至資料來源

1. 從 [工具箱] 中，將 ListBox 控制項拖曳至 Window。

2. 在 [屬性] 視窗中，捲動到 ItemsSource 屬性。

3. 在左欄的邊緣，按一下 [屬性標記] ()。

   功能表隨即出現。

   提示

   您也可以用滑鼠右鍵按一下此資料列，以便顯示功能表。

4. 按一下 [套用資料繫結]。

   資料繫結產生器隨即顯示。

   

5. 在 [來源] 窗格的左方面板中，按一下 [StaticResource]。

6. 在中間面板中，按一下 [Window.Resources]。

7. 在右方面板中，按一下 [studentCollection]。

   ListBox 控制項中隨即填入項目。

8. 在 [屬性] 視窗中，捲動到 DisplayMemberPath 屬性，並將該屬性的值設定為 StudentName。

   ListBox 控制項隨即顯示 studentCollection 中每個 Student 執行個體的 StudentName 屬性。

   

使用值轉換子建立資料繫結

您建立 DataTemplate 來格式化 ListBox 控制項中的資料。 在這個專案中，DataTemplate 會使用值轉換子，將布林值屬性顯示成彩色方塊。

若要使用值轉換子建立資料繫結

1. 在 [屬性] 視窗中，清除 DisplayMemberPath 屬性。

2. 捲動到 ItemTemplate 屬性。

3. 按一下 [屬性標記] ()。

4. 按一下 [套用資源]。

   資源選擇器隨即出現。

5. 按一下 [本機] 區段中的 [listBoxTemplate]。

   ListBox 控制項會在每個學生姓名旁邊顯示一個紅色或綠色方塊，表示該名學生是否已註冊。

   

後續步驟

• 您可以使用資料繫結產生器來設定資料繫結的屬性。 如需詳細資訊，請參閱 HOW TO：使用 WPF 設計工具建立資料繫結屬性。

請參閱

參考

Binding

ListBox

ItemTemplate

IValueConverter

概念

資料繫結概觀

其他資源

使用 WPF 設計工具