Exemplarische Vorgehensweise: Binden von Silverlight-Steuerelementen an Objekte

  • Artikel

In dieser exemplarischen Vorgehensweise erstellen Sie eine Silverlight-Anwendung, die datengebundene Steuerelemente enthält. Die Steuerelemente sind an zwei verwandte benutzerdefinierte Geschäftsobjekte gebunden.

In dieser exemplarischen Vorgehensweise werden die folgenden Aufgaben veranschaulicht:

  • Erstellen einer Silverlight-Anwendung.

  • Erstellen zweier verwandter benutzerdefinierter Objekte zur Bindung an die Benutzeroberfläche.

  • Ausführen des Assistenten zum Konfigurieren von Datenquellen, um eine Verbindung mit dem benutzerdefinierten Objekt herzustellen, das das Datenquellenfenster ausfüllt.

  • Erstellen eines Satzes datengebundener Steuerelemente, indem Elemente aus dem Datenquellenfenster in Silverlight-Designer gezogen werden

    Hinweis

    Auf Ihrem Computer werden möglicherweise andere Namen oder Speicherorte für die Benutzeroberflächenelemente von Visual Studio angezeigt als die in den folgenden Anweisungen aufgeführten. Diese Elemente sind von der jeweiligen Visual Studio-Version und den verwendeten Einstellungen abhängig. Weitere Informationen finden Sie unter Customizing Development Settings in Visual Studio.

Vorbereitungsmaßnahmen

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

  • Visual Studio

Vorkenntnisse in folgenden Konzepten sind außerdem hilfreich, wenn auch für die Durchführung der exemplarischen Vorgehensweise nicht erforderlich:

  • Arbeiten mit Silverlight-Designer. Weitere Informationen finden Sie unter Silverlight.

  • Silverlight-Datenbindung. Weitere Informationen finden Sie unter Data Binding.

  • Arbeiten mit XAML. Weitere Informationen finden Sie unter XAML.

Erstellen der Silverlight-Anwendung.

Beginnen Sie mit dieser exemplarischen Vorgehensweise, indem Sie eine Silverlight-Anwendung erstellen.

So erstellen Sie das Silverlight-Projekt

  1. Erstellen Sie über das Menü Datei ein neues Projekt.

  2. Klicken Sie unter dem Knoten Visual C# oder Visual Basic auf Silverlight und anschließend auf Silverlight-Anwendung.

  3. Geben Sie im Feld Name die Bezeichnung SilverlightObjectBinding ein, und klicken Sie auf OK.

  4. Behalten Sie die Standardeinstellungen im Dialogfeld Neue Silverlight-Anwendung unverändert bei, und klicken Sie dann auf OK.

    Die Silverlight-Anwendung wird als Projektmappe mit zwei Projekten erstellt: ein SilverlightObjectBinding-Projekt und ein SilverlightObjectBinding.Web-Projekt, das verwendet wird, um das SilverlightObjectBinding-Projekt zu hosten.

Erstellen von benutzerdefinierten Objekten zur Bindung

Ein Datenmodell muss definiert werden, um Daten für eine Anwendung verfügbar zu machen. In dieser exemplarischen Vorgehensweise erstellen Sie benutzerdefinierte Objekte, die Kunden und Bestellungen im Datenmodell darstellen.

