Weiterführende Themen: Anzeigen von Daten aus einer SQL-Beispieldatenbank

In Microsoft Expression Blend können Sie XML-Datenquellen und CLR-Objektdatenquellen (Common Language Runtime) verwenden. Die Verwendung von XML-Datenquellen ist recht einfach im Vergleich zu CLR-Objektdatenquellen, die erheblich komplexer sind. Im Folgenden erfahren Sie, wie Sie Daten aus einer CLR-Datenquelle in der Expression Blend-Anwendung anzeigen können. Bei den ersten beiden Aufgaben werden Daten aus einer Beispieldatenbank abgerufen und anschließend in ein Format konvertiert, an das von Expression Blend eine Bindung erstellt werden kann. Bei der dritten Aufgabe wird ein Expression Blend-Projekt mit Elementen erstellt, die an die Daten gebunden werden.

Hinweis:
Weitere Informationen zu Microsoft Silverlight-Anwendungen finden Sie unter Silverlight-Datenbindung (möglicherweise in englischer Sprache) in MSDN.

Hinweis:

Damit Sie die Aufgaben in diesem Thema wie beschrieben ausführen können, müssen Microsoft Visual Studio 2008 und Microsoft SQL Server 2008 mit der AdventureWorks-Beispieldatenbank installiert sein. Weitere Informationen dazu, wie Sie die AdventureWorks-Beispieldatenbank erhalten, finden Sie unter Installieren der Beispieldatenbanken und Beispiele für AdventureWorks in MSDN. Wenn Sie möchten, können Sie eine DataTable oder ein DataSet aus einer anderen Datenbank erstellen. In diesem Fall können Sie die erste und zweite Aufgabe in diesem Thema an Ihre Daten anpassen. Die Vorgehensweisen bleiben dieselben, vorausgesetzt, Sie verwenden eine CLR- oder Microsoft .NET Framework-Datenquelle.

Definieren und Füllen einer Datentabelle

Im folgenden Abschnitt wird beschrieben, wie in Visual Studio 2008 eine Klassenbibliothek zum Füllen einer Instanz eines DataTable-Objekts mit Daten aus der AdventureWorks-Beispieldatenbank erstellt wird.

So definieren und füllen Sie ein "DataTable"-Objekt

1. Zeigen Sie in Visual Studio 2008 im Menü Datei auf Neu, und klicken Sie dann auf Projekt.

2. Klicken Sie im Dialogfeld Neues Projekt unter Projekttypen auf Visual C#. Klicken Sie unter Vorlagen auf Klassenbibliothek. Geben Sie dem neuen Projekt den Namen AWDataSource, und klicken Sie dann auf OK.

   Visual Studio generiert den Code für das neue Klassenbibliotheksprojekt und öffnet die Datei Class1.cs zur Bearbeitung.

3. Ändern Sie in der Datei Class1.cs den Namen der Definition der öffentlichen Klasse von Class1 in ProductPhotosCollection. Dieser Name ist aussagekräftiger.

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

5. Wählen Sie im Dialogfeld Neues Element hinzufügen die Vorlage DataSet aus der Vorlagenliste aus, geben Sie dem Element den Namen ProductPhotos.xsd, und klicken Sie dann auf Hinzufügen.

   Ihrem Projekt wird ein Dataset in Form einer Schemadatei und unterstützenden Klassendateien hinzugefügt. Die Schemadatei wird zur Bearbeitung geöffnet.

   Hinweis:
   Bei einem Dataset handelt es sich um ein Objekt mit Datentabellen, in denen Sie die in einer Anwendung verwendeten Daten temporär im Arbeitsspeicher speichern können. Weitere Informationen finden Sie unter Übersicht über Datasets in Visual Studio in MSDN.

6. Klicken Sie im Server-Explorer mit der rechten Maustaste auf Datenverbindungen, und klicken Sie dann auf Verbindung hinzufügen.

7. Im Dialogfeld Datenquelle auswählen wird im Feld Datenquelle bereits Microsoft SQL Server (SqlClient) angezeigt.

   Tipp:
   Wenn Sie keine SQL Server-Datenbank verwenden, klicken Sie auf die Schaltfläche Ändern, um die alternative Datenquelle auszuwählen. Die folgenden Schritte werden nicht mit dem übereinstimmen, was im Dialogfeld Datenquelle auswählen von Visual Studio angezeigt wird.

