Vergleichen einer ereignisgesteuerten Benutzeroberfläche mit einer datengebundenen Benutzeroberfläche
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 bei der Auslösung des Ereignisses aufgerufen wird. Beispiel: Sie haben eine Schaltfläche, die einen zeitintensiven Vorgang ausgeführt wird, wenn auf sie geklickt wird. 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“ ist, 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 RefreshWeatherButtonLabel-Steuerelement mit dem Namen 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, müssen Sie auch viel Code umgestalten. 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.
Datenbindungen können in XAML oder Code implementiert werden, sind jedoch in XAML wesentlich gängiger. Dort helfen Sie dabei, die Größe der CodeBehind-Datei zu verringern. Durch das Ersetzen von prozeduralem Code in Ereignishandlern durch deklarativen Code oder Markup wird die App vereinfacht und klarer. 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 Einzelheiten. Diese werden später in diesem Modul behandelt.
Die gleichen drei Steuerelemente werden im XAML-Code deklariert, aber keins von ihnen ist benannt, da kein Name erforderlich ist:
Entry-SteuerelementDie Eigenschaft
Textdieses Steuerelements ist an eine Eigenschaft mit dem NamenLocationgebunden.Button-Steuerelement:Die Eigenschaft
Commandder Schaltflä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.Label-Steuerelement:Die Eigenschaft
Textist 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 normalerweise 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 verknüpft. 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 verknüpft ist, können Sie die Benutzeroberfläche neu gestalten, ohne sich Sorgen machen zu müssen, dass der Code beschädigt wird. 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 ist von der Benutzeroberfläche getrennt.