Verwenden von Datenbindungen in XAML

6 Minuten

Datenbindungen können entweder im Code oder in XAML mithilfe von Markuperweiterungen deklariert werden. In dieser Lerneinheit wird Letzteres erläutert, da es die am häufigsten verwendete Methode zum Erstellen von Bindungen ist. Es gibt eine Reihe von Gründen, XAML zu bevorzugen. Erstens betrachten die meisten Benutzer Bindungen als Teil ihres Benutzeroberflächencodes, da die Bindungen Daten für die Anzeige der Benutzeroberfläche abrufen. Zweitens ist eine Markuperweiterung namens Binding verfügbar, die dies vereinfacht.

Was sind Datenbindungen?

Eine Bindung verbindet zwei Eigenschaften. Eine Eigenschaft bezieht sich auf die Benutzeroberfläche und die andere auf Ihr Datenmodellobjekt. Wenn sich der Wert einer der beiden Eigenschaften ändert, kann das Bindungsobjekt die andere aktualisieren. Mit anderen Worten: Bindungen sind Zwischenobjekte, die Ihre Benutzeroberfläche und Daten synchronisieren. Wir verwenden die Begriffe Quelle und Ziel, um die beiden beteiligten Objekte zu identifizieren:

Abrufen: Eine Quelle kann ein Objekt eines beliebigen Typs sein. In der Praxis verwenden Sie in der Regel ein Datenobjekt als Quelle. Sie müssen die Eigenschaft für dieses Quellobjekt identifizieren, um an der Bindung teilzunehmen. Sie identifizieren die Eigenschaft, indem Sie die Eigenschaft Path in der Bindung festlegen.
Ziel: Das Ziel ist eine Eigenschaft, die mithilfe einer speziellen als BindableProperty bezeichneten Eigenschaft implementiert wird. Das Objekt mit BindableProperty muss von BindableObject abgeleitet werden. Alle in .NET MAUI bereitgestellten Steuerelemente werden von BindableObjectabgeleitet, und die meisten Eigenschaften sind vom Typ BindableProperties.

Das folgende Diagramm veranschaulicht, inwiefern eine Bindung ein Zwischenobjekt zwischen zwei Eigenschaften ist:

Diagramm: Einbindung als Vermittlung zwischen einer Quellobjekteigenschaft und einer bindbaren Zielobjekteigenschaft

Erstellen einer Datenbindung in XAML

Sehen wir uns eine in XAML mithilfe der {Binding}-Markuperweiterung erstellte einfache Bindung an. Sie bindet die WeatherService.Humidity-Eigenschaft der Quelle an die Text-Eigenschaft des Benutzeroberflächen-Steuerelements.

<VerticalStackLayout Margin="10">
    <VerticalStackLayout.Resources>
        <ResourceDictionary>
            <services:WeatherService x:Key="myWeatherService" />
        </ResourceDictionary>
    </VerticalStackLayout.Resources>

    <Label Text="{Binding Path=Humidity, Source={StaticResource myWeatherService}}" />
</VerticalStackLayout>

Bindungsquelle:

Eine Objektinstanz vom Typ WeatherService. Auf die Instanz wird über die {StaticResource ...}-XAML-Erweiterung verwiesen, die auf ein Objekt im Ressourcenverzeichnis des Stapellayouts verweist.
Path verweist auf eine Eigenschaft namens Humidity für den Typ WeatherService.

Path ist der erste unbenannte Parameter in der {Binding}-Syntax, und die Path=-Syntax kann weggelassen werden. Diese beiden Bindungen sind gleichwertig:
```
<Label Text="{Binding Path=Humidity, Source={StaticResource myWeatherService}}" />
<Label Text="{Binding Humidity, Source={StaticResource myWeatherService}}" />
```

Bindungsziel:

Das Label-Steuerelement.
Die Text-Eigenschaft des Steuerelements.

Wenn die Benutzeroberfläche angezeigt wird, erstellt die {Binding}-XAML-Erweiterung eine Bindung zwischen WeatherService und Label. Die Bindung liest den Wert der WeatherService.Humidity-Eigenschaft in die Label.Text-Eigenschaft.

Verwenden eines anderen Steuerelements als Bindungsquelle

Ein nützliches Feature der Bindung ist die Möglichkeit, eine Bindung für andere Steuerelemente zu erstellen. Der folgende XAML-Code dient zur Veranschaulichung:

<VerticalStackLayout HorizontalOptions="Center" VerticalOptions="Center">
    <Label x:Name="TargetLabel" Text="TEXT TO ROTATE" BackgroundColor="Yellow" />
    <Slider WidthRequest="100" Maximum="360"
            Value="{Binding Rotation, Mode=OneWayToSource, Source={x:Reference TargetLabel}}" />
</VerticalStackLayout>

Die Eigenschaft Slider.Value ist an die Eigenschaft Label.Rotation gebunden, aber anders als zuvor erläutert. Diese Eigenschaft verwendet den Bindungsmodus OneWayToSource, der den typischen Bindungsmechanismus umkehrt. Hier aktualisiert die Quelle nicht das Ziel, sondern OneWayToSource aktualisiert die Quelle, wenn sich das Ziel ändert. In diesem Beispiel wird beim Verschieben des Schiebereglers die Drehung der Bezeichnung basierend auf dem Wert des Schiebereglers aktualisiert, wie in der folgenden Animation dargestellt:

Ein animiertes Bild eines Schieberegler-Steuerelements, das mit einer Maus gezogen wird. Wenn der Schieberegler bewegt wird, wird ein Textteil gedreht, um der Position des Schiebereglers zu entsprechen.

