Exemplarische Vorgehensweise: Bindung an Daten im XAML-DesignerWalkthrough: Bind to data in XAML Designer

Im XAML-Designer können Sie Datenbindungseigenschaften mithilfe der Zeichenfläche und des Eigenschaftenfensters festlegen.In XAML Designer, you can set data binding properties by using the artboard and the Properties window. In dieser exemplarischen Vorgehensweise wird veranschaulicht, wie Daten an ein Steuerelement gebunden werden.The example in this walkthrough shows how to bind data to a control. Die exemplarische Vorgehensweise zeigt insbesondere, 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.Specifically, the walkthrough shows how to create a simple shopping cart class that has a DependencyProperty named ItemCount, and then bind the ItemCount property to the Text property of a TextBlock control.

So erstellen Sie eine Klasse, die als Datenquelle verwendet wirdTo create a class to use as a data source

  1. Wählen Sie im Menü Datei die Optionsfolge Neu > Projekt aus.On the File menu, choose New > Project.

  2. Wählen Sie im Dialogfeld Neues Projekt den Knoten Visual C# oder Visual Basic aus, erweitern Sie den Knoten Windows Desktop, und wählen Sie dann die Vorlage WPF-Anwendung aus.In the New Project dialog box, choose either the Visual C# or Visual Basic node, expand the Windows Desktop node, and then choose the WPF Application template.

  3. Geben Sie dem Projekt den Namen BindingTest, und wählen Sie anschließend die Schaltfläche OK.Name the project BindingTest, and then choose the OK button.

  4. Öffnen Sie die Datei MainWindow.xaml.cs (oder MainWindow.xaml.vb), und fügen Sie den folgenden Code hinzu.Open the MainWindow.xaml.cs (or MainWindow.xaml.vb) file and add the following code. Fügen Sie in C# den Code im BindingTest-Namespace (vor der letzten schließenden Klammer in der Datei) hinzu.In C#, add the code in the BindingTest namespace (before the final closing parenthesis in the file). In Visual Basic können Sie einfach die neue Klasse hinzufügen.In Visual Basic, just add the new class.

    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“ (null) als Standardelementanzahl mithilfe des PropertyMetadata-Objekts festgelegt.This code sets a value of 0 as the default item count by using the PropertyMetadata object.

  5. Klicken Sie im Menü Datei auf die Option Erstellen > Projektmappe erstellen.On the File menu, choose Build > Build Solution.

So binden Sie die ItemCount-Eigenschaft an ein TextBlock-SteuerelementTo bind the ItemCount property to a TextBlock control

  1. Öffnen Sie im Projektmappen-Explorer das Kontextmenü für MainWindow.xaml, und wählen Sie Ansicht-Designer aus.In Solution Explorer, open the shortcut menu for MainWindow.xaml and choose View Designer.

  2. Klicken Sie in der Toolbox auf ein Raster-Steuerelement, um es dem Formular hinzuzufügen.In the Toolbox, choose a Grid control and add it to the form.

  3. Wenn Sie Grid ausgewählt haben, klicken Sie im Eigenschaftenfenster auf Neu neben der DataContext-Eigenschaft.With the Grid selected, in the Properties window, choose the New button next to the DataContext property.

  4. Vergewissern Sie sich, dass im Dialogfeld Objekt auswählen das Kontrollkästchen Alle Assemblys anzeigen deaktiviert ist, wählen Sie dann ShoppingCart unter dem BindingTest-Namespace aus, und klicken Sie anschließend auf die Schaltfläche OK.In the Select Object dialog box, make sure that Show all assemblies checkbox is cleared, choose ShoppingCart under the BindingTest namespace, and then choose the OK button.

    Die folgende Abbildung zeigt das Dialogfeld Objekt auswählen mit der ausgewählten Option ShoppingCart.The following illustration shows the Select Object dialog box with ShoppingCart selected.

    Dialogfeld „Objekt auswählen“

  5. Wählen Sie in der Toolbox ein TextBlock-Steuerelement aus, um es dem Formular hinzuzufügen.In the Toolbox, choose a TextBlock control to add it to the form.

  6. Wenn Sie das TextBlock-Steuerelement ausgewählt haben, wählen Sie im Eigenschaftenfenster den Eigenschaftenmarker rechts neben der Text-Eigenschaft aus, und klicken anschließend auf Datenbindung erstellen.With the TextBlock control selected, in the Properties window, choose the property marker to the right of the Text property, and then choose Create Data Binding. (Der Eigenschaftenmarker sieht wie ein kleines Feld aus.)(The property marker looks like a small box.)

  7. Wählen Sie im Dialogfeld „Datenbindung erstellen“ im Feld Pfad die ItemCount: (int32)-Eigenschaft aus, und klicken Sie dann auf OK.In the Create Data Binding dialog box, in the Path box, choose the ItemCount : (int32) property and then choose the OK button.

    Die folgende Abbildung zeigt das Dialogfeld Datenbindung erstellen, wobei die Eigenschaft ItemCount ausgewählt ist.The following illustration shows the Create Data Binding dialog box with the ItemCount property selected.

    Dialogfeld „Datenbindung erstellen“

  8. Drücken Sie F5, um die App auszuführen.Press F5 to run the app.

    Das TextBlock-Steuerelement sollte den Standardwert 0 als Text anzeigen.The TextBlock control should show the default value of 0 as text.

Siehe auchSee also