Exemplarische Vorgehensweise: Binden von Daten im Designer mit einer DesignInstance

In dieser exemplarischen Vorgehensweise wird erläutert, wie der WPF Designer für Visual Studio verwendet wird, um zur Entwurfszeit Datenbindungen für einen Datenkontext zu erstellen, der zur Laufzeit zugewiesen wird. Zum Erstellen der Datenbindung verwenden Sie den Datenbindungs-Generator, um einen besonderen Entwurfszeitdatenkontext zu erstellen und die DesignInstance auf einen Geschäftsobjekttyp festzulegen. DesignInstance ist eine Entwurfszeiteigenschaft.

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

• Erstellen Sie das Projekt.

• Erstellen Sie ein Geschäftsobjekt der Customer-Klasse.

• Erstellen Sie eine Datenbindung eines TextBox-Steuerelements in einem Datenkontext mit einer Entwurfszeitinstanz der Customer-Klasse.

Wenn Sie dies abgeschlossen haben, verfügen Sie über ein Textfeld, das zur Laufzeit an ein Geschäftsobjekt gebunden ist. Die Datenbindung wird im WPF-Designer festgelegt.

Vorbereitungsmaßnahmen

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

• Visual Studio 2010.

Erstellen des Projekts

Der erste Schritt ist, ein WPF-Anwendungsprojekt zu erstellen und die Entwurfszeiteigenschaften zu aktivieren.

So erstellen Sie das Projekt

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

2. Klicken Sie in der Entwurfsansicht auf das Stammgrößentag () rechts unten in MainWindow, um die Stammgröße auf eine automatische Größe festzulegen.

   In der XAML-Ansicht fügt der Designer die d-Namespacezuordnung hinzu, die den Zugriff auf Entwurfszeiteigenschaften wie DesignHeight und DesignInstance ermöglicht.

Erstellen des Geschäftsobjekts

Erstellen Sie danach das Geschäftsobjekt. Das Geschäftsobjekt ist eine einfache Customer-Klasse, die FirstName- und LastName-Eigenschaften aufweist.

So erstellen Sie das Geschäftsobjekt

1. Fügen Sie dem Projekt eine neue Klasse namens Customer hinzu. Weitere Informationen finden Sie unter Gewusst wie: Hinzufügen neuer Projektelemente.

2. Ersetzen Sie den automatisch generierten Code durch den folgenden Code.

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Text;
   
   namespace DataBindingDemo
   {
       public class Customer
       {   
           public string FirstName { get; set; }
           public string LastName { get; set; }
       }
   }
   

Festlegen des Entwurfszeitdatenkontexts

Zum Erstellen der Datenbindungen mit dem Datenbindungs-Generator erstellen Sie einen besonderen Entwurfszeitdatenkontext und legen die DesignInstance auf den Geschäftsobjekttyp fest.

So legen Sie den Entwurfszeitdatenkontext fest

1. Öffnen Sie im WPF-Designer die Datei MainWindow.xaml.

2. Fügen Sie in der XAML-Ansicht die folgende Namespacezuordnung dem Starttag von MainWindow hinzu. Weitere Informationen finden Sie unter Gewusst wie: Importieren eines Namespace in XAML.

   xmlns:local="clr-namespace:DataBindingDemo"
   

3. Ersetzen Sie das Starttag des Grid-Elements durch folgenden XAML-Code.

   <Grid d:DataContext="{d:DesignInstance Type=local:Customer}" Name="_grid">
   

   Dieser XAML-Code legt einen Entwurfszeitdatenkontext für die Customer-Klasse fest und macht diese Klasse zum Erstellen von Datenbindungen verfügbar.

4. Erstellen Sie die Projektmappe.

Erstellen der Datenbindung

Jetzt können Sie mit dem Datenbindungs-Generator Datenbindungen mit dem Customer-Geschäftsobjekt erstellen. Das folgende Verfahren veranschaulicht, wie ein TextBox-Steuerelement an die FirstName-Eigenschaft eines Customer-Objekts gebunden wird.

So erstellen Sie die Datenbindung

1. Ziehen Sie aus der Toolbox ein TextBox-Steuerelement auf das Window.

2. Führen Sie im Eigenschaftenfenster einen Bildlauf zur Text-Eigenschaft aus.

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

4. Klicken Sie auf Datenbindung übernehmen.

   Der Datenbindungs-Generator wird mit dem geöffneten Bereich Pfad angezeigt.

   

5. Klicken Sie auf FirstName, und drücken Sie EINGABETASTE.

   In der XAML-Ansicht verfügt die Text-Eigenschaft über eine Datenbindung mit der FirstName-Eigenschaft des Customer-Typs.

Festlegen des Laufzeitdatenkontexts

Weisen Sie schließlich den Laufzeitdatenkontext zu. Die Datenbindung, die Sie zur Entwurfszeit erstellt haben, funktioniert zur Laufzeit ohne Änderungen in XAML oder Code.

So legen Sie den Laufzeitdatenkontext fest

1. Öffnen Sie MainWindow.xaml.cs oder MainWindow.xaml.vb im Code-Editor.

2. Ersetzen Sie den automatisch generierten MainWindow-Konstruktor durch den folgenden Code.

   public MainWindow()
   {
       InitializeComponent();
   
       Customer c = new Customer();
       c.FirstName = "Brenda";
       c.LastName = "Diaz";
   
       this._grid.DataContext = c;
   }
   

3. Drücken Sie F5, um die Anwendung auszuführen.

   Das Textfeld zeigt den Vornamen des Customer-Objekts an, das zur Laufzeit erstellt wurde.

   

Nächste Schritte

• Sie können eine Bindung mit Beispielentwurfszeitdaten herstellen. Dies hilft Ihnen, zur Laufzeit das richtige Layoutverhalten zu erstellen, wenn die tatsächlichen Daten verfügbar sind. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Verwenden von Beispieldaten im WPF-Designer.

Siehe auch

Referenz

DataContext

Weitere Ressourcen

Entwurfszeitattribute

Datenbindung im WPF-Designer