共用方式為


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

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

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

  • 建立專案。

  • 建立 Student 類別和 StudentList 集合。

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

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

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

注意事項注意事項

若要從資料連接繫結至資料,請使用 [資料來源] 視窗。 如需詳細資訊,請參閱將 WPF 控制項繫結至 Visual Studio 中的資料

注意事項注意事項

根據您目前使用的設定或版本,您所看到的對話方塊與功能表指令可能會與 [說明] 中描述的不同。 若要變更設定,請從 [工具] 功能表中選取 [匯入和匯出設定]。 如需詳細資訊,請參閱 使用設定

必要條件

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

  • Visual Studio 2010。

建立專案

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

若要建立專案

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

    MainWindow.xaml 隨即在 WPF 設計工具中開啟。

  2. 將名為 Student 的新類別加入至專案。 如需詳細資訊,請參閱 HOW TO:加入新專案項目

  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 設計工具中開啟 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 設計工具可讓您啟用資料繫結,而不需要撰寫任何程式碼或 XAML。

若要將 ListBox 繫結至資料來源

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

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

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

    功能表隨即出現。

    秘訣秘訣

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

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

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

    資料繫結產生器

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

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

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

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

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

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

    ListBox 資料繫結

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

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

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

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

  2. 捲動到 ItemTemplate 屬性。

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

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

    資源選擇器隨即出現。

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

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

    具有值轉換子的 ListBox 資料繫結

後續步驟

請參閱

參考

Binding

ListBox

ItemTemplate

IValueConverter

概念

資料繫結概觀

其他資源

使用 WPF 設計工具