So binden Sie Daten im XAML-Designer

Im XAML-Designer können Sie Datenbindungseigenschaften einstellen, indem sie die Zeichenfläche und das Eigenschaftenfenster benutzen. Das Beispiel in diesem Thema zeigt, wie Sie Daten an ein Steuerelement binden. Insbesondere zeigt der Vorgang, wie eine einfache Einkaufswagenklasse erstellt wird, die über eine DependencyProperty mit der Bezeichnung ItemCount verfügt, und wie die Eigenschaft ItemCount an die Eigenschaft Text eines TextBlock-Steuerelements gebunden wird.

So erstellen Sie eine Klasse zur Verwendung als Datenquelle

1. Erstellen Sie ein C#-Projekt oder ein Visual Basic-Projekt in der Vorlage der leeren App.

2. Öffnen Sie MainPage.xaml.cs (oder MainPage.xaml.vb), und fügen Sie folgenden Code hinzu. In C# fügen Sie den Code im Namespace projectName hinzu (vor der letzten schließenden Klammer in der Datei). Fügen Sie in Visual Basic einfach die neue Klasse hinzu.

   public class ShoppingCart : DependencyObject
   {
       public int ItemCount
       {
           get { return (int)GetValue(ItemCountProperty); }
           set { SetValue(ItemCountProperty, value); }
       }
   
       public static readonly DependencyProperty ItemCountProperty =
            DependencyProperty.Register("ItemCount", typeof(int),
            typeof(ShoppingCart), new PropertyMetadata(0));
   }
   

   Public Class ShoppingCart
       Inherits DependencyObject
   
       Public Shared ReadOnly ItemCountProperty As DependencyProperty = DependencyProperty.Register(
           "ItemCount", GetType(Integer), GetType(ShoppingCart), New PropertyMetadata(0))
       Public Property ItemCount As Integer
           Get
               ItemCount = CType(GetValue(ItemCountProperty), Integer)
           End Get
           Set(value As Integer)
               SetValue(ItemCountProperty, value)
           End Set
       End Property
   End Class
   

   Durch diesen Code wird der Wert "0" als Standardelementanzahl mithilfe des PropertyMetadata-Objekts festgelegt.

   Tipp

   In Visual Studio können Sie Stubcode für eine Abhängigkeitseigenschaft hinzufügen, indem Sie propdp innerhalb der ShoppingCart-Klasse eingeben und dann die Tabulatortaste drücken.

3. Klicken Sie auf Erstellen > Projektmappe erstellen.

So binden Sie die ItemCount-Eigenschaft an ein TextBlock-Steuerelement

1. Klicken Sie mit der rechten Maustaste auf MainPage.xaml, und dann klicken Sie auf Ansicht-Designer.

2. Wählen Sie im Fenster "Dokumentgliederung" den Stammbereich Raster aus, der als [Raster] im Fenster angezeigt wird.

3. Wenn das Grid ausgewählt ist, klicken Sie auf die Schaltfläche Neu neben der Eigenschaft DataContext im Eigenschaftenfenster.

4. Stellen Sie im Dialogfeld Objekt auswählen sicher, dass Alle Assemblys anzeigen deaktiviert ist. Wählen Sie dann ShoppingCart unter dem Namespace projectName aus, und klicken Sie auf OK.

   Die folgende Abbildung zeigt das Dialogfeld Objekt auswählen mit der Auswahl ShoppingCart.

   

5. Im Werkzeugkasten doppelklicken Sie auf ein TextBlock-Steuerelement, um dieses der Zeichenfläche hinzuzufügen.

6. Wenn das Steuerelement TextBlock ausgewählt ist, klicken Sie auf den Eigenschaftenmarker rechts von der Text-Eigenschaft unter "Allgemein" im Eigenschaftenfenster. (Der Eigenschaftenmarker sieht wie ein kleines Feld aus.)

7. Klicken Sie im daraufhin angezeigten Menü auf Datenbindungen erstellen.

8. Mit einem Bindungstyp von Datenkontext, welcher der Standardwert in der Bindungstyp-Liste ist, wählen Sie die Eigenschaft ItemCount im Pfad-Feld, und dann klicken Sie auf OK.

   Die folgende Abbildung zeigt das Dialogfeld Datenbindung erstellen, wobei die Eigenschaft ItemCount ausgewählt ist.

   

9. Drücken Sie F5, um die Anwendung zu starten.

   Die Steuerung TextBlock sollte den Standardwert von 0 als Text anzeigen.

Siehe auch

Referenz

Dialogfeld "Wertkonverter hinzufügen"

Konzepte

Erstellen einer Benutzeroberfläche mit dem XAML-Designer