Упражнение. Замена кода привязками .NET MAUI

10 мин

В этом упражнении вы преобразуете приложение, использующее события и код позади, в одно из них, использующее в основном привязку данных. Пример приложения — это приложение прогнозирования погоды, отображающее погоду в течение дня.

Открытие решения для начала работы

Клонируйте или скачайте репозиторий упражнения с сайта GitHub.

Примечание.

Рекомендуется клонировать или скачать содержимое упражнения по короткому пути к папке, например C:\dev, чтобы избежать превышения максимальной длины пути для созданных файлов.
Откройте решение WeatherClient.sln из начальной папки с помощью Visual Studio или этой папки в Visual Studio Code.
Выполните сборку и запуск проекта, чтобы убедиться, что он работает. На экране отображаются некоторые пустые сведения о погоде. Нажмите кнопку "Обновить" , и вы увидите обновление сведений о погоде.

Для справки ниже приведена сводка по классам и файлам, с которыми вы будете работать в этом упражнении.

Файл	Description
MainPage.xaml	Определяет пользовательский интерфейс и логику начальной страницы. Файл XAML определяет пользовательский интерфейс с помощью разметки.
MainPage.xaml.cs	Определяет пользовательский интерфейс и логику начальной страницы. Связанный файл кода программной части, содержащий код, связанный с пользовательским интерфейсом, определенным mainPage.xaml.
Службы\WeatherService.cs	Этот класс имитирует службу отчетов о погоде. Он содержит один метод с именем `GetWeather` , который возвращает `WeatherData` тип.
Модели\WeatherData.cs	Содержит данные о погоде. Это простой тип записи, обеспечивающий температуру дня, осадки, влажность, ветер и состояние.
Models\WeatherType.cs	Перечисление погодных условий, солнечных или облачных.

Настройка контекста привязки

Вам потребуется изменить код для обработчика событий нажатия кнопки "Обновить ". В настоящее время код получает данные о погоде и обновляет элементы управления напрямую. Вместо этого получите данные о погоде и задайте его в качестве контекста привязки для страницы.

Откройте файл кода MainPage.xaml.cs.
Просмотрите btnRefresh_Clicked метод. Этот метод выполняет следующие действия.
- Отключает кнопку и включает спиннер "занят".
- Получает прогноз погоды из метеорологической службы.
- Обновляет элементы управления на странице с информацией о погоде.
- Включает кнопку и отключает спиннер "занят".

Удалите код, обновляющий элементы управления данными. Код события должен выглядеть следующим фрагментом кода:

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

Вместо назначения результата метода службы GetWeather переменной назначьте его BindingContext странице:

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

Запустите проект. Обратите внимание, что при нажатии кнопки "Обновить ", а служба погоды возвращает данные, ни один из элементов управления не обновляется с помощью прогноза погоды. Эта ошибка будет исправлена в следующем разделе.

Создание привязки в XAML

Теперь, когда код задается контекстом привязки для страницы, можно добавить привязки в элементы управления для использования данных в контексте.

Откройте файл MainPage.xaml.

Найдите внутренний Grid элемент управления, содержащий все 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>

Добавьте привязки к каждому именованным Label элементам управления. Существует четыре.

Свойство Label.Text должно иметь значение, измененное на {Binding PROPERTY_NAME} синтаксис, где PROPERTY_NAME свойство из типа, определенного Models.WeatherData в Models\WeatherData.cs. Помните, что этот тип данных является типом данных, возвращаемым службой погоды.

Например, именованный LabellblWind (последняя метка в сетке) должен Text выглядеть следующим образом:
```
<Label x:Name="lblWind" Grid.Row="4" Grid.Column="1" Text="{Binding Wind}" />
```
В элементах <Grid> управления, в списке всех сведений о погоде удалите все x:Name="..." атрибуты.

Имена не требуются теперь, когда элементы управления не ссылаются в коде.

Убедитесь, что привязки XAML соответствуют следующему фрагменту кода:

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

Запустите приложение и нажмите кнопку "Обновить ". Приложение работает почти так же, как исходный.

Обратите внимание, что значок, представляющий условие , не обновляется с вопросительного знака на значок солнца или облака. Почему значок не изменяется? Так как значок является ресурсом изображения, выбранным в коде на WeatherData.Condition основе значения перечисления. Значение перечисления нельзя изменить на ресурс изображения без дополнительных усилий. Это исправлено в следующем упражнении после получения дополнительных сведений о привязках.

Упражнение. Замена кода привязками .NET MAUI

Открытие решения для начала работы

Настройка контекста привязки

Создание привязки в XAML

Обратная связь