Übung: Ersetzen von Code durch .NET MAUI-Bindungen

10 Minuten

In dieser Übung wandeln Sie eine App, die Ereignisse und Code-Behind verwendet, in eine App um, die hauptsächlich Datenbindung nutzt. Die Beispiel-App ist eine Wettervorhersage-App, die das Wetter für den Tag anzeigt.

Öffnen der Startprojektmappe

Klonen Sie das Übungsrepository, oder laden Sie es aus GitHub herunter.

Hinweis

Es empfiehlt sich, den Übungsinhalt in einen kurzen Ordnerpfad wie z. B. „C:\dev“ zu klonen oder herunterzuladen. So vermeiden Sie, dass vom Build generierte Dateien die maximale Pfadlänge überschreiten.
Öffnen Sie die WeatherClient.sln Projektmappe aus dem Startordner mithilfe von Visual Studio oder durch Öffnen des Startordners in Visual Studio Code.
Erstellen Sie das Projekt, und führen Sie es aus, um sicherzustellen, dass es funktioniert. Auf dem angezeigten Bildschirm werden einige leere Wetterdetails angezeigt. Geben Sie eine Postleitzahl ein, und wählen Sie die Schaltfläche " Aktualisieren " aus, und Sie sehen die Aktualisierung der Wetterdetails.

Zu Referenzzwecken finden Sie hier eine Zusammenfassung der Klassen und Dateien, mit denen Sie in dieser Übung arbeiten werden.

Datei	BESCHREIBUNG
MainPage.xaml	Definiert die Benutzeroberfläche und Logik für die Startseite. Die XAML-Datei definiert die Benutzeroberfläche mithilfe von Markup.
MainPage.xaml.cs	Definiert die Benutzeroberfläche und Logik für die Startseite. Die zugeordnete CodeBehind-Datei, die den Code für die durch MainPage.xaml definierte Benutzeroberfläche enthält.
Services\WeatherService.cs	Diese Klasse simuliert einen Wetterberichtsdienst. Sie enthält eine einzelne Methode mit dem Namen `GetWeather`, die den Typ `WeatherData` zurückgibt.
Models\WeatherData.cs	Enthält die Wetterdaten. Dies ist ein einfacher Datensatztyp, der tagesaktuelle Daten für Temperatur, Niederschlag, Luftfeuchtigkeit, Wind und Wetterlage bereitstellt.
Models\WeatherType.cs	Angabe der Wetterlage (sonnig oder bewölkt).

Festlegen des Bindungskontexts

Sie müssen den CodeBehind für den Click-Ereignishandler der Schaltfläche Aktualisieren bearbeiten. Der Code ruft derzeit die Wetterdaten ab und aktualisiert die Steuerelemente direkt. Rufen Sie stattdessen die Wetterdaten ab, und legen Sie sie als Bindungskontext für die Seite fest.

Öffnen Sie die Codedatei MainPage.xaml.cs.
Überprüfen Sie die Methode btnRefresh_Clicked. Diese Methode führt die folgenden Schritte aus:
- Deaktiviert die Schaltfläche und aktiviert den Wartekreisel „Beschäftigt“.
- Ruft die Wettervorhersage vom Wetterdienst ab.
- Aktualisiert die Steuerelemente auf der Seite mit den Wetterinformationen.
- Aktiviert die Schaltfläche und deaktiviert den Wartekreisel „Beschäftigt“.

Entfernen Sie den Code, der die Steuerelemente mit Daten aktualisiert. Der Ereigniscode sollte wie der folgende Codeschnipsel aussehen:

private async void btnRefresh_Clicked(object sender, EventArgs e)
{
    btnRefresh.IsEnabled = false;
    actIsBusy.IsRunning = true;

    Models.WeatherData weatherData = await Services.WeatherServer.GetWeather(txtPostalCode.Text);

    btnRefresh.IsEnabled = true;
    actIsBusy.IsRunning = false;
}

Anstatt das Ergebnis der GetWeather-Methode des Diensts einer Variablen zuzuweisen, weisen Sie es dem BindingContext der Seite zu:

private async void btnRefresh_Clicked(object sender, EventArgs e)
{
    btnRefresh.IsEnabled = false;
    actIsBusy.IsRunning = true;

    BindingContext = await Services.WeatherServer.GetWeather(txtPostalCode.Text);

    btnRefresh.IsEnabled = true;
    actIsBusy.IsRunning = false;
}

Führen Sie das Projekt aus. Beachten Sie, dass beim Auswählen der Schaltfläche " Aktualisieren " und der Wetterdienst die Daten zurückgibt, keine der Steuerelemente mit der Wettervorhersage aktualisiert wird. Sie beheben diesen Fehler im nächsten Abschnitt.

Erstellen von Bindungen in XAML

Der CodeBehind legt nun den Bindungskontext für die Seite fest. Sie können jetzt den Steuerelementen die Bindungen hinzufügen, um die Daten im Kontext zu verwenden.

Öffnen Sie die Datei MainPage.xaml.cs.

Suchen Sie das innere Grid-Element, das alle Label-Steuerelemente enthält.

<Grid Grid.Row="2" RowDefinitions="Auto, Auto, Auto, Auto, Auto" ColumnDefinitions="Auto, Auto" Margin="0,5,0,0">
    <Label Grid.Row="0" Grid.Column="0" Text="Condition" VerticalOptions="Center" />
    <Image x:Name="imgCondition" Grid.Row="0" Grid.Column="1" HeightRequest="25" WidthRequest="25" Source="question.png" HorizontalOptions="Start" />
    <Label Grid.Row="1" Grid.Column="0" Text="Temperature" Margin="0,0,20,0" />
    <Label x:Name="lblTemperature" Grid.Row="1" Grid.Column="1" Text="0" />
    <Label Grid.Row="2" Grid.Column="0" Text="Humidity" Margin="0,0,20,0" />
    <Label x:Name="lblHumidity" Grid.Row="2" Grid.Column="1" Text="0" />
    <Label Grid.Row="3" Grid.Column="0" Text="Precipitation" Margin="0,0,20,0" />
    <Label x:Name="lblPrecipitation" Grid.Row="3" Grid.Column="1" Text="0" />
    <Label Grid.Row="4" Grid.Column="0" Text="Wind" Margin="0,0,20,0" />
    <Label x:Name="lblWind" Grid.Row="4" Grid.Column="1" Text="0" />
</Grid>

Fügen Sie Bindungen zu jedem der benannten Label-Steuerelemente hinzu. Es gibt vier.

Für die Eigenschaft Label.Text sollte der Wert in die {Binding PROPERTY_NAME}-Syntax geändert werden. Dabei handelt es sich bei PROPERTY_NAME um eine Eigenschaft des in Models.WeatherData definierten -Typs. Denken Sie daran, dass dieser Typ der vom Wetterdienst zurückgegebene Datentyp ist.

Beispielsweise sollte das Element Label mit dem Namen lblWind (das letzte Label im Raster) die Eigenschaft Text aufweisen, wie der folgende Code zeigt:
```
<Label x:Name="lblWind" Grid.Row="4" Grid.Column="1" Text="{Binding Wind}" />
```
Entfernen Sie im <Grid> der Steuerelemente, in dem alle Wetterdetails aufgeführt sind, alle x:Name="..."-Attribute.

Die Namen sind jetzt nicht erforderlich, da im CodeBehind nicht auf die Steuerelemente verwiesen wird.

Stellen Sie sicher, dass Ihre XAML-Bindungen mit dem folgenden Codeschnipsel übereinstimmen:

<Grid Grid.Row="2" RowDefinitions="Auto, Auto, Auto, Auto, Auto" ColumnDefinitions="Auto, Auto" Margin="0,5,0,0">
    <Label Grid.Row="0" Grid.Column="0" Text="Condition" VerticalOptions="Center" />
    <Image Grid.Row="0" Grid.Column="1" HeightRequest="25" WidthRequest="25" Source="question.png" HorizontalOptions="Start" />
    <Label Grid.Row="1" Grid.Column="0" Text="Temperature" Margin="0,0,20,0" />
    <Label Grid.Row="1" Grid.Column="1" Text="{Binding Temperature}" />
    <Label Grid.Row="2" Grid.Column="0" Text="Humidity" Margin="0,0,20,0" />
    <Label Grid.Row="2" Grid.Column="1" Text="{Binding Humidity}" />
    <Label Grid.Row="3" Grid.Column="0" Text="Precipitation" Margin="0,0,20,0" />
    <Label Grid.Row="3" Grid.Column="1" Text="{Binding Precipitation}" />
    <Label Grid.Row="4" Grid.Column="0" Text="Wind" Margin="0,0,20,0" />
    <Label Grid.Row="4" Grid.Column="1" Text="{Binding Wind}" />
</Grid>

Führen Sie die App aus, und wählen Sie die Schaltfläche " Aktualisieren" aus. Die App funktioniert fast wie das Original.

Beachten Sie, dass das Symbol für die Wetterlage nicht vom Fragezeichen auf ein Sonnen- oder Wolkensymbol aktualisiert wird. Warum ändert sich das Symbol nicht? Das liegt daran, dass sich bei dem Symbol um eine Bildressource handelt, die basierend auf dem WeatherData.Condition-Enumerationswert im Code ausgewählt wurde. Der Enumerationswert kann nicht ohne zusätzlichen Aufwand in eine Bildressource geändert werden. Sie beheben dies in der nächsten Übung, nachdem Sie mehr über Bindungen erfahren haben.

Feedback

War diese Seite hilfreich?