So erstellen Sie Kundenobjekte

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt SilverlightObjectBinding, zeigen Sie auf "Hinzufügen", und klicken Sie dann auf Neues Element.

  2. Klicken Sie im Dialogfeld Neues Element hinzufügen auf das Element Klasse.

  3. Ändern Sie den Namen in Kunde, und klicken Sie auf Hinzufügen.

  4. Ersetzen Sie in der Codedatei für Kunde die Customer-Klasse durch den folgenden Code:

    ''' <summary>
''' A single customer
''' </summary>
Public Class Customer

    Public Sub New()
    End Sub

    ''' <summary>
    ''' Creates a new customer
    ''' </summary>
    ''' <param name="customerId">The ID that uniquely identifies this customer</param>
    ''' <param name="companyName">The name for this customer</param>
    ''' <param name="city">The city for this customer</param>
    Public Sub New(ByVal customerId As String,
                   ByVal companyName As String,
                   ByVal city As String)
        customerIDValue = customerId
        companyNameValue = companyName
        cityValue = city
    End Sub

    Private customerIDValue As String
    ''' <summary>
    ''' The ID that uniquely identifies this customer
    ''' </summary>
    Public Property CustomerID() As String
        Get
            Return customerIDValue
        End Get
        Set(ByVal value As String)
            customerIDValue = value
        End Set
    End Property

    Private companyNameValue As String
    ''' <summary>
    ''' The name for this customer
    ''' </summary>
    Public Property CompanyName() As String
        Get
            Return companyNameValue
        End Get
        Set(ByVal Value As String)
            companyNameValue = Value
        End Set
    End Property

    Private cityValue As String
    ''' <summary>
    ''' The city for this customer
    ''' </summary>
    Public Property City() As String
        Get
            Return cityValue
        End Get
        Set(ByVal Value As String)
            cityValue = Value
        End Set
    End Property

    Private ordersValue As Orders
    ''' <summary>
    ''' The orders for this customer
    ''' </summary>
    Public Property Orders As Orders
        Get
            Return ordersValue
        End Get
        Set(ByVal value As Orders)
            ordersValue = value
        End Set
    End Property


    Public Overrides Function ToString() As String
        Return Me.CompanyName & " (" & Me.CustomerID & ")"
    End Function
End Class


''' <summary>
''' A collection of Customer objects.
''' </summary>
''' <remarks></remarks>
Public Class Customers
    Inherits System.Collections.Generic.List(Of Customer)

End Class

    /// <summary>
/// A single customer
/// </summary>
public class Customer
{
    /// <summary>
    /// Creates a new customer
    /// </summary>
    public Customer()
    {
    }

    /// <summary>
    /// Creates a new customer
    /// </summary>
    /// <param name="customerID"></param>
    /// <param name="companyName"></param>
    /// <param name="city"></param>
    public Customer(string customerID, string companyName,
       string city)
    {
        customerIDValue = customerID;
        companyNameValue = companyName;
        cityValue = city;
    }

    private string customerIDValue;
    /// <summary>
    /// The ID that uniquely identifies this customer
    /// </summary>
    public string CustomerID
    {
        get { return customerIDValue; }
        set { customerIDValue = value; }
    }

    private string companyNameValue;
    /// <summary>
    /// The name for this customer
    /// </summary>
    public string CompanyName
    {
        get { return companyNameValue; }
        set { companyNameValue = value; }
    }

    private string cityValue;
    /// <summary>
    /// The city for this customer
    /// </summary>
    public string City
    {
        get { return cityValue; }
        set { cityValue = value; }
    }

    private Orders ordersValue;
    /// <summary>
    /// The orders for this customer
    /// </summary>
    public Orders Orders
    {
        get { return ordersValue; }
        set { ordersValue = value; }
    }

    public override string ToString()
    {
        return this.CompanyName + " (" + this.CustomerID + ")";
    }
}

/// <summary>
/// A collection of Customer objects
/// </summary>
public class Customers : System.Collections.Generic.List<Customer>
{

}

So erstellen Sie Bestellungsobjekte

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt SilverlightObjectBinding, zeigen Sie auf Hinzufügen, und klicken Sie dann auf Neues Element.

  2. Klicken Sie im Dialogfeld Neues Element hinzufügen auf das Element Klasse.

  3. Ändern Sie den Namen in Bestellung, und klicken Sie auf Hinzufügen.

  4. Ersetzen Sie in der Codedatei für Bestellung die Order-Klasse durch den folgenden Code:

    ''' <summary>
''' A single order
''' </summary>
Public Class Order

    Public Sub New()
    End Sub

    ''' <summary>
    ''' Creates a new order
    ''' </summary>
    ''' <param name="orderid">The identifier for this order</param>
    ''' <param name="customerID">The customer who placed this order</param>
    Public Sub New(ByVal orderid As Integer,
                   ByVal customerID As String)
        orderIDValue = orderid
        customerIDValue = customerID
    End Sub

    Private orderIDValue As Integer
    ''' <summary>
    ''' Identifier for this order
    ''' </summary>
    Public Property OrderID() As Integer
        Get
            Return orderIDValue
        End Get
        Set(ByVal value As Integer)
            orderIDValue = value
        End Set
    End Property

    Private customerIDValue As String
    ''' <summary>
    ''' The customer who placed this order
    ''' </summary>
    Public Property CustomerID() As String
        Get
            Return customerIDValue
        End Get
        Set(ByVal Value As String)
            customerIDValue = Value
        End Set
    End Property
End Class

''' <summary>
''' A collection of Orders
''' </summary>
Public Class Orders
    Inherits System.Collections.Generic.List(Of Order)

End Class

    /// <summary>
/// A single order
/// </summary>
public class Order
{
    /// <summary>
    /// Creates a new order
    /// </summary>
    /// <param name="orderid"></param>
    /// <param name="customerID"></param>
    public Order(int orderid, string customerID)
    {
        orderIDValue = orderid;
        customerIDValue = customerID;
    }

