Exemplarische Vorgehensweise: Verwenden von Beispieldaten im WPF-Designer

In dieser exemplarischen Vorgehensweise wird erläutert, wie Beispieldaten im WPF Designer für Visual Studio verwendet werden, um zur Entwurfszeit Datenbindungen zu erstellen. Mit zur Entwurfszeit angezeigten Beispieldaten können Sie sicherstellen, dass sich das Layout zur Laufzeit ordnungsgemäß verhält. Damit Steuerelemente auf die Beispieldaten im Designer zugreifen können, wenden Sie den Buildvorgang DesignData auf die Beispieldatendatei an und verweisen auf die Datei im DesignData-Entwurfszeitattribut.

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 XAML-Dateien, die die Beispieldaten enthalten.

• Binden Sie TextBox und DataGrid sowie Steuerelemente an die Beispieldaten.

Wenn Sie dies abgeschlossen haben, verfügen Sie über die Steuerelemente TextBox und DataGrid, die zur Entwurfszeit an Beispieldaten gebunden werden. 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 C# ein neues WPF-Anwendungsprojekt mit dem Namen DesignDataDemo. 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 DesignInstance und DataContext ermöglicht.

Erstellen des Geschäftsobjekts

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

So erstellen Sie das Geschäftsobjekt

1. Fügen Sie dem Projekt eine neue Klasse namens Customer hinzu.

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

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Text;
   
   namespace DesignDataDemo
   {
       // The Customer class defines a simple Customer business object.
       class Customer
       {
           // Default constructor is required for usage as sample data 
           // in the WPF and Silverlight Designer.
           public Customer() {}
   
           public string FirstName { get; set; }
           public string LastName { get; set; }
           public Guid CustomerID { get; set; }
           public int Age { get; set; }
       }
   
       // The CustomerCollection class defines a simple collection
       // for Customer business objects.
       class CustomerCollection : List<Customer>
       {
           // Default constructor is required for usage in the WPF Designer.
           public CustomerCollection() {}
       }
   }
   

Erstellen der Entwurfszeitdatendateien

Definieren Sie Beispielentwurfszeitdaten, indem Sie Instanzen der Geschäftsobjekte in einer XAML-Datei erstellen. Sie geben an, dass die XAML-Datei Beispieldaten aufweist, indem Sie den Buildvorgang auf DesignData festlegen.

Der Designer ersetzt die in der XAML-Datei deklarierten Instanzen durch automatisch generierte Entwurfszeittypen, die über die gleichen Eigenschaften wie die Beispieltypen verfügen. Dies schließt Laufzeitverhalten aus, die den Designer beeinträchtigen könnten, z. B. Datenbankabfragen. Diese Eigenschaften sind schreibgeschützt, und Sie legen sie in der Beispieldatendatei fest.

Verwenden Sie den Buildvorgang DesignDataWithDesignTimeCreatableTypes, um dieses Verhalten zu überschreiben, und geben Sie an, dass vom Designer Instanzen der Beispieldatentypen erstellt werden.

So erstellen Sie Entwurfszeitdatendateien

1. Fügen Sie im Projektmappen-Explorer dem Projekt einen neuen Ordner namens DesignData hinzu.

2. Fügen Sie im Ordner DesignData die neue Textdatei SampleCustomer.xaml hinzu.

   SampleCustomer.xaml wird in der XAML-Ansicht geöffnet.

   Tipp

   Sie können auch ein Ressourcenwörterbuch verwenden.

3. Fügen Sie folgenden XAML-Code hinzu.

   <local:Customer 
       xmlns:local="clr-namespace:DesignDataDemo" 
       FirstName="Syed" LastName="Abbas" Age="23" CustomerID="E7181DC6-3F9E-45A4-A5F7-AC0B119D1FD8" />
   

4. Fügen Sie im Ordner DesignData die neue Textdatei SampleCustomers.xaml hinzu.

   SampleCustomers.xaml wird in der XAML-Ansicht geöffnet.

5. Fügen Sie folgenden XAML-Code hinzu.

       <local:CustomerCollection 
       xmlns:local="clr-namespace:DesignDataDemo" >
   
       <local:Customer FirstName="Syed" LastName="Abbas" Age="23" CustomerID="E7181DC6-3F9E-45A4-A5F7-AC0B119D1FD8" />
       <local:Customer FirstName="Brenda" LastName="Diaz" Age="55" CustomerID="BB638D72-8B72-495A-B0F9-79F37964BBAE" />
       <local:Customer FirstName="Lori" LastName="Kane" Age="17" CustomerID="B168D811-5548-4D28-8171-318F9A4D7219" />
   
   </local:CustomerCollection>
   