8. Geben Sie im Feld Servername den Namen der SQL Server-Instanz ein, auf der die AdventureWorks-Datenbank installiert ist.

   Tipp:
   Wenn Sie eine andere SQL Server-Datenbank als AdventureWorks verwenden, wählen Sie den Namen des Servers aus, auf dem die SQL Server-Datenbank installiert ist.

9. Wählen Sie unter Beim Server anmelden die Authentifizierungsmethode aus, die zum Anmelden an der SQL Server-Instanz erforderlich ist. Möglicherweise müssen Sie diese Informationen beim Serveradministrator erfragen. Bei der Windows-Authentifizierung werden die aktuellen Anmeldeinformationen verwendet. Bei der SQL Server-Authentifizierung müssen Sie den Benutzernamen und das Kennwort des Kontos angeben, das für den Zugriff auf die Datenbank konfiguriert ist.

10. Wählen Sie unter Mit Datenbank verbinden die AdventureWorks-Datenbank aus. Diese wird nur dann angezeigt, wenn Sie die richtigen Anmeldeinformationen eingegeben haben, die AdventureWorks-Datenbank auf Ihrem Computer installiert ist und auf dem Computer SQL Server ausgeführt wird.

11. Klicken Sie auf die Schaltfläche Testverbindung. Wenn die Testverbindung fehlschlägt, wenden Sie sich an den Administrator für SQL Server.

12. Klicken Sie auf OK, um die Erstellung der Datenverbindung abzuschließen. Im Server-Explorer wird unter dem Knoten Datenverbindungen eine neue Verbindung mit der Bezeichnung <Servername>.AdventureWorks.dbo angezeigt. Hierbei steht <servername> für den Namen Ihres Servers.

13. Erweitern Sie im Server-Explorer den neuen Verbindungsknoten <Servername>.AdventureWorks.dbo, erweitern Sie den Knoten Tabellen, und suchen Sie dann die ProductPhoto-Tabelle. Öffnen Sie die Datei ProductPhotos.xsd, und ziehen Sie die ProductPhoto-Tabelle aus dem Server-Explorer auf die Designoberfläche. Sie haben nun ein typisiertes Dataset, das eine Verbindung mit der AdventureWorks-Datenbank herstellen und die Inhalte der ProductPhoto-Tabelle zurückgeben kann.

14. Fügen Sie in der Datei Class1.cs die folgende Methode innerhalb der ProductPhotosCollection-Klasse hinzu:

    private void GetData()
        {
            ProductPhotosTableAdapters.ProductPhotoTableAdapter da =
                new ProductPhotosTableAdapters.ProductPhotoTableAdapter();
            ProductPhotos.ProductPhotoDataTable dt = da.GetData();
        }
    

    Der Namespace ProductPhotosTableAdapters ist in der Datei ProductPhotos.Designer.cs definiert, die beim Erstellen von ProductPhotos DataSet von Visual Studio erstellt wurde. Sie verfügen nun über eine Methode, mit der eine Instanz von ProductPhotos DataTable beim Ausführen der Anwendung mit Daten gefüllt wird.

15. Erstellen Sie das Projekt (drücken Sie STRG+UMSCHALT+F6), um sicherzustellen, dass es keine Fehler enthält.

Anpassen der Datensammlung an eine WPF-Sammlung

Im folgenden Abschnitt wird beschrieben, wie in Visual Studio 2008 eine Klassenbibliothek erstellt wird, um Daten aus einem DataTable- in ein ObservableCollection-Objekt zu konvertieren, sodass von Expression Blend (oder einer anderen Anwendung, die Windows Presentation Foundation (WPF) verwendet) eine Bindung an die Daten erstellt werden kann. Sie werden eine ProductPhoto-Klasse zum Darstellen der Daten in einer Tabellenzeile definieren, eine ProductPhotos-Auflistung als privaten Member zu ProductPhotosCollection hinzufügen und anschließend einen öffentlichen Accessor (eine get-Methode) hinzufügen, sodass Code außerhalb der Klasse darauf zugreifen kann.

