Vergleichen einer ereignisgesteuerten Benutzeroberfläche mit einer datengebundenen Benutzeroberfläche
- 6 Minuten
Eine ereignisgesteuerte Benutzeroberfläche ist für die Ereignisse konzipiert, die ein Steuerelement verfügbar macht. Diese Ereignisse können dem Ereignishandlercode zugeordnet werden, der aufgerufen wird, wenn das Ereignis ausgelöst wird. Nehmen wir beispielsweise an, Sie haben eine Schaltfläche, die beim Klicken einen lang andauernden Vorgang ausführt. Der dem Ereignis Clicked zugewiesene Ereignishandler kann den Vorgang starten und dann die Eigenschaft IsEnabled der Schaltfläche auf false festlegen. Dadurch wird verhindert, dass erneut auf die Schaltfläche auf geklickt wird, während der Vorgang ausgeführt wird.
Eine datengebundene Benutzeroberfläche nutzt Datenbindung, um Daten darzustellen und mit Daten zu interagieren. Eigenschaften von Steuerelementen sind an die Eigenschaften des Datenobjekts gebunden, und diese Bindungen können Änderungen an den Eigenschaften erkennen. Betrachten Sie anhand des vorherigen Beispiels die Schaltfläche, die einen zeitintensiven Vorgang ausführt. Anstatt die Schaltfläche im CodeBehind zu deaktivieren, ist die Eigenschaft IsEnabled an die Eigenschaft IsBusy des Datenobjekts gebunden. Wenn das Datenobjekt "beschäftigt" wird, wird der aktivierte Zustand der Schaltfläche automatisch entsprechend geändert.
Vor- und Nachteile der Verwendung von Ereignissen und CodeBehind
Die Verwendung des Ereignishandlers des Steuerelements mit CodeBehind ist eine schnelle und bequeme Möglichkeit zum Entwerfen der App-Logik für die Benutzeroberfläche. Sie verwenden Code zum Aufrufen von Diensten, um Daten abzurufen, Vorgänge für diese Daten auszuführen und mit den Steuerelementen auf der Seite zu interagieren. Der Code wird verwendet, um die Benutzeroberfläche und die Daten zu synchronisieren.
Betrachten Sie das Beispiel einer Wetterdienst-App. Das folgende XAML-Fragment enthält eine einfache Benutzeroberflächenschaltfläche, die der Benutzer auswählt, um die aktuellen Daten abzurufen und die Benutzeroberfläche mit der Luftfeuchtigkeit zu aktualisieren.
<VerticalStackLayout Margin="10">
<HorizontalStackLayout Spacing="20">
<Label Text="Postal Code:" VerticalOptions="Center" />
<Entry x:Name="PostalCode" WidthRequest="100" />
<Button x:Name="RefreshWeatherButton" Text="Refresh" WidthRequest="200" Clicked="RefreshWeatherButton_Clicked" />
</HorizontalStackLayout>
<Label x:Name="Humidity" Text="Humidity: ?" />
</VerticalStackLayout>
In diesem Beispiel gibt es drei benannte Steuerelemente:
Entry-Steuerelement mit dem Namen PostalCodeButton-Steuerelement mit dem Namen RefreshWeatherButton- Steuerelement
Labelnamens Humidity.
Für RefreshWeatherButton ist ein Ereignishandler für das Clicked-Ereignis deklariert. Wenn auf die Schaltfläche geklickt wird, fragt der Ereignishandler die aktuelle Wettervorhersage von einem Wetterdienst ab. Dazu verwendet er die in das Eingabesteuerelement PostalCode eingegebenen Daten und legt den Text der Humidity-Bezeichnung auf die aktuelle Luftfeuchtigkeit fest.
private void RefreshWeatherButton_Clicked(object sender, EventArgs e)
{
WeatherService.Location = PostalCode.Text;
WeatherService.Refresh();
Humidity.Text = $"Humidity: {WeatherService.Humidity}";
}
In diesem einzelnen Ereignishandler sind drei Steuerelemente eng miteinander und mit den Daten über den CodeBehind verknüpft.
Dieses Design eignet sich hervorragend für kleine Benutzeroberflächen, aber sobald die Benutzeroberfläche komplex wird, kann die Verwaltung eines eng verknüpften CodeBehind problematisch werden. Wenn Sie ein Steuerelement löschen oder ändern, müssen Sie den Code bereinigen, der diese Benutzeroberflächensteuerelemente verwendet. Dies kann den Ereignishandler beinhalten. Wenn Sie sich dafür entscheiden, die Benutzeroberfläche neu zu gestalten, haben Sie auch viel Code, umzugestalten. Und wenn sich die zugrunde liegende Datenstruktur ändert, müssen Sie den Code der einzelnen Benutzeroberflächen bearbeiten, um die Synchronisierung sicherzustellen.
Die Datenbindung ist hilfreich.
Sie können Datenbindungen in XAML oder Code implementieren, aber sie sind in XAML viel häufiger, wo sie helfen, die CodeBehind-Dateigröße zu reduzieren. Wenn Sie prozeduralen Code in Ereignishandlern durch deklarativen Code oder Markup ersetzen, wird die App vereinfacht und geklärt. Da für die Bindungen kein CodeBehind erforderlich ist, können Sie die Benutzeroberfläche ganz einfach erstellen, ändern oder neu gestalten, um sie an die Darstellung der Daten anzupassen.
Wir verwenden hier das gleiche Beispiel wie im vorherigen Abschnitt, aktualisieren es jedoch so, dass Datenbindung verwendet wird:
<VerticalStackLayout Margin="10">
<HorizontalStackLayout Spacing="20">
<Label Text="Postal Code:" VerticalOptions="Center" />
<Entry Text="{Binding Location, Mode=OneWayToSource}" WidthRequest="100" />
<Button Text="Refresh" Command="{Binding RefreshWeather}" WidthRequest="200" />
</HorizontalStackLayout>
<Label Text="{Binding Humidity}" />
</VerticalStackLayout>
Sie können die Eigenschaften erkennen, die datengebunden sind. Sie verwenden die XAML-Erweiterungssyntax {Binding ...} für den Wert der Eigenschaft. Machen Sie sich noch keine Gedanken über die Besonderheiten; wir behandeln dies später in diesem Modul.
Die gleichen drei Steuerelemente werden im XAML-Code deklariert, aber keiner davon wird benannt, da kein Name erforderlich ist:
Entrycontrol: Die Eigenschaft dieses SteuerelementsTextist an eine Eigenschaft mit dem NamenLocationgebunden.Buttoncontrol: Die Eigenschaft derCommandSchaltfläche ist an eine Eigenschaft mit dem NamenRefreshWeathergebunden.Commandist eine Eigenschaft für die Schaltfläche, die beim Klicken auf die Schaltfläche Code aufruft. Es handelt sich um eine Alternative zum EreignisClicked, das in der Datenbindung verwendet wird.Labelcontrol: DieseTextEigenschaft ist an eine Eigenschaft mit dem NamenHumiditygebunden.
Auf dieser einfachen Benutzeroberfläche wird der gesamte CodeBehind entfernt. Das Entfernen des gesamten CodeBehind ist nicht der Sinn der Datenbindung, auch wenn dies möglich ist. Der CodeBehind hat nach wie vor seine Berechtigung. In welchem Umfang Sie Datenbindungen implementieren, liegt bei Ihnen.
Jetzt ist die Benutzeroberfläche lose mit einem Datenobjekt gekoppelt. Warum ist es lose statt eng verknüpft? Aufgrund der Art und Weise, wie Bindungen ausgewertet werden. Jedes Steuerelement verfügt über eine Eigenschaft vom Typ BindingContext. Wenn der Kontext nicht festgelegt ist, wird der Kontext des übergeordneten Steuerelements verwendet usw., bis der Stamm des XAML-Codes ausgewertet wird. Beim Auswerten von Bindungen wird die Objektinstanz des Kontexts auf die erforderlichen Eigenschaften überprüft, etwa die Text-Bindung des Label-Steuerelements an die Eigenschaft Humidity des Kontexts. Wenn Humidity im Kontext nicht vorhanden ist, geschieht nichts.
Da die Benutzeroberfläche lose gekoppelt ist, können Sie die Benutzeroberfläche neu gestalten, ohne sich Gedanken über eine Beschädigung des Codes zu machen. Sie können jedoch die Funktionalität beeinträchtigen. Sie können beispielsweise die Schaltfläche löschen, und die App wird weiterhin kompiliert und ausgeführt. Sie haben aber keine Möglichkeit, das Wetter zu aktualisieren. Andererseits könnten Sie die Steuerelemente Entry und Button durch das einzelne SearchBar-Steuerelement ersetzen. Mit diesem Steuerelement können Sie Text eingeben und einen Befehl aufrufen.
<SearchBar Text="{Binding Location, Mode=OneWayToSource}" SearchCommand="{Binding RefreshWeather}" />
Wie Sie sehen können, kann die Verwendung der Datenbindung im Benutzeroberflächendesign Ihnen helfen, Ihre Benutzeroberfläche ohne großen Aufwand zu entwickeln und zu ändern. Die Benutzeroberfläche wird automatisch mit den Daten synchronisiert, und die App-Logik wird von der Benutzeroberfläche getrennt.