    private int orderIDValue;
    /// <summary>
    /// The ID that uniquely identifies this order
    /// </summary>
    public int OrderID
    {
        get { return orderIDValue; }
        set { orderIDValue = value; }
    }

    private string customerIDValue;
    /// <summary>
    /// The customer who placed this order
    /// </summary>
    public string CustomerID
    {
        get { return customerIDValue; }
        set { customerIDValue = value; }
    }
}

/// <summary>
/// A collection of Order objects
/// </summary>
public class Orders : System.Collections.Generic.List<Order>
{

}

  5. Erstellen Sie das Projekt.

Erstellen der Objektdatenquelle

Erstellen Sie eine Objektdatenquelle, und füllen Sie das Datenquellenfenster aus, indem Sie den Assistenten zum Konfigurieren von Datenquellen ausführen.

So erstellen Sie die Objektdatenquelle

  1. Klicken Sie im Menü Daten auf Datenquellen anzeigen.

  2. Klicken Sie im Datenquellenfenster auf Neue Datenquelle hinzufügen.

    Der Assistent zum Konfigurieren von Datenquellen wird angezeigt.

  3. Klicken Sie auf der Seite Datenquellentyp auswählen auf Objekt und anschließend auf Weiter.

  4. Erweitern Sie auf der Seite Datenobjekte auswählen die Strukturansicht zweimal, und aktivieren Sie dann das Kontrollkästchen neben Kunden.

    Hinweis

    Stellen Sie sicher, dass Kunden und nicht das Kunde-Element ausgewählt wird.Wenn Kunden nicht verfügbar ist, beenden Sie den Assistent, und erstellen Sie die Projektmappe neu.

  5. Klicken Sie auf Fertig stellen.

    Das Datenquellenfenster wird mit der Objektdatenquelle ausgefüllt.

Erstellen der datengebundenen Steuerelemente

Erstellen Sie Steuerelemente, die Daten in den Objekten anzeigen, indem Sie die Knoten Kunden und Bestellungen aus dem Fenster Datenquellen in den Designer ziehen.

So erstellen Sie die datengebundenen Steuerelemente

  1. Öffnen Sie "MainPage.xaml" in der Designansicht.

  2. Ziehen Sie aus dem Fenster Datenquelle den Knoten Kunden in den Designer.

  3. Ziehen Sie aus dem Fenster Datenquellen den Knoten Bestellungen in den Designer und unter das Kundenraster.

Auffüllen der Objekte mit Daten und Binden der Objekte an das generierte CollectionViewSource-Element

Da diese exemplarische Vorgehensweise benutzerdefinierte Objekte als Datenmodell verwendet, werden Beispieldaten erstellt und beim Öffnen der Silverlight-Seite geladen.

Nachdem Sie eine Objektdatenquelle aus dem Fenster Datenquellen gezogen haben, wird ein Codekommentar generiert, um die Konfiguration der Datenquelle für das Zeigen auf das benutzerdefinierte Objekt zu erleichtern. Heben Sie die Kommentierung des generierten Codekommentars auf, und legen Sie System.Windows.Data.CollectionViewSource.Source (myCollectionViewSource) auf das Zeigen auf die Auflistung von Datenobjekten fest. Die folgende Prozedur zeigt, wie der generierte Code geändert werden muss, damit er an die generierten Steuerelemente gebunden wird.

Jedes Mal, wenn Elemente aus dem Datenquellenfenster in den Designer gezogen werden, wird auf der Silverlight-Seite ein System.Windows.Data.CollectionViewSource-Element generiert. Sein Name basiert auf der Datenquelle, die Sie verwenden. Ersetzen Sie je nach Sprache den Kommentar "Resource Key for CollectionViewSource'" entweder durch "CustomersViewSource" oder "customerViewSource".

So füllen Sie die Objekte auf und binden die Steuerelemente an die Objekte

  1. Erweitern Sie im Projektmappen-Explorer den Knoten MainPage.xaml, und doppelklicken Sie dann auf die Codedatei MainPage.xaml.

  2. Fügen Sie in der Codedatei (MainPage.xaml.vb oder MainPage.xaml.cs) der MainPage-Klasse die folgende Methode hinzu:

    ' Create sample data.