Tipp:
Wenn Sie die vorherige Aufgabe in diesem Thema ausgeführt haben, verfügen Sie nun über eine DataTable-Instanz mit Daten aus der ProductPhoto-Datenbanktabelle von AdventureWorks. Wenn Sie ein DataTable- oder ein DataSet-Objekt über eine andere Quelle gefüllt haben, können Sie den Namen der Datentabelle und die Namen der Felder anhand der folgenden Schritte an die Ihnen vorliegenden Daten anpassen.

So passen Sie die Datenauflistung an eine WPF-Auflistung an

1. Klicken Sie in Visual Studio 2008 im Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen, und klicken Sie dann auf Verweis hinzufügen. Wählen Sie auf der Registerkarte .NET die Assembly WindowsBase aus. Wenn die Assembly WindowsBase nicht angezeigt wird, können Sie über die Registerkarte Durchsuchen im Ordner %SystemDrive%\Program Files\Reference Assemblies\Microsoft\Framework\v3.0 nach der Assembly WindowsBase.dll suchen.

2. Klicken Sie auf OK. Die WindowsBase-Assembly implementiert die System.Collections.Object.ObservableCollection-Klasse.

3. Fügen Sie oben in der Datei Class1.cs die folgende Anweisung ein:

   using System.Collections.ObjectModel;
   

4. Fügen Sie darüber hinaus in der Datei Class1.cs die folgende ProductPhoto-Klassendefinition zum Namespace AWDataSource hinzu, sodass Sie über eine Klasse verfügen, die Sie verwenden können:

   public class ProductPhoto { }
   

5. Fügen Sie den folgenden Member zur ProductPhotosCollection-Klasse hinzu:

   private ObservableCollection<ProductPhoto> productPhotos =
       new ObservableCollection<ProductPhoto>();
   

6. Fügen Sie die folgende Accessormethode zur ProductPhotosCollection-Klasse hinzu:

   public ObservableCollection<ProductPhoto> ProductPhotos
   { get { return this.productPhotos; } }
   

   In den nächsten Schritten werden die ID, das geänderte Datum und die zwei Fotos aus dem DataTable- in das ObservableCollection-Objekt kopiert.

7. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen, und klicken Sie dann auf Verweis hinzufügen. Fügen Sie der PresentationCore-Assembly einen Verweis hinzu.

8. Fügen Sie oben in der Datei Class1.cs die folgenden Anweisungen ein:

   using System.Windows.Media;
   using System.Windows.Media.Imaging;
   

9. Fügen Sie Member zur ProductPhoto-Klasse hinzu, sodass die Klasse wie folgt aussieht:

   public class ProductPhoto
       {
           // Public Accessors to the private properties.
           public int ID { get { return id; } }
           public ImageSource ThumbNailPhoto { get { return thumbNailPhoto; } }
           public ImageSource LargePhoto { get { return largePhoto; } }
           public DateTime ModifiedDate { get { return modifiedDate; } }
   
           // Constructor.
           public ProductPhoto(int id, byte[] thumbNailPhoto, byte[] largePhoto,
               DateTime modifiedDate)
           {
               this.id = id;
               this.thumbNailPhoto = ByteArrayToImageSource(thumbNailPhoto);
               this.largePhoto = ByteArrayToImageSource(largePhoto);
               this.modifiedDate = modifiedDate;
           }
   
           // Private properties.
           private int id;
           private ImageSource thumbNailPhoto;
           private ImageSource largePhoto;
           private DateTime modifiedDate;
   
           // Supporting method.
           private ImageSource ByteArrayToImageSource(byte[] data)
           {
               BitmapImage image = null;
               if (null != data)
               {
                   image = new BitmapImage();
                   image.BeginInit();
                   image.StreamSource = new System.IO.MemoryStream(data);
                   image.EndInit();
               }
               return image;
           }
       }
   

