Verwenden von Datenbindungen in XAML

Sie können Datenbindungen entweder im Code oder in XAML mithilfe von Markuperweiterungen deklarieren. In dieser Einheit wird letzteres erläutert, da es sich um die am häufigsten verwendete Methode zum Erstellen von Bindungen handelt. 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:

• Quelle: 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 Steuerelemente, die in .NET MAUI bereitgestellt werden, leiten von BindableObject ab, und die meisten ihrer Eigenschaften sind vom Typ BindableProperties.

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

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}}" />
  

Das verbindliche Ziel lautet:

• 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:

Das typische Szenario zum Binden von Steuerelementen aneinander ist, wenn ein Steuerelement – in der Regel ein Sammlungssteuerelement wie ein CollectionView oder CarouselView– ein ausgewähltes Element aufweist, das Sie als Datenquelle verwenden möchten. Im Beispiel einer Seite, die das Wetter darstellt, kann ein Element (CollectionView) eine fünftägige Vorhersage präsentieren. 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 einen einzelnen Datenpunkt aus einer Quelle präsentieren, auch wenn es passieren kann. 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 Bindung Source ist optional. Eine Bindung, bei der Source nicht gesetzt ist, durchsucht automatisch den XAML-Visual-Tree nach einem BindingContext, das entweder im XAML festgelegt oder durch Code einem übergeordneten Element zugewiesen wird. Bindungen werden nach dem folgenden Muster ausgewertet:

1. Wenn die Bindung eine Quelle (Source) definiert, wird diese Quelle verwendet und die Suche beendet. Die Bindung (Path) wird auf Source angewendet, um einen Wert zu erhalten. Wenn Source nicht festgelegt ist, beginnt die Suche nach einer Bindungsquelle.

2. Die Suche beginnt im Zielobjekt selbst. Wenn das Zielobjekt (BindingContext) nicht null ist, wird die Suche beendet, und der Pfad der Bindung (Path) wird auf BindingContext angewendet, um einen Wert abzurufen. Wenn BindingContext NULL ist, wird die Suche fortgesetzt.

3. 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ültiges BindingContext gefunden wurde, hat die Bindung nichts, woran sie binden kann, und ändert nichts.

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.