Exemplarische Vorgehensweise: Erstellen einer Datenbindung mit dem WPF-Designer

Artikel
08/10/2011

In dieser exemplarischen Vorgehensweise wird erläutert, wie der WPF Designer für Visual Studio verwendet wird, um Datenbindungen zu erstellen, die Daten mit einem Steuerelement verbinden.

Im Verlauf dieser exemplarischen Vorgehensweise führen Sie folgende Aufgaben aus:

Erstellen Sie das Projekt.
Erstellen Sie eine Student-Klasse und eine StudentList-Auflistung.
Erstellen Sie ein ListBox-Steuerelement, das die StudentList-Auflistung durch eine Datenbindung anzeigt.
Erstellen Sie eine benutzerdefinierte DataTemplate, die einen IValueConverter verwendet, um die Darstellung einer booleschen Eigenschaft anzupassen.

Wenn Sie dies abgeschlossen haben, haben Sie ein Listenfeld, das an eine Liste von Studierenden gebunden ist. Für jedes Listenfeldelement wird ein farbiges Quadrat angezeigt, das angibt, ob der Studierende gerade eingeschrieben ist.

Tipp

Um eine Bindung mit Daten aus einer Datenverbindung zu erstellen, verwenden Sie das Datenquellenfenster. Weitere Informationen finden Sie unter Binden von WPF-Steuerelementen an Daten in Visual Studio.

Tipp

Je nach den aktiven Einstellungen oder der Version unterscheiden sich die Dialogfelder und Menübefehle auf Ihrem Bildschirm möglicherweise von den in der Hilfe beschriebenen. Klicken Sie im Menü Extras auf Einstellungen importieren und exportieren, um die Einstellungen zu ändern. Weitere Informationen finden Sie unter Arbeiten mit Einstellungen.

Vorbereitungsmaßnahmen

Zum Durchführen dieser exemplarischen Vorgehensweise benötigen Sie die folgenden Komponenten:

Visual Studio 2010.

Erstellen des Projekts

Der erste Schritt ist, das WPF-Anwendungsprojekt zu erstellen und die Datenquelle hinzuzufügen. Die Datenquelle ist eine ObservableCollection<T>, die Instanzen einer einfachen Student-Klasse enthält. Das Projekt weist auch einen IValueConverter und eine benutzerdefinierte DataTemplate auf, um das ListBox-Steuerelement zu formatieren.

So erstellen Sie das Projekt

Erstellen Sie in Visual Basic oder Visual C# ein neues WPF-Anwendungsprojekt mit dem Namen DataBindingDemo. Weitere Informationen finden Sie unter Gewusst wie: Erstellen eines neuen WPF-Anwendungsprojekts.

Die Datei MainWindow.xaml wird im WPF-Designer geöffnet.
Fügen Sie dem Projekt ein neue Klasse namens Student hinzu. Weitere Informationen finden Sie unter Gewusst wie: Hinzufügen neuer Projektelemente.

Ersetzen Sie den automatisch generierten Code durch den folgenden Code.

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>
    {

    }
}

Fügen Sie dem Projekt ein neue Klasse namens BoolToBrushConverter hinzu.

Ersetzen Sie den automatisch generierten Code durch den folgenden Code.

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;
        }
    }
}

Erstellen Sie das Projekt.
Öffnen Sie im WPF-Designer die Datei MainWindow.xaml.

Ersetzen Sie den automatisch generierten XAML-Code durch den folgenden XAML-Code.

    <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>

Zuweisen einer Datenbindung

Sie verwenden eine Binding, um studentCollection im ListBox-Steuerelement anzuzeigen. Der WPF-Designer aktiviert die Datenbindung, ohne Code oder XAML zu schreiben.

So binden Sie das ListBox an die Datenquelle

Ziehen Sie aus der Toolbox ein ListBox-Steuerelement auf das Window.
Führen Sie im Eigenschaftenfenster einen Bildlauf zur ItemsSource-Eigenschaft aus.
Klicken Sie am Rand der linken Spalte auf den Eigenschaftenmarker ().

Ein Menü wird angezeigt.

Tipp

Sie können auch mit der rechten Maustaste auf die Zeile klicken, um das Menü anzuzeigen.
Klicken Sie auf Datenbindung übernehmen.

Der Datenbindungs-Generator wird angezeigt.
Klicken Sie im Bereich Quelle im linken Bereich auf StaticResource.
Klicken Sie im mittleren Bereich auf Window.Resources.
Klicken Sie im rechten Bereich auf studentCollection.

Das ListBox-Steuerelement wird mit Elementen aufgefüllt.
Führen Sie im Eigenschaftenfenster einen Bildlauf zur DisplayMemberPath-Eigenschaft durch, und legen Sie deren Wert auf StudentName fest.

Das ListBox-Steuerelement zeigt die StudentName-Eigenschaft für jede Student-Instanz in studentCollection an.

Erstellen einer Datenbindung mit einem Wertkonverter

Sie erstellen eine DataTemplate, um die Daten im ListBox-Steuerelement zu formatieren. In diesem Projekt zeigt die DataTemplate mithilfe eines Wertkonverters eine boolesche Eigenschaft als farbiges Quadrat an.

So erstellen Sie eine Datenbindung mit einem Wertkonverter

Löschen Sie im Eigenschaftenfenster die DisplayMemberPath-Eigenschaft.
Führen Sie einen Bildlauf zur ItemTemplate-Eigenschaft durch.
Klicken Sie auf den Eigenschaftenmarker ( ).
Klicken Sie auf Ressource übernehmen.

Die Ressourcenauswahl wird angezeigt.
Klicken Sie im Abschnitt Lokal auf listBoxTemplate.

Das ListBox-Steuerelement zeigt neben jedem Namen eines Studierenden ein rotes oder grünes Quadrat an, das angibt, ob der Studierende eingeschrieben ist.

Nächste Schritte

Eigenschaften können Sie mit dem Datenbindungs-Generator auf Datenbindungen festlegen. Weitere Informationen finden Sie unter Gewusst wie: Festlegen von Datenbindungseigenschaften mit dem WPF-Designer.

Siehe auch