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 Objekten 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 2010 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. Sie können aber ein DataTable - oder ein DataSet -Objekt auch 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.

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

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

1. Zeigen Sie in Visual Studio 2010 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.

So passen Sie die Datenauflistung an eine WPF-Auflistung an

Im folgenden Abschnitt wird beschrieben, wie in Visual Studio 2010 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.

1. Klicken Sie in Visual Studio 2010 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%\Programme\Reference Assemblies\Microsoft\Framework\v3.0 nach der Assembly WindowsBase.dll suchen.

2. Klicken Sie auf OK. Die Klasse System.Collections.Object.ObservableCollection wird von der Assembly WindowsBase implementiert.

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 Änderungsdatum und die beiden Fotos aus dem DataTable -Objekt 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 Assembly PresentationCore 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 ein Command -Element implementieren.

11. Klicken Sie im Menü Datei auf Neues Element. Klicken Sie im Dialogfeld Neues Element auf Klasse. Geben Sie im Textfeld Name den Dateinamen DelegateCommand.cs ein.

12. Drücken Sie in der neuen Seite die Tastenkombination STRG+A, um den gesamten Inhalt auszuwählen, und drücken Sie anschließend ENTF. Kopieren den Code und fügen Sie ihn in die Seite ein, die Sie gerade erstellt haben.

    namespace AWDataSource
    {
        using System;
        using System.Windows.Input;
    
        ///
        /// DelegateCommand is a simplified version of ICommand in WPF. You can wrap one of these around any method,
        /// and thus bind any command on any WPF object to your method.
        ///
        /// DelegateCommand also supports an IsEnabled property that you can use to turn the command on and off.
        ///
        public sealed class DelegateCommand : ICommand
        {
            // Type signature of the method that DelegateCommand works with - returns void, no arguments.
            public delegate void SimpleEventHandler();
    
            // Remember the method so that it can be called at the right time.
            private SimpleEventHandler handler;
    
            // Maintain the enabled state.
            private bool isEnabled = true;
    
            // Simple constructor: Pass in the method that needs to be called when the command executes.
            public DelegateCommand(SimpleEventHandler handler)
            {
    this.handler = handler;
            }
    
            #region ICommand implementation
    
            // Executing the command is as simple as calling the method.
            void ICommand.Execute(object arg)
            {
     this.handler();
            }
    
            // Saying whether the command can be executed.
    ICommand.CanExecute(object arg)
            {
                return this.IsEnabled;
            }
    
            // This is the event that the command architecture of WPF listens to so it knows when to update
            // the UI on command enable/disable.
            public event EventHandler CanExecuteChanged;
            #endregion
    
            // Public visibility of the isEnabled flag - note that when it is set, the event must be raised
            // so that WPF knows to update any UI that uses this command.
            public bool IsEnabled
            {
                get { return this.isEnabled; }
                set
                {
    this.isEnabled = value;
     this.OnCanExecuteChanged();
                }
            }
    
            // Simple event propagation that makes sure that someone is listening to the event before raising it.
            private void OnCanExecuteChanged()
            {
                if (this.CanExecuteChanged != null)
                {
     this.CanExecuteChanged(this, EventArgs.Empty);
                }
            }
        }
    }
    

    Klicken Sie im Menü Datei auf Speichern.

    Mit dem Code in der Datei DelegateCommand.cs können Sie jeden Befehl an Ihre Methode binden.

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

    private DelegateCommand getDataCommand;
    

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

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

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

    public DelegateCommand GetDataCommand { get { return getDataCommand; } }
    

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

So erstellen Sie eine Bindung an die Datenquelle in Expression Blend

Im folgenden Abschnitt wird beschrieben, wie eine sehr 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 Listendetails -Ansicht bezeichnet wird. Im linken Bereich, dem Listenbereich , wird die Produktliste angezeigt. Beim Auswählen eines Produkts in diesem Bereich werden im rechten Bereich, dem Detailbereich , Details zu diesem Produkt angezeigt. Wenn in einem Bereich ein Objekt markiert ist, wird der Inhalt des anderen Bereichs mithilfe der Datensynchronisierung zwischen Steuerelementen aktualisiert.

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.

   Achtung:
   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 Datenquelle erstellen , und klicken Sie dann auf Objektdatenquelle erstellen.

10. Erweitern Sie im Dialogfeld Objektdatenquelle erstellen den Knoten AWDataSource, wählen Sie ProductPhotosCollection aus, und klicken Sie dann 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 das LayoutRoot -Objekt, um dieses Objekt zu aktivieren. Beim Aktivieren des Objekts wird um den Namen ein schattierter Begrenzungsrahmen angezeigt.

    Tipp:

    Wenn Sie einem Objekt untergeordnete Objekte hinzufügen oder bestimmte Vorgänge durchführen möchten, doppelklicken Sie im Panel Objekte und Zeitachsen auf das übergeordnete Objekt, und fügen Sie dann das untergeordnete Objekt hinzu. Dieser Vorgang wird als Aktivieren bezeichnet. Das aktivierte Objekt ist durch einen schattierten Begrenzungsrahmen um den Objektnamen gekennzeichnet. Wenn Sie die Eigenschaften eines Objekts ändern möchten, klicken Sie im Panel Objekte und Zeitachsen auf das Objekt. Dieser Vorgang wird als Auswahl bezeichnet. Das ausgewählte Objekt ist durch eine hervorgehobene Hintergrundfarbe gekennzeichnet. Sie können ein Objekt 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 -Objekts ü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 -Objekt wird ein Spaltenunterteiler angezeigt.

    Tipp:
    Möglicherweise müssen Sie das LayoutRoot -Objekt 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 -Objekts. 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>-Objekt, das das LayoutRoot -Objekt 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, deren 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 -Objekt vom Datenpanel (unter ProductPhotosCollection) in die obere linke Rasterzelle auf der Zeichenfläche.

