共用方式為

逐步解說：使用 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 設計工具