10. Fügen Sie den folgenden Code zur ProductPhotosCollection-Klasse am Ende der GetData-Methode hinzu, sodass die Methode das DataTable- in das ObservableCollection-Objekt kopiert:

    productPhotos.Clear();
       foreach (ProductPhotos.ProductPhotoRow row in dt)
       {
           productPhotos.Add(new ProductPhoto(
               row.ProductPhotoID,
               row.ThumbNailPhoto,
               row.LargePhoto,
               row.ModifiedDate));
       }
    

    Nun können Sie als praktische Möglichkeit zum Aufrufen der ProductsPhotosCollection.GetData-Methode einen Befehl implementieren.

11. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen, klicken Sie auf Hinzufügen, und klicken Sie dann auf Vorhandenes Element.

12. Navigieren Sie im Dialogfeld Vorhandenes Element hinzufügen zur Datei DelegateCommand.cs im Expression Blend-Beispielordner %SystemDrive%\Programme\Microsoft Expression\Blend\Samples\<language>\ColorSwatch, und klicken Sie dann auf Hinzufügen.

13. Ändern Sie den Namespace von ColorSwatch in Ihren Namespacenamen (AWDataSource). Mit dem Code in der Datei DelegateCommand.cs können Sie jeden Befehl an Ihre Methode binden.

14. Fügen Sie in der Datei Class1.cs den folgenden Member innerhalb der ProductPhotosCollection-Klasse hinzu:

    private DelegateCommand getDataCommand;
    

15. Fügen Sie den folgenden Konstruktor zur ProductPhotosCollection-Klasse hinzu, um den Befehl zu initialisieren:

    public ProductPhotosCollection()
        {
            getDataCommand = new DelegateCommand(delegate() { GetData(); });
        }
    

16. Machen Sie schließlich den Befehl verfügbar, indem Sie die folgende Accessormethode zur ProductPhotosCollection-Klasse hinzufügen:

    public DelegateCommand GetDataCommand { get { return getDataCommand; } }
    

17. Erstellen Sie das Projekt (drücken Sie F5), um sicherzustellen, dass es keine Fehler enthält. Sie verfügen nun über eine Klasse, die Sie als Datenquelle in einer Expression Blend- oder einer beliebigen WPF-Anwendung verwenden können. Bei dieser Klasse handelt es sich entweder um die ProductPhotosCollection-Klasse oder eine gleichwertige Klasse, wenn Sie eine eigene definiert haben.

Erstellen einer Bindung an die Datenquelle in Expression Blend

Im folgenden Abschnitt wird beschrieben, wie eine ganz einfache Expression Blend-Anwendung mit einem an die Datenquelle gebundenen ListBox-Steuerelement erstellt wird. Die Anwendung verwendet ein gebräuchliches Designmuster für Benutzeroberflächen, das als Master-Details-Ansicht bezeichnet wird. Im linken Bereich, dem Masterbereich, wird die Produktliste angezeigt. Beim Auswählen eines Produkts in diesem Bereich werden im rechten Bereich, dem Detailbereich, Details zu diesem Produkt angezeigt. Wenn im einen Bereich ein Element markiert ist, wird der Inhalt des anderen Bereichs mithilfe der Datensynchronisierung zwischen Steuerelementen aktualisiert.

So erstellen Sie eine Bindung an die Datenquelle in Expression Blend

1. Klicken Sie in Expression Blend auf Datei und dann auf Neues Projekt.

2. Wählen Sie im Dialogfeld Neues Projekt erstellen den Projekttyp WPF-Anwendung aus. Auf diese Weise wird ein Projekt für eine Windows-basierte Anwendung erstellt, die Sie beim Entwerfen erstellen und ausführen können. Die andere Option ist ein Projekt der WPF-Steuerelementbibliothek, mit dem Sie Steuerelemente für andere Windows-basierte Anwendungen entwerfen können.

3. Geben Sie im Textfeld Name den Namen AWProductPhotos ein. Behalten Sie für Sprache den Standardwert bei, da in diesem Verfahren kein handschriftlicher Code verwendet wird.