16. Doppelklicken Sie im Werkzeugpanel auf das Schaltflächensymbol (Button), um eine Schaltfläche auf der Zeichenfläche zu zeichnen. 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 dem Feld Command (Befehl) auf Erweiterte Optionen , und klicken Sie dann auf Datenbindung.

18. Wählen Sie im Panel Objekte und Zeitachsen das [Button] -Objekt aus, und suchen Sie im Eigenschaftenpanel unter Allgemeine Eigenschaften nach der Content -Eigenschaft (Inhalt). Legen Sie die Content -Eigenschaft (Inhalt) fest, indem Sie den Text Produktfotos abrufen eingeben und die EINGABETASTE drücken.

19. Verschieben Sie das [Button] -Objekt (Schaltfläche), und ändern Sie seine Größe, indem Sie im Werkzeugpanel auf das Auswahlwerkzeug klicken und die Funktionsindikatoren auf der Zeichenfläche verwenden. Ändern Sie die Größe des [Button] -Objekts so, 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 (Horizontale Ausrichtung) und VerticalAlignment (Vertikale Ausrichtung) den Wert Center (Zentriert) 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. 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ächenobjekten, 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 Objektstruktur der Vorlage zusammen mit aktualisierten Daten für den Benutzer formatiert. Jedes im ListBox -Objekt angezeigte Objekt ist ein Objekt vom Typ ProductPhoto, der von Ihnen in der zweiten Aufgabe dieses Themas implementiert wurde.

22. Aktivieren Sie im Dialogfeld Datenvorlage erstellen das Optionsfeld Neue Datenvorlage und Anzeigefelder. Mit dieser Option wird die Struktur des Datentyps definiert, den Sie aus dem Datenpanel gezogen haben, wie z. B. jedes einzelne Objekt in einer Auflistung von ProductPhoto-Objekten. Sie können nun eine Bindung an sämtliche Teile der Datenstruktur erstellen und so definieren, wie die Objektstruktur der Datenvorlage aussieht. Neben jedem Datenelement befindet sich eine Dropdownliste, mit der festgelegt wird, welches Objekt zum Darstellen des Datenfelds verwendet wird ( StackPanel - und TextBlock -Objekte). Anhand der Bezeichnung neben der Dropdownliste ist ersichtlich, an welche Objekteigenschaften das Datenelement gebunden wird.

23. Deaktivieren Sie die Option LargePhoto, da die Anzeige nur im ListBox -Objekt erfolgen soll.

24. Das Datenfeld ModifiedDate ist derzeit ein Objekt vom Typ StackPanel . Sie müssen das Steuerelement allerdings in einen Objekttyp ä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.

25. Das Datenfeld ThumbNailPhoto ist derzeit ein Objekt vom Typ ImageSource . Sie müssen das Steuerelement allerdings in einen Objekttyp ä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 Source geändert.

26. Klicken Sie auf OK. Hierdurch wird ein neues ListBox -Objekt 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.

27. Wählen Sie im Panel Objekte und Zeitachsen das [ListBox] -Objekt aus und legen Sie im Eigenschaftenpanel unter Layout Folgendes fest:

    • 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 -Objekt die untere linke Rasterzelle nahezu ganz füllt.

28. Wählen Sie im Werkzeugpanel das Image -Steuerelement  aus.

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

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

30. Wählen Sie im Panel Objekte und Zeitachsen das [Image] -Objekt aus, und suchen Sie im Eigenschaftenpanel unter Allgemeine Eigenschaften nach der Source -Eigenschaft (Inhalt). Klicken Sie auf den Namen der Source -Eigenschaft (Quelle), und wählen Sie in der Dropdownliste die Option Datenbindung aus.

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

32. Erweitern Sie unter Szenenelemente die Optionen Fenster und LayoutRoot , und wählen Sie dann Ihr ListBox -Objekt aus ( [System.WIndows.Controls.ListBox] ).

33. Klicken Sie in der Dropdownliste Anzeigen auf Alle Eigenschaften. Auf diese Weise werden nicht nur die Eigenschaften desselben Datentyps wie die Source -Eigenschaft ( String -Datentyp), sondern alle Eigenschaften angezeigt, die zum Erstellen einer Bindung zur Verfügung stehen.

34. Wählen Sie unter Eigenschaften die Option SelectedItem : (Object) aus.

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

36. Klicken Sie auf Fertig stellen.

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

Fertige Anwendung

Copyright © 2011 Microsoft Corporation. Alle Rechte vorbehalten.