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

10 Minuten

In dieser Übung konvertieren Sie eine App, die Ereignisse und CodeBehind verwendet, in eine App, die hauptsächlich Datenbindung verwendet. 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 Lösung WeatherClient.sln im Start-Ordner, indem Sie Visual Studio oder diesen Ordner in Visual Studio Code verwenden.
Erstellen Sie das Projekt, und führen Sie es aus, um sicherzustellen, dass es funktioniert. Auf dem angezeigten Bildschirm werden einige leere Wetterdetails angezeigt. Wählen Sie die Schaltfläche Aktualisieren aus. Sie sehen, dass Wetterdetails aktualisiert wurden.

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.
- Ruft die Wettervorhersage vom Wetterdienst ab.
- Aktualisiert die Steuerelemente auf der Seite mit den Wetterinformationen.
- Aktiviert die Schaltfläche und deaktiviert den Wartekreisel.

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 Bindungskontext (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 Folgendes: Wenn Sie die Schaltfläche Aktualisieren auswählen und der Wetterdienst die Daten zurückgibt, wird kein Steuerelement mit der Wettervorhersage aktualisiert. 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 jedem der benannten Label-Steuerelemente Bindungen 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.cs definierten Models.WeatherData-Typs. Denken Sie daran, dass dieser Typ der vom Wetterdienst zurückgegebene Datentyp ist.

Beispielsweise sollte für die Bezeichnung (Label) mit dem Namen lblWind (die letzte Bezeichnung im Raster) die Eigenschaft Text wie im folgenden Code aussehen:
```
<Label x:Name="lblWind" Grid.Row="4" Grid.Column="1" Text="{Binding Wind}" />
```
Entfernen Sie im Raster (<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 ohne zusätzlichen Aufwand nicht in eine Bildressource geändert werden. Dies wird in der nächsten Übung behoben, nachdem Sie mehr über Bindungen erfahren haben.

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

Öffnen der Startprojektmappe

Festlegen des Bindungskontexts

Erstellen von Bindungen in XAML

Feedback