6. Wählen Sie im Projektmappen-Explorer beide Beispieldatendateien aus.

7. Legen Sie im Eigenschaftenfenster den Buildvorgang auf DesignData fest, stellen Sie sicher, dass In Ausgabeverzeichnis kopieren auf Nicht kopieren festgelegt ist, und löschen Sie das Feld Benutzerdefiniertes Tool.

   Tipp

   Als Buildvorgang können Sie auch DesignDataWithDesignTimeCreatableTypes auswählen.

Festlegen des Entwurfszeitdatenkontexts

Um einen Entwurfszeitdatenkontext zu erstellen, der Beispieldaten bereitstellt, verwenden Sie das d:DataContext-Entwurfszeitattribut mit der d:DesignData-Markuperweiterung.

So legen Sie den Entwurfszeitdatenkontext fest

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

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

   xmlns:local="clr-namespace:DesignDataDemo"
   

3. Erstellen Sie die Projektmappe.

4. Fügen Sie in der Entwurfsansicht nahe der Mitte des Grid-Steuerelements eine horizontale Rasterlinie hinzu, um zwei Zeilen zu definieren. Weitere Informationen finden Sie unter Gewusst wie: Hinzufügen von Zeilen und Spalten zu einem Raster.

5. Ziehen Sie in der Toolbox ein StackPanel-Steuerelement in die oberste Zeile.

6. Ersetzen Sie in der XAML-Ansicht das StackPanel-Element durch den folgenden XAML-Code.

   <StackPanel d:DataContext="{d:DesignData Source=./DesignData/SampleCustomer.xaml}" Grid.Row="0"></StackPanel>
   

   Dieser XAML-Code legt einen Entwurfszeitdatenkontext für StackPanel und die untergeordneten Steuerelemente fest. Zudem werden die Beispieldaten so für die Datenbindung verfügbar gemacht.

Erstellen einer Bindung an eine einzelne Instanz von Beispieldaten

Sie können eine Bindung an jede Eigenschaft der Customer-Instanz in der Datei SampleCustomer.xaml erstellen. Das folgende Verfahren zeigt, wie die FirstName-Eigenschaft mit dem Datenbindungs-Generator an ein TextBox-Steuerelement gebunden wird. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Erstellen einer Datenbindung mit dem WPF-Designer.

So binden Sie ein TextBox an Beispieldaten

1. Ziehen Sie aus der Toolbox ein TextBox-Steuerelement in das StackPanel-Steuerelement.

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 die FirstName-Eigenschaft.

   

6. Beachten Sie, dass in der Entwurfsansicht das TextBox-Steuerelement den in der Datei SampleCustomer.xaml angegebenen FirstName-Wert anzeigt.

   

Erstellen einer Bindung an eine Auflistung von Beispieldaten

Das folgende Verfahren zeigt, wie ein DataGrid-Steuerelement in der Datei SampleCustomers.xaml an eine Auflistung von Customer-Objekten gebunden wird.

So binden Sie ein DataGrid-Steuerelement an eine Auflistung von Beispieldaten

1. Ziehen Sie aus der Toolbox ein DataGrid-Steuerelement in die zweite Zeile des Rasters, und passen Sie es der Größe der Zeile an.

2. Ersetzen Sie in der XAML-Ansicht das [T:System.Windows.Controls.DataGrid ]-Element durch den folgenden XAML-Code.

   <DataGrid Grid.Row="1" d:DataContext="{d:DesignData Source=./DesignData/SampleCustomers.xaml}" />
   

   Dieser XAML-Code legt einen Entwurfszeitdatenkontext für DataGrid fest und macht die Beispieldaten für die Datenbindung verfügbar.

3. Wählen Sie das DataGrid-Steuerelement aus.

4. Führen Sie im Eigenschaftenfenster einen Bildlauf zur ItemsSource-Eigenschaft aus.

5. Klicken Sie am Rand der linken Spalte auf den Eigenschaftenmarker ().

6. Klicken Sie auf Datenbindung übernehmen.

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

   

7. Beachten Sie, dass in der Entwurfsansicht das DataGrid-Steuerelement in der Datei SampleCustomers.xaml mit den Customer-Instanzen aufgefüllt wird.

   

Siehe auch

Aufgaben

Exemplarische Vorgehensweise: Erstellen einer Datenbindung mit dem WPF-Designer

Exemplarische Vorgehensweise: Binden von Daten im Designer mit einer DesignInstance

Referenz

DataGrid

TextBox