Private Function GetCustomers() As Customers

    Dim customers As New Customers

    ' Create 3 sample customers,
    ' each with 3 sample orders.
    Dim cust1 As New Customer("1", "A Bike Store", "Seattle")
    Dim cust1Orders As New Orders
    cust1Orders.Add(New Order(1, cust1.CustomerID))
    cust1Orders.Add(New Order(2, cust1.CustomerID))
    cust1Orders.Add(New Order(3, cust1.CustomerID))
    cust1.Orders = cust1Orders

    Dim cust2 As New Customer("2", "Progressive Sports", "Renton")
    Dim cust2Orders As New Orders
    cust2Orders.Add(New Order(4, cust2.CustomerID))
    cust2Orders.Add(New Order(5, cust2.CustomerID))
    cust2Orders.Add(New Order(6, cust2.CustomerID))
    cust2.Orders = cust2Orders

    Dim cust3 As New Customer("3", "Advanced Bike Components", "Irving")
    Dim cust3Orders As New Orders
    cust3Orders.Add(New Order(7, cust3.CustomerID))
    cust3Orders.Add(New Order(8, cust3.CustomerID))
    cust3Orders.Add(New Order(9, cust3.CustomerID))
    cust3.Orders = cust3Orders

    ' Add the sample customer objects to the 
    ' Customers collection.
    customers.Add(cust1)
    customers.Add(cust2)
    customers.Add(cust3)

    Return customers
End Function

    // Create sample data.
private Customers GetCustomers()
{
    Customers customers = new Customers();

    // Create 3 sample customers,
    // each with 3 sample orders.
    Customer cust1 = new Customer("1", "A Bike Store", "Seattle");
    Orders cust1Orders = new Orders();
    cust1Orders.Add(new Order(1, cust1.CustomerID));
    cust1Orders.Add(new Order(2, cust1.CustomerID));
    cust1Orders.Add(new Order(3, cust1.CustomerID));
    cust1.Orders = cust1Orders;

    Customer cust2 = new Customer("2", "Progressive Sports", "Renton");
    Orders cust2Orders = new Orders();
    cust2Orders.Add(new Order(4, cust2.CustomerID));
    cust2Orders.Add(new Order(5, cust2.CustomerID));
    cust2Orders.Add(new Order(6, cust2.CustomerID));
    cust2.Orders = cust2Orders;

    Customer cust3 = new Customer("3", "Advanced Bike Components", "Irving");
    Orders cust3Orders = new Orders();
    cust3Orders.Add(new Order(7, cust3.CustomerID));
    cust3Orders.Add(new Order(8, cust3.CustomerID));
    cust3Orders.Add(new Order(9, cust3.CustomerID));
    cust3.Orders = cust3Orders;

    // Add the sample customer objects to the 
    // Customers collection.
    customers.Add(cust1);
    customers.Add(cust2);
    customers.Add(cust3);

    return customers;
}

  3. Ersetzen Sie den kommentierten Code im UserControl_Loaded-Ereignishandler durch folgenden Code:

    Private Sub UserControl_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded

    'Do not load your data at design time.
    If Not (System.ComponentModel.DesignerProperties.GetIsInDesignMode(Me)) Then
        'Load your data here and assign the result to the CollectionViewSource.
        Dim myCollectionViewSource As System.Windows.Data.CollectionViewSource = CType(Me.Resources("CustomersViewSource"), System.Windows.Data.CollectionViewSource)
        myCollectionViewSource.Source = GetCustomers()
    End If
End Sub

    private void UserControl_Loaded(object sender, RoutedEventArgs e)
{

    // Do not load your data at design time.
    if (!System.ComponentModel.DesignerProperties.GetIsInDesignMode(this))
    {
        //Load your data here and assign the result to the CollectionViewSource.
        System.Windows.Data.CollectionViewSource myCollectionViewSource = (System.Windows.Data.CollectionViewSource)this.Resources["customersViewSource"];
        myCollectionViewSource.Source = GetCustomers();
    }
}

Testen der Anwendung

Erstellen Sie die Anwendung, und führen Sie sie aus, um zu überprüfen, ob Sie Verkaufsdatensätze anzeigen können.

So testen Sie die Anwendung

  1. Klicken Sie im Menü Erstellen auf Projektmappe erstellen. Überprüfen Sie, ob sich die Projektmappe fehlerfrei erstellen lässt.

  2. Führen Sie die Anwendung aus.

  3. Prüfen Sie, ob drei Kunden im Datenraster angezeigt und die Bestellungen des ausgewählten Kunden im Bestellungsraster angezeigt werden.

  4. Wählen Sie einen anderen Kunden aus, und prüfen Sie, ob die Bestellungen des ausgewählten Kunden angezeigt werden.

  5. Schließen Sie die Anwendung.

Nächste Schritte

Nach Abschluss der exemplarischen Vorgehensweise sind Sie in der Lage, die folgenden zugehörigen Aufgaben auszuführen:

  • Erfahren Sie, wie Änderungen im Datenspeicher gespeichert werden. Weitere Informationen finden Sie unter Data Binding.

Siehe auch

Weitere Ressourcen

Zugreifen auf Daten in Visual Studio

Datenzugriff und Datenstrukturen