Das typische Szenario für das Binden von Steuerelementen ist, wenn ein Steuerelement (in der Regel ein Auflistungssteuerelement wie ListView oder CarouselView) ein ausgewähltes Element aufweist, das Sie als Datenquelle verwenden möchten. Im Beispiel einer Seite, auf der die Wettervorhersage angezeigt wird, gibt eine Listenansicht (ListView) möglicherweise eine Vorhersage für die nächsten fünf Tage an. Wenn der Benutzer einen Tag in der Liste auswählt, werden die Details dieser Wettervorhersage in anderen Steuerelementen angezeigt. Wenn der Benutzer einen anderen Tag auswählt, werden die anderen Steuerelemente erneut mit den Details des ausgewählten Tags aktualisiert.

Verwenden der gleichen Quelle für mehrere Bindungen

Im vorherigen Beispiel wurde die Verwendung einer statischen Ressource als Quelle für eine einzelne Bindung veranschaulicht. Diese Quelle kann in mehreren Bindungen verwendet werden. Hier sehen Sie ein Beispiel für das Deklarieren einer Bindung für drei verschiedene Steuerelemente, die alle an dasselbe Objekt und dieselbe Eigenschaft Path gebunden sind, wobei einige die Eigenschaft Path weglassen:

<VerticalStackLayout Margin="10">
    <VerticalStackLayout.Resources>
        <vm:SimpleWeatherServiceObject x:Key="myWeatherService" />
    </VerticalStackLayout.Resources>
    <Entry Text="{Binding Humidity, Source={StaticResource myWeatherService}}" />
    <Label Text="{Binding Path=Humidity, Source={StaticResource myWeatherService}}" />
</VerticalStackLayout>

Sie müssen nicht dasselbe Path-Element verwenden, wenn Sie dasselbe Source-Element verwenden:

<VerticalStackLayout Margin="10">
    <VerticalStackLayout.Resources>
        <vm:SimpleWeatherServiceObject x:Key="myWeatherService" />
    </VerticalStackLayout.Resources>
    <Entry Text="{Binding Temperature, Source={StaticResource myWeatherService}}" />
    <Label Text="{Binding Path=Humidity, Source={StaticResource myWeatherService}}" />
</VerticalStackLayout>

Es kommt selten vor, dass Sie nur ein einzelnes Datenelement aus einer Quelle darstellen. In der Regel verfügen Sie über mehrere Steuerelemente, die verschiedene Datenelemente aus derselben Quelle verwenden. Diese Situation ist so häufig, dass die BindableObject-Klasse eine Eigenschaft mit dem Namen BindingContext hat, die als Quelle für die Datenbindung fungiert. Denken Sie daran, dass .NET MAUI-Steuerelemente von der BindableObject-Klasse erben, sodass die .NET MAUI-Steuerelemente über die Eigenschaft BindingContext verfügen.

Das Festlegen der Quelle (Source) der Bindung ist optional. Eine Bindung, für die Source nicht automatisch festgelegt wurde, durchsucht die visuelle XAML-Struktur nach einem Bindungskontext (BindingContext), der in XAML festgelegt oder durch Code einem übergeordneten Element zugewiesen wird. Bindungen werden nach dem folgenden Muster ausgewertet:

Wenn die Bindung eine Quelle (Source) definiert, wird diese Quelle verwendet und die Suche beendet. Der Pfad (Path) der Bindung wird auf Source angewendet, um einen Wert abzurufen. Wenn Source nicht festgelegt ist, beginnt die Suche nach einer Bindungsquelle.
Die Suche beginnt im Zielobjekt selbst. Wenn der Bindungskontext (BindingContext) des Zielobjekts nicht NULL ist, wird die Suche beendet, und der Pfad (Path) der Bindung wird auf BindingContext angewendet, um einen Wert abzurufen. Wenn BindingContext NULL ist, wird die Suche fortgesetzt.
Dieser Prozess wird fortgesetzt, bis er den XAML-Stamm erreicht. Die Suche endet, indem sie den Bindungskontext (BindingContext) des Stamms auf einen Wert ungleich NULL überprüft. Wenn kein gültiger Bindungskontext (BindingContext) gefunden wurde, kann die Bindung an kein Element gebunden werden und führt keine Aktion aus.

Es ist üblich, den Bindungskontext (BindingContext) auf der Ebene des Stammobjekts festzulegen, um ihn auf den gesamten XAML-Code anzuwenden.

Es gibt noch eine weitere nützliche Funktion, die erwähnenswert ist. Bindungen achten auf Änderungen am Objektverweis ihrer Quelle. Sie funktioniert sogar für Bindungen, die BindingContext als Quelle verwenden. Wenn Source oder BindingContext einem anderen Objekt zugewiesen wird, rufen die Bindungen den Daten aus der neuen Quelle ab und aktualisieren ihr Ziel.

Überprüfen Sie Ihr Wissen

Was gilt für das Quellobjekt in einer .NET MAUI-Bindung?

Kann ein beliebiger Typ sein.

Muss ein BindableObject-Element sein.

Muss eine Unterklasse von View sein.

Was gilt für die Zieleigenschaft in einer .NET MAUI-Bindung?

Kann eine beliebige öffentliche Eigenschaft sein.

Muss ein BindableProperty-Element sein.

Muss ein DependencyProperty-Element sein.

Wenn alle Bindungen für Steuerelemente innerhalb eines Bindungskontexts (Grid) das gleiche Quellobjekt verwenden, welche Strategie ist dann am sichersten, um das Quellobjekt nur ein Mal festzulegen?

Legen Sie die BindingContext-Eigenschaft von Page fest.

Legen Sie die Source-Eigenschaft von Page fest.

Legen Sie die BindingContext-Eigenschaft von Grid fest.