Введение в пользовательский интерфейс и данные

  • 5 мин

Tech logo.

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

Большинство приложений состоят из трех основных компонентов:

  • Пользовательский интерфейс: метки, кнопки, текстовые поля, ползунки, диаграммы и все другие элементы управления, которые представляют сведения пользователю. Сюда также входят элементы управления, которые дают возможность взаимодействовать с приложением путем ввода данных, выбора параметров или предоставления команд.
  • Данные: сведения, над которыми работает приложение. Для простого приложения калькулятора это может быть текущее отображаемое число, результат предыдущей операции или значение, хранящееся в памяти. Для игры данные могут включать состояние и положение игрока и врагов, макет и поведение среды, а также свойства оружия и других объектов. Для корпоративного приложения данными могут быть база данных сотрудников, журнал заказов и т. д. Для приложения компании по производству одежды в нашем примере данные хранятся в фактических объектах, представляющих текущее время, или в цветах, отображаемых в пользовательском интерфейсе.
  • Логика: конструкция, которая взаимодействует с внешними ресурсами (например, хранилищем, базами данных, веб-службы или другими приложениями), выполняет операции с данными и обновляет пользовательский интерфейс, чтобы отразить изменения в данных. Логика также получает вводимые пользователем данные из пользовательского интерфейса и действует в соответствии с введенной информацией или данными командами. В нашем примере логика обновляет время, создает список доступных цветов, сохраняет и извлекает цветовые предпочтения пользователя.

Связь между логикой приложения и пользовательским интерфейсом важна. Платформы, такие как пакет SDK для приложений Windows, универсальная платформа Windows (UWP) и Windows Presentation Foundation (WPF), включили чрезвычайно эффективный и универсальный метод передачи данных в пользовательский интерфейс, называемый привязкой данных.

В этом модуле вы узнаете, как использовать привязку данных для следующих задач:

  • Отображение и автоматическое обновление простых текстовых данных (отображение часов в приложении).
  • Автоматическое обновление свойств C# при получении входных данных пользовательским интерфейсом (ввод имени пользователя).
  • Автоматическое отражение изменений данных в пользовательском интерфейсе (приветствие пользователя, отображение часов).
  • Отображение и изменение списка более сложных структур данных (список доступных и предпочитаемых цветов).

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

Необходимые компоненты

Чтобы реализовать все возможности, представленные в этом модуле, вам должны быть знакомы:

  • Создание проектов UWP или WPF в Visual Studio.
  • Язык C#.
  • Основные понятия разметки XAML.
  • Базовые элементы управления макетом XAML, включая StackPanel и Grid.