Oefening: code vervangen door .NET MAUI-bindingen

10 minuten

In deze oefening converteert u een app die gebruikmaakt van gebeurtenissen en code-behind naar een app die voornamelijk gegevensbinding gebruikt. De voorbeeld-app is een app voor weersvoorspelling waarin het weer voor de dag wordt weergegeven.

Open de startersoplossing

Kloon of download de oefeningsopslagplaats vanuit GitHub.

Notitie

Het is raadzaam om de inhoud van de oefening te klonen of te downloaden naar een kort mappad, zoals C:\dev, om te voorkomen dat door de build gegenereerde bestanden de maximale padlengte overschrijden.
Open de WeatherClient.sln-oplossing vanuit de beginmap met behulp van Visual Studio of deze map in Visual Studio Code.
Bouw het project en voer het uit om ervoor te zorgen dat het werkt. Op het scherm dat wordt weergegeven, ziet u enkele lege weersgegevens. Druk op de knop Vernieuwen en u ziet de update van de weergegevens.

Ter referentie volgt een samenvatting van de klassen en bestanden waarmee u in deze oefening gaat werken.

Bestand	Beschrijving
MainPage.xaml	Hiermee definieert u de gebruikersinterface en logica voor de eerste pagina. Het XAML-bestand definieert de gebruikersinterface met behulp van markeringen.
MainPage.xaml.cs	Hiermee definieert u de gebruikersinterface en logica voor de eerste pagina. Het bijbehorende code-behind-bestand dat de code bevat die is gerelateerd aan de gebruikersinterface die is gedefinieerd door MainPage.xaml.
Services\WeatherService.cs	Deze klasse simuleert een weerrapportageservice. Het bevat één methode met de naam `GetWeather` die een `WeatherData` type retourneert.
Modellen\WeatherData.cs	Bevat de weergegevens. Dit is een eenvoudig recordtype dat de temperatuur, neerslag, vochtigheid, wind en conditie van de dag levert.
Modellen\WeatherType.cs	Een opsomming van de weersomstandigheden, zonnig of bewolkt.

De bindingscontext instellen

U moet de code achter de gebeurtenis-handler van de knop Vernieuwen bewerken. De code haalt momenteel de weergegevens op en werkt de besturingselementen rechtstreeks bij. Haal in plaats daarvan de weergegevens op en stel deze in als de bindingscontext voor de pagina.

Open het MainPage.xaml.cs-codebestand .
Controleer de btnRefresh_Clicked methode. Met deze methode worden de volgende stappen uitgevoerd:
- Hiermee schakelt u de knop uit en schakelt u de "bezet" spinner in.
- Hiermee haalt u de weersvoorspelling van de weerservice op.
- Hiermee worden de besturingselementen op de pagina bijgewerkt met de weergegevens.
- Hiermee schakelt u de knop in en schakelt u de "bezet" spinner uit.

Verwijder de code waarmee de besturingselementen worden bijgewerkt met gegevens. Uw gebeurteniscode moet eruitzien als het volgende codefragment:

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;
}

In plaats van het resultaat van de methode van de service GetWeather toe te wijzen aan een variabele, wijst u deze toe aan de BindingContext pagina:

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;
}

Voer het project uit. Wanneer u op de knop Vernieuwen drukt en de weerservice de gegevens retourneert, worden geen van de besturingselementen bijgewerkt met de weersvoorspelling. U lost deze fout op in de volgende sectie.

Bindingen maken in XAML

Nu de code-behind de bindingscontext voor de pagina instelt, kunt u de bindingen toevoegen aan de besturingselementen om de gegevens in de context te gebruiken.

Open het bestand MainPage.xaml .

Zoek het binnenste Grid met alle Label besturingselementen.

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

Voeg bindingen toe aan elk van de benoemde Label besturingselementen. Er zijn vier.

De Label.Text eigenschap moet de waarde ervan wijzigen in de {Binding PROPERTY_NAME} syntaxis waar PROPERTY_NAME een eigenschap is van het Models.WeatherData type dat is gedefinieerd in Models\WeatherData.cs. Onthoud dat dit type het gegevenstype is dat wordt geretourneerd door de weerservice.

De naam lblWind (het laatste label in het raster) moet Text er bijvoorbeeld Label uitzien als de volgende code:
```
<Label x:Name="lblWind" Grid.Row="4" Grid.Column="1" Text="{Binding Wind}" />
```
Verwijder alle kenmerken in de <Grid> besturingselementen waarin alle x:Name="..." weerdetails worden weergegeven.

De namen zijn niet vereist nu er niet naar de besturingselementen wordt verwezen in de code-behind.

Controleer of uw XAML-bindingen overeenkomen met het volgende codefragment:

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

Voer de app uit en druk op de knop Vernieuwen . De app werkt bijna als het origineel.

U ziet dat het pictogram voor de voorwaarde niet wordt bijgewerkt van het vraagteken naar een zonne- of wolkpictogram. Waarom verandert het pictogram niet? Omdat het pictogram een afbeeldingsresource is die is gekozen in code op basis van de WeatherData.Condition opsommingswaarde. De opsommingswaarde kan niet worden gewijzigd in een afbeeldingsresource zonder extra inspanning. Dit is opgelost in de volgende oefening nadat u meer hebt geleerd over bindingen.

Oefening: code vervangen door .NET MAUI-bindingen

Open de startersoplossing

De bindingscontext instellen

Bindingen maken in XAML

Feedback