Ćwiczenie — zastępowanie kodu powiązaniami .NET MAUI

10 min

W tym ćwiczeniu przekonwertujesz aplikację, która używa zdarzeń i kodu-behind, na taką, która używa głównie powiązania danych. Przykładowa aplikacja to aplikacja prognozowania pogody, która wyświetla pogodę dla dnia.

Otwórz rozwiązanie startowe

Sklonuj lub pobierz repozytorium ćwiczenia z usługi GitHub.

Uwaga

Najlepiej jest pobrać lub sklonować zawartość ćwiczenia do krótkiej ścieżki folderu, na przykład C:\dev, aby uniknąć sytuacji, w której pliki wygenerowane podczas kompilacji przekroczą maksymalną długość ścieżki.
Otwórz rozwiązanie WeatherClient.sln z folderu startowego przy użyciu programu Visual Studio lub otwierając folder start w programie Visual Studio Code.
Skompiluj i uruchom projekt, aby upewnić się, że działa. Na wyświetlonym ekranie zobaczysz kilka pustych szczegółów pogodowych. Wprowadź kod pocztowy i wybierz przycisk Odśwież , a zobaczysz aktualizację szczegółów pogody.

Poniżej przedstawiono podsumowanie klas i plików, z którymi będziesz pracować w tym ćwiczeniu.

Plik	Opis
MainPage.xaml	Definiuje interfejs użytkownika i logikę dla strony początkowej. Plik XAML definiuje interfejs użytkownika przy użyciu znaczników.
MainPage.xaml.cs	Definiuje interfejs użytkownika i logikę dla strony początkowej. Skojarzony plik z kodem, który zawiera kod związany z interfejsem użytkownika zdefiniowanym w MainPage.xaml.
Usługi\WeatherService.cs	Ta klasa symuluje usługę raportowania pogody. Zawiera jedną metodę o nazwie `GetWeather`, która zwraca typ `WeatherData`.
Modele\WeatherData.cs	Zawiera dane pogodowe. Jest to prosty typ rekordu, który zapewnia temperaturę dnia, opady, wilgotność, wiatr i stan.
Modele\WeatherType.cs	Wyliczenie stanu pogodowego, słonecznego lub pochmurnego.

Ustawianie kontekstu powiązania

Musisz edytować kod związany z procedurą obsługi zdarzeń kliknięcia przycisku Odśwież . Kod pobiera obecnie dane pogodowe i aktualizuje kontrolki bezpośrednio. Zamiast tego pobierz dane pogodowe i ustaw je jako kontekst powiązania dla strony.

Otwórz plik kodu MainPage.xaml.cs.
Przejrzyj metodę btnRefresh_Clicked . Ta metoda wykonuje następujące kroki:
- Wyłącza przycisk i włącza wskaźnik "pracujący".
- Pobiera prognozę pogody z usługi pogodowej.
- Aktualizuje kontrolki na stronie za pomocą informacji o pogodzie.
- Włącza przycisk i wyłącza wskaźnik zajętości.

Usuń kod, który aktualizuje kontrolki przy użyciu danych. Kod zdarzenia powinien wyglądać podobnie do następującego fragmentu kodu:

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

Zamiast przypisywać wynik metody usługi GetWeather do zmiennej, przypisz ją do BindingContext strony:

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

Uruchamianie projektu. Zauważ, że gdy wybierzesz przycisk Odśwież i gdy dane zostaną zwrócone przez usługę pogodową, żaden z elementów sterujących nie zostanie zaktualizowany prognozą pogody. Naprawisz tę usterkę w następnej sekcji.

Tworzenie powiązań w języku XAML

Teraz, gdy kod-behind ustala kontekst powiązania dla strony, możesz dodać powiązania do kontrolek, aby korzystać z danych w tym kontekście.

Otwórz plik MainPage.xaml.

Znajdź wewnętrzny element Grid, który zawiera wszystkie kontrolki Label.

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

Dodaj powiązania do każdej z nazwanych Label kontrolek. Istnieją cztery.

Właściwość Label.Text powinna mieć jej wartość zmienioną na składnię {Binding PROPERTY_NAME} , w której PROPERTY_NAME jest właściwością z typu zdefiniowanego Models.WeatherData w models\WeatherData.cs. Pamiętaj, że ten typ to typ danych zwracany przez usługę pogodową.

Na przykład Label nazwany lblWind (ostatnia etykieta w siatce) powinien mieć właściwość Text jak w następującym kodzie:
```
<Label x:Name="lblWind" Grid.Row="4" Grid.Column="1" Text="{Binding Wind}" />
```
W obszarze <Grid> kontrolek, które wyświetlają wszystkie szczegóły pogody, usuń wszystkie x:Name="..." atrybuty.

Nazwy nie są już wymagane, ponieważ kontrolki nie są przywoływane w kodzie.

Sprawdź, czy powiązania XAML są zgodne z następującym fragmentem kodu:

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

Uruchom aplikację i wybierz przycisk Odśwież . Aplikacja działa prawie jak oryginalna.

Zwróć uwagę, że ikona reprezentująca warunek nie jest aktualizowana z znaku zapytania do ikony słońca lub chmury. Dlaczego ikona nie zmienia się? Ponieważ ikona jest zasobem obrazu wybranym w kodzie na podstawie wartości wyliczenia WeatherData.Condition. Nie można zmienić wartości wyliczenia na zasób obrazu bez dodatkowego nakładu pracy. Naprawisz to w następnym ćwiczeniu po tym, jak dowiesz się więcej o powiązaniach.

Ćwiczenie — zastępowanie kodu powiązaniami .NET MAUI

Otwórz rozwiązanie startowe

Ustawianie kontekstu powiązania

Tworzenie powiązań w języku XAML

Opinia