Сравнение пользовательского интерфейса на основе событий с пользовательским интерфейсом, привязанным к данным

  • 6 мин

Пользовательский интерфейс на основе событий разработан вокруг событий, предоставляемых элементом управления. Эти события можно связать с кодом обработчика событий, который вызывается при активации события. Например, предположим, что у вас есть кнопка, которая при нажатии кнопки выполняет долговременную операцию. Обработчик событий, назначенный Clicked событию, может запустить операцию, а затем задать свойство falseкнопкиIsEnabled, чтобы предотвратить нажатие кнопки еще раз во время выполнения операции.

Пользовательский интерфейс, привязанный к данным, использует привязку данных для представления и взаимодействия с данными. Свойства элементов управления привязаны к свойствам объекта данных, и эти привязки могут обнаруживать изменения в свойствах. В предыдущем примере рассмотрим кнопку, которая выполняет долго выполняющуюся операцию. Вместо отключения кнопки в коде программной части IsEnabled свойство привязано к свойству объекта IsBusy данных. Всякий раз, когда объект данных становится "занят" состояние включенной кнопки автоматически изменяется на соответствие.

Преимущества и недостатки использования событий и кода

Использование обработчика событий элемента управления с кодом программной части — это быстрый и удобный способ разработки логики приложения для пользовательского интерфейса. Код используется для вызова служб для получения данных, выполнения операций с данными и взаимодействия с элементами управления на странице. Код используется для синхронизации пользовательского интерфейса и данных.

Рассмотрим пример приложения службы погоды. Следующий фрагмент XAML содержит простую кнопку пользовательского интерфейса, чтобы получить последние данные и обновить пользовательский интерфейс с влажностью.

<VerticalStackLayout Margin="10">
    <HorizontalStackLayout Spacing="20">
        <Label Text="Postal Code:" VerticalOptions="Center" />
        <Entry x:Name="PostalCode" WidthRequest="100" />
        <Button x:Name="RefreshWeatherButton" Text="Refresh" WidthRequest="200" Clicked="RefreshWeatherButton_Clicked" />
    </HorizontalStackLayout>
    <Label x:Name="Humidity" Text="Humidity: ?" />
</VerticalStackLayout>

Снимок экрана: приложение .NET MAUI с элементом управления записью почтового индекса, кнопкой с обновлением текста. Под этими двумя элементами управления используется метка, представляющая влажность.

В этом примере есть три именованных элемента управления:

  • Entryэлемент управления "Почтовый код".
  • Button элемент управления с именем RefreshWeatherButton.
  • Labelэлемент управления "Влажность".

Обработчик RefreshWeatherButton событий, объявленный для Clicked события. При нажатии кнопки обработчик событий запрашивает службу погоды для последнего прогноза погоды, используя данные, введенные в PostalCode элементе управления записью, и задает Humidity текст метки текущей влажности.

private void RefreshWeatherButton_Clicked(object sender, EventArgs e)
{
    WeatherService.Location = PostalCode.Text;
    WeatherService.Refresh();
    Humidity.Text = $"Humidity: {WeatherService.Humidity}";
}

В этом обработчике событий три элемента управления тесно связаны друг с другом и данные через код позади.

Этот дизайн отлично подходит для небольших пользовательских интерфейсов, но как только пользовательский интерфейс становится сложным, поддержание тесно связанного кода может стать проблемным. При удалении или изменении элемента управления необходимо очистить любой код с помощью этих элементов управления пользовательского интерфейса, которые могут включать обработчик событий. Если вы решите изменить пользовательский интерфейс, у вас будет много кода для рефакторинга. При изменении структуры резервных данных необходимо перейти к коду каждого пользовательского интерфейса, чтобы оставаться в синхронизации.

Привязка данных помогает

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

Давайте рассмотрим тот же пример, что и в предыдущем разделе, но обновим его для использования привязки данных:

<VerticalStackLayout Margin="10">
    <HorizontalStackLayout Spacing="20">
        <Label Text="Postal Code:" VerticalOptions="Center" />
        <Entry Text="{Binding Location, Mode=OneWayToSource}" WidthRequest="100" />
        <Button Text="Refresh" Command="{Binding RefreshWeather}" WidthRequest="200" />
    </HorizontalStackLayout>
    <Label Text="{Binding Humidity}" />
</VerticalStackLayout>

Вы можете обнаружить свойства, связанные с данными, используйте синтаксис {Binding ...} расширения XAML для значения свойства. Не беспокойтесь о конкретных проблемах, которые рассматриваются далее в этом модуле.

Те же три элемента управления объявляются в XAML, но ни один из них не называется, так как имя не требуется:

  • Entry контроль:

    Свойство этого элемента управления Text привязано к свойству с именем Location.

  • Button контроль:

    Свойство кнопки Command привязано к свойству с именем RefreshWeather. Command — это свойство на кнопке, которая вызывает код при нажатии кнопки. Это альтернатива событию Clicked , используемому в привязке данных.

  • Label контроль:

    Это Text свойство привязано к свойству с именем Humidity.

В этом простом пользовательском интерфейсе все кодовые элементы устраняются. Удаление всех кодовых компонентов не является точкой привязки данных, хотя обычно это возможно. Код по-прежнему имеет свое место. Сколько вы реализуете привязки данных.

Теперь пользовательский интерфейс слабо связан с объектом данных. Почему она слабо связана, а не тесно связана? Из-за способа вычисления привязок. Каждый элемент управления имеет BindingContext свойство. Если контекст не задан, используется контекст родительского элемента управления и т. д., пока корневой каталог XAML не будет оценен. При вычислении привязок экземпляр объекта контекста проверяется на наличие необходимых свойств, таких как привязка элемента управления Text меткой к свойству контекста Humidity . Если Humidity в контексте нет, ничего не происходит.

Так как пользовательский интерфейс слабо связан, вы можете перепроектировать пользовательский интерфейс без беспокойства о критическом коде. Однако вы можете нарушить функциональные возможности. Например, можно удалить кнопку и приложение по-прежнему компилирует и выполняется, но у вас нет способа обновить погоду. С другой стороны, можно заменить Entry элементы управления и Button элементы управления одним SearchBar элементом управления. Этот элемент управления позволяет вводить текст и вызывать команду.

<SearchBar Text="{Binding Location, Mode=OneWayToSource}" SearchCommand="{Binding RefreshWeather}" />

Как видно, использование привязки данных в дизайне пользовательского интерфейса может помочь вам развивать и изменять пользовательский интерфейс без большой работы. Он сохраняет пользовательский интерфейс автоматически синхронизирован с данными, и логика приложения отделяется от пользовательского интерфейса.

Проверьте свои знания

1.

Какие из следующих инструкций описывают, как привязка данных улучшает пользовательский интерфейс?

2.

В приложении, которое получает последнюю погоду, элемент управления метками, представляющий температуру, привязан к объекту данных. Когда пользователь нажимает кнопку Get Weather, активируя Clicked событие, что будет делать код обработчика событий для обновления пользовательского интерфейса?