4. Klicken Sie auf OK. Das neue Projekt wird von Expression Blend geladen und zum Bearbeiten angezeigt.

   Tipp:
   Wenn bereits ein Projekt geöffnet war, wird möglicherweise zunächst ein Dialogfeld angezeigt, in dem Sie gefragt werden, ob vor dem Öffnen des neuen Projekts das aktuelle Projekt gespeichert oder verworfen werden soll.

5. Speichern Sie das neue Projekt nach dem Laden in den Arbeitsspeicher auf der Festplatte, indem Sie im Menü Datei auf Alles speichern klicken. Im Textfeld Name muss bereits der Name AWProductPhotos angezeigt werden. Klicken Sie daher auf OK.

   Vorsicht:
   Bei der Arbeit in Expression Blend werden Änderungen nicht automatisch auf der Festplatte gespeichert. Achten Sie daher darauf, dass Sie Ihre Dateien frühzeitig und häufig manuell speichern. Weitere Informationen finden Sie unter Verwalten von Projektmappen, Projekten und Dateien.

6. Klicken Sie im Menü Projekt auf Verweis hinzufügen.

7. Suchen Sie im Dialogfeld Verweis hinzufügen die am Ende der zweiten Aufgabe in diesem Thema erstellte Datei AWDataSource.dll, um einen Verweis hinzuzufügen. Die Datei AWDataSource.dll befindet sich im Ordner bin/Debug des AWDataSource-Projekts.

8. Klicken Sie auf OK. Die Datei AWDataSource.dll ist nun Teil des Projekts. Wenn Sie den Knoten Verweise im Projektpanel erweitern, wird ein Verweis auf die Datei AWDataSource.dll angezeigt.

9. Klicken Sie im Datenpanel auf Live-Datenquelle hinzufügen , und klicken Sie dann auf Neue Objektdatenquelle definieren.

10. Erweitern Sie im Dialogfeld Neue Objektdatenquelle definieren den Knoten AWDataSource, wählen Sie ProductPhotosCollection aus, und klicken Sie auf OK.

    Im Projektpanel wurde die Datenquelle ProductPhotosCollectionDS dem Projekt hinzugefügt. Die Datenquelle ProductPhotosCollectionDS stellt die Struktur einer Instanz der CLR-Klasse dar, auf die Sie verwiesen haben. Erweitern Sie ProductPhotosCollectionDS und ProductPhotosCollection, um die Struktur anzuzeigen. In einem späteren Schritt in dieser Aufgabe werden Sie Daten aus dem Datenpanel auf die Zeichenfläche ziehen, um neue Steuerelemente zu erstellen.

11. Klicken Sie im Panel Objekte und Zeitachsen auf die Schaltfläche LayoutRoot, um sie zu aktivieren. Beim Aktivieren des Elements wird um den Namen eine schattierte BoundingBox angezeigt.

    Tipp:

    Wenn Sie einem Element untergeordnete Elemente hinzufügen oder bestimmte Vorgänge durchführen möchten, doppelklicken Sie im Panel Objekte und Zeitachsen auf das übergeordnete Element, und fügen Sie dann das untergeordnete Element hinzu. Dieser Vorgang wird als Aktivieren bezeichnet. Das aktivierte Element ist durch eine schattierte BoundingBox um den Elementnamen gekennzeichnet. Wenn Sie die Eigenschaften eines Elements ändern möchten, klicken Sie im Panel Objekte und Zeitachsen auf das Element. Dieser Vorgang wird als Auswahl bezeichnet. Das ausgewählte Element ist durch eine hervorgehobene Hintergrundfarbe gekennzeichnet. Sie können ein Element auswählen, ohne es zu aktivieren.

12. Klicken Sie im Werkzeugpanel auf Auswahl. Bewegen Sie den Mauszeiger auf der Zeichenfläche an der Oberseite des LayoutRoot-Elements über den dicken Linealbereich. Dem Mauszeiger folgt ein Spaltenlineal, das anzeigt, an welcher Stelle beim Klicken ein neuer Spaltenunterteiler eingefügt wird.

13. Klicken Sie, um einen neuen Spaltenunterteiler zu erstellen, wobei die linke Spalte etwa dieselbe Breite aufweisen sollte wie die rechte Spalte. Die linke Spalte enthält eine Liste mit Miniaturansichten von Produktfotos und die rechte Spalte ein großes Foto vom ausgewählten Listenelement. Im LayoutRoot-Element wird ein Spaltenunterteiler angezeigt.

    Tipp:
    Möglicherweise müssen Sie das LayoutRoot-Element verkleinern, damit es auf der Zeichenfläche vollständig angezeigt wird. Geben Sie zum Verkleinern im Textfeld unten auf der Zeichenfläche einen Zoomwert ein, klicken Sie auf den Pfeil neben dem Zoomwert, oder drehen Sie das Mausrad, und halten Sie dabei die STRG-TASTE gedrückt.

14. Bewegen Sie den Mauszeiger auf der Zeichenfläche über den dicken Linealbereich auf der linken Seite des LayoutRoot-Elements. Klicken Sie, um einen neuen Zeilenunterteiler zu erstellen, wobei die oberste Zeile groß genug sein muss, um eine Schaltfläche aufzunehmen. Klicken Sie auf das Symbol mit dem geöffneten Vorhängeschloss neben der obersten Zeile, um die Zeile mit einer festen Höhe zu sperren.

    Tipp:

    Wenn Sie das Ergebnis der im vorigen Schritt beschriebenen Aktion sehen möchten, klicken Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf LayoutRoot, und klicken Sie auf XAML anzeigen (um XAML (Extensible Application Markup Language) anzuzeigen). Auf diese Weise wechselt die Zeichenfläche zur XAML-Ansicht, wobei der LayoutRoot-Code hervorgehoben ist. Klicken Sie im Menü Fenster auf Panels ausblenden (drücken Sie F4 oder TAB), um eine bessere Ansicht zu erhalten. Ein <Grid.ColumnDefinitions> - und ein <Grid.RowDefinitions>-Abschnitt wurden dem <Grid>-Element, das das LayoutRoot-Element darstellt, hinzugefügt. Für die Attribute Width und Height werden Sterngrößen verwendet, d. h. die Größen der Spalten sind proportional zueinander. Zum Beispiel wird bei einem Width-Wert von 2* eine Spalte erstellt, die doppelt so groß ist wie eine Spalte, dessen Breite auf * festgelegt ist. Für die gesperrte Zeile werden keine Sterngrößen verwendet, da die Höhe fest ist. Wenn Sie den XAML-Code beenden möchten, wechseln Sie wieder zur Designansicht zurück, und zeigen Sie die Panels wieder an (drücken Sie die F4 oder TAB.)

15. Ziehen Sie das GetDataCommand-Element im Datenpanel (aus ProductPhotosCollection) in die obere linke Rasterzelle auf der Zeichenfläche.

16. Klicken Sie in der Dropdownliste auf die Schaltfläche.

17. Wählen Sie im Dialogfeld Datenbindung erstellen in der Dropdownliste Eigenschaft von die Option Befehl aus, und klicken Sie dann auf OK. Hierdurch wird eine neue Schaltfläche erstellt, die an die GetDataCommand-Accessormethode in der AWDataSource-Klasse gebunden ist. Wenn zur Laufzeit auf die Schaltfläche geklickt wird, wird die GetDataCommand-Accessormethode für die Datenquelle ProductPhotosCollection ausgeführt, und wie in der zweiten Aufgabe in diesem Thema wird durch die Implementierung dieses Befehls die GetData-Methode aufgerufen.

    Tipp:

    Sie können die neue Schaltfläche auf der Zeichenfläche verschieben und deren Größe anpassen. Klicken Sie hierzu im Werkzeugpanel auf das Auswahlwerkzeug, wählen Sie die neue Schaltfläche auf der Zeichenfläche oder im Panel Objekte und Zeitachsen aus, und verwenden Sie dann die Funktionsindikatoren auf der Zeichenfläche. Weitere Informationen finden Sie unter Ändern der Position oder Versetzen (Translation) eines Objekts und Ändern der Größe oder Skalieren eines Objekts.

    Tipp:

    Auf Datenbindungen können Sie über das Eigenschaftenpanel zugreifen. Nach dem Erstellen der Datenbindung können Sie das Dialogfeld Datenbindung erstellen erneut öffnen. Wählen Sie hierzu im Panel Objekte und Zeitachsen die Schaltfläche aus. Klicken Sie anschließend im Eigenschaftenpanel unter Sonstiges neben der Command-Eigenschaft (Befehl) auf Erweiterte Eigenschaftenoptionen, und klicken Sie dann auf Datenbindung.

18. Suchen Sie im Eigenschaftenpanel unter AllgemeineEigenschaften nach der Content-Eigenschaft (Inhalt), während [Schaltfläche] im Panel Objekte und Zeitachsen ausgewählt ist. Legen Sie die Content-Eigenschaft (Inhalt) fest, indem Sie den Text Produktfotos abrufen eingeben und die EINGABETASTE drücken.

19. Verschieben Sie das Element [Schaltfläche], und ändern Sie seine Größe, indem Sie im Werkzeugpanel auf das Auswahlwerkzeug klicken und die Funktionsindikatoren auf der Zeichenfläche verwenden. Passen Sie das Element [Button] so an, dass es in die obere linke Rasterzelle passt. Legen Sie anschließend im Eigenschaftenpanel unter Layout die folgenden Eigenschaften fest:

    • Legen Sie für die Eigenschaften Width (Breite) und Height (Höhe) den Wert Auto fest.

    • Legen Sie für die Margin-Eigenschaften (Rand) den Wert 0 fest.

    • Legen Sie für die Eigenschaften HorizontalAlignment und VerticalAlignment den Wert Center fest.

    Mit diesen Einstellungen wird sichergestellt, dass die Schaltfläche nur gerade so groß ist, dass der Text in der Content-Eigenschaft (Inhalt) Platz hat, und dass die Schaltfläche in der Rasterzelle zentriert angeordnet wird.

20. Ziehen Sie ProductPhotos (Array) im Datenpanel in die untere linke Rasterzelle auf der Zeichenfläche.

21. Klicken Sie in der Dropdownliste auf ListBox.

22. Wählen Sie im Dialogfeld Datenbindung erstellen in der Dropdownliste Eigenschaft von die Option ItemsSource aus, und klicken Sie dann auf OK.

    Tipp:

    Bei einer Datenvorlage handelt es sich im Prinzip um eine Struktur mit Benutzeroberflächenelementen, die Bindungen an Daten enthalten können. Immer wenn Daten eines bestimmten Typs angezeigt werden müssen, wird die entsprechende Datenvorlage ausgewählt und aus der Vorlage eine neue Kopie der Elementstruktur der Vorlage zusammen mit aktualisierten Daten für den Benutzer formatiert. Jedes im ListBox-Element angezeigte Element ist ein von Ihnen in der zweiten Aufgabe in diesem Thema implementiertes Objekt vom Typ ProductPhoto.

23. Aktivieren Sie im Dialogfeld Datenvorlage erstellen das Optionsfeld Neue Datenvorlage und Anzeigefelder. Mit dieser Option wird die Struktur des Datentyps definiert, den Sie aus der Palette Daten gezogen haben, wie z. B. die einzelnen Elemente in einer Auflistung von ProductPhoto-Objekten. Sie können nun eine Bindung an sämtliche Teile der Datenstruktur erstellen und so definieren, wie die Elementstruktur der Datenvorlage aussieht. Neben jedem Datenelement befindet sich eine Dropdownliste, die bestimmt, welches Element zum Darstellen des Datenfelds verwendet wird (StackPanel- und TextBlock-Elemente). Daneben befindet sich eine Bezeichnung, die angibt, an welche Elementeigenschaften das Datenelement gebunden wird.

24. Deaktivieren Sie die Option LargePhoto, da die Anzeige nur im ListBox-Element erfolgen soll.

25. Das Datenfeld ModifiedDate ist derzeit ein Element vom Typ StackPanel. Sie müssen das Steuerelement allerdings in einen Elementtyp ändern, der für die Anzeige dieses Datentyps besser geeignet ist. Wählen Sie in der Dropdownliste neben ModifiedDate die Option TextBlock aus. Die Beschriftung wird automatisch in Text geändert.

26. Das Datenfeld ThumbNailPhoto ist derzeit ein Element vom Typ ImageSource. Sie müssen das Steuerelement allerdings in einen Elementtyp ändern, der für die Anzeige dieses Datentyps besser geeignet ist. Wählen Sie in der Dropdownliste neben ThumbNailPhoto die Option Image aus. Die Beschriftung wird automatisch in Quelle geändert.

27. Klicken Sie auf OK. Hierdurch wird ein neues ListBox-Element in das Dokument eingefügt.

    Tipp:
    Eine Datenvorlage ist eine Ressource. Um die Datenvorlage ProductPhotosTemplate nach dem Erstellen zu ändern, erweitern Sie den Knoten Window1.xaml im Ressourcenpanel, erweitern Sie Window, und klicken Sie dann auf die Schaltfläche neben ProductPhotosTemplate.

28. Legen Sie im Eigenschaftenpanel unter Layout Folgendes fest, während im Panel Objekte und Zeitachsen das [ListBox]-Element ausgewählt ist:

    • Legen Sie für die Eigenschaften Width (Breite) und Height (Höhe) den Wert Auto fest.

    • Legen Sie für die Margin-Eigenschaft (Rand) den Wert 8 fest.

    • Legen Sie für die Eigenschaften HorizontalAlignment (Horizontale Ausrichtung) und VerticalAlignment (Vertikale Ausrichtung) den Wert Center (Zentriert) fest.

    Mit diesen Einstellungen wird sichergestellt, dass das ListBox-Element die untere linke Rasterzelle nahezu ganz füllt.

29. Klicken Sie im Werkzeugpanel auf Bild.

    Tipp:
    Wenn das Image-Steuerelement im Werkzeugpanel nicht angezeigt wird, finden Sie es, indem Sie auf die Schaltfläche Objekte klicken. Nachdem Sie ein Steuerelement aus diesem Katalog ausgewählt haben, wird das zugehörige Symbol im Werkzeugpanel unter der Schaltfläche Objekte angezeigt.

30. Ziehen Sie auf der Zeichenfläche ein neues Image-Steuerelement in die untere rechte Rasterzelle, wobei das Steuerelement nahezu die gesamte Zelle ausfüllt.

31. Suchen Sie im Eigenschaftenpanel unter AllgemeineEigenschaften nach der Content-Eigenschaft (Inhalt), während [Bild] im Panel Objekte und Zeitachsen ausgewählt ist. Klicken Sie auf den Namen der Source-Eigenschaft (Quelle), und wählen Sie in der Dropdownliste die Option Datenbindung aus.

32. Klicken Sie im Dialogfeld Datenbindung erstellen auf die Registerkarte Elementeigenschaft, da Sie eine Bindung an eine Eigenschaft des [ListBox]-Elements erstellen werden.

33. Erweitern Sie unter Szenenelemente die Knoten Window und LayoutRoot, und markieren Sie das ListBox-Element ([System.Windows.Controls.ListBox]).

34. Klicken Sie in der Dropdownliste Anzeigen auf Alle Eigenschaften. Auf diese Weise werden nicht nur die Eigenschaften desselben Datentyps wie die Source-Eigenschaft (Quelle) (Zeichenfolge), sondern alle Eigenschaften angezeigt, die zum Erstellen einer Bindung verfügbar sind.

35. Klicken Sie unter Eigenschaften auf SelectedItem : (Object).

36. Aktivieren Sie das Kontrollkästchen Benutzerdefinierten Pfadausdruck verwenden. Der Standardausdruck lautet SelectedItem. Ändern Sie ihn in SelectedItem.LargePhoto, sodass Sie eine Bindung an den LargePhoto-Member des derzeit ausgewählten ProductPhoto-Objekts erstellen.

37. Klicken Sie auf Fertig stellen.

38. Klicken Sie im Menü Projekt auf Testprojekt (oder drücken Sie F5). Testen Sie die Anwendung nach dem Starten der Anwendung, indem Sie auf Produktfotos abrufen klicken. Wenn im Listenfeld Daten geladen werden, prüfen Sie, ob für die einzelnen Einträge in der rechten Spalte das große Foto angezeigt wird.

Die fertige Anwendung