Разработка универсальных приложений Windows 10. Привязка данных. Часть 1

Это очередная статья из цикла о разработке универсальных приложений Windows 10 в среде Microsoft Visual Studio. Подразумевается, что читатели уже прочитали опубликованные ранее статьи "Разработка универсальных приложений Windows 10. Самое первое приложение", "Разработка универсальных приложений Windows 10. Размещение элементов на страницах" и уже имеют понятие об универсальных приложениях и принципах их создания.

Платформа универсальных приложений Windows (UWP) предлагает разработчикам множество программных инструментов, значительно облегчающих работу и зачастую недоступных в конкурирующих платформах, что построены на более традиционных принципах. Один из таких инструментов - привязка данных. О нём-то и пойдёт речь в этой статье.

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

Проблема в том, что написание такого кода - суть дополнительный труд, отнимающий дополнительное время. А если переносимых таким образом значений много, такой код может быть весьма объёмным.

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

1. Введение в привязку данных

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

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

Все эти действия выполняются самой программной платформой UWP. Нам нужно лишь создать привязку либо с применением визуальных инструментов Visual Studio, либо вручную в XAML-коде описания формы (в этих двух случаях создание привязки выполняется декларативно), либо программно, написав соответствующий код на используемом нами языке программирования, например, C#.

Сразу же введём три термина, которыми будем пользоваться в дальнейшем:

• источник - объект, из которого выполняется перенос значения;
• приёмник - объект, в который выполняется перенос значения;
• привязка - собственно механизм, выполняющий перенос знчения из источника в приёмник.

Привязка представляется в виде объекта класса Binding. На каждое из переносимых значений (другими словами: пару свойство источника - свойство приёмника) создаётся своя собственная привязка.

Привязка предоставляет ещё ряд возможностей, наиболее полезной из которых является преобразование переносимого знечения в другой формат. Разумеется, мы узнаем, как это делается.

Помимо привязки единичных значений (наподобие строк или чисел), UWP поддерживает привязку целых их перечней (которые могут быть реализованы в виде массивов или коллекций) для вывода в элементах управления, предназначенных для показа подобного рода перечней: обычных (ListBox) и раскрывающихся (ComboBox) списков, сложных списков (ListView) и таблиц (GridView). Вероятно, это самая впечатляющая возможность этой программной платформы. О привязке списков и связанными с ней моментами будет отдельный разговор.

2. Привязка элементов управления

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


2.1. Создание нового проекта в Microsoft Visual Studio 2017

С момента публикации предыдущей статьи цикла - "Разработка универсальных приложений Windows 10. Размещение элементов на страницах" - прошло уже довольно много времени. За это время система Windows 10 неоднократно обновлялась, и вышла новая версия среды разработки Microsoft - Visual Studio 2017. Проект в новой версии этой среды создаётся несколько по-иному.

Прежде всего, для создания нового проекта в диалоговом окне Создание проекта, в левом иерархическом списке нужно выбрать пункт Установленные > Шаблоны > Visual C# > Универсальные приложения Windows (рис. 1). (В списке, расположенном посередине, следует выбрать всё тот же пункт Пустое приложение (универсальные приложения Windows).)

После нажатия кнопки ОК спустя некоторое время на экране появится диалоговое окно Новый универсальный проект для Windows (рис. 2). В нём выбирается минимальная версия Windows, на которой можно будет запустить разрабатываемое универсальное приложение. Эта версия указывается с помощью раскрывающегося списка Минимальная.

При указании минимальной версии следует помнить, что более новые версии UWP поддерживают расширенные возможности программирования, но, задав более старую версию, можно расширить круг пользователей приложения за счёт тех, кто до сих пор применяет старые версии Windows 10. Изначально в списке Минимальная выбран пункт Windows 10 November Update (10.0; сборка 10586) (то есть предыдущая на момент написания данной статьи версия системы).

Проект будет создан после нажатия кнопки ОК.

Сразу после создания проекта Visual Studio 2017 не будет выполнять открытие каких-либо файлов, что составляют этот проект. Поэтому нам самим придётся открыть их (обычно это файлы с интерфейсным и функциональным кодом начальной страницы), щёлкнув на нужных пунктах иерархического списка, находящегося в панели Обозреватель решений.

2.2. Создание самого приложения

Создадим новый проект для приложения, которое будет преобразовывать величины из сантиметров в дюймы и наоборот. Назовём его Bindings1. В качестве минимальной версии Windows оставим ту, что выбрана по умолчанию (сейчас это для нас не принципиально).

Откроем файл с интерфейсным кодом начальной страницы - это файл MainPage.xaml. В контейнере Grid, который, как мы уже знаем, автоматически создаётся на начальной странице самим Visual Studio, создадим две строки и два столбца.

Для обеих строк и первого столбца укажем такие размеры (высоту и ширину соответственно), чтобы они лишь вместили своё содержимое (для этого в диалоговом окне задания параметров строк и столбцов следует выбрать значение Auto). А для второго столбца зададим ширину в одну долю, чтобы он растянулся на всё оставшееся пространство контейнера.

Поместим на страницу две надписи (TextBlock) и два поля ввода (TextBox). Первое поле ввода будет служить для указания величины в сантиматрах, второе - в дюймах.

Зададим свойства для первой надписи:

• Text - "Сантиметры";
• Width - Auto;
• Height - Auto;
• Row - 0;
• Column - 0;
• RowSpan - 1;
• ColumnSpan - 1;
• HorizontalAlignment - Stretch;
• VerticalAlignment - Stretch;
• Margin - 10 пикселов со всех сторон.

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

• Text - "Дюймы";
• Row - 1.

Первое поле ввода получит параметры:

• Имя - txtCentimetres;
• Text - "" (пустая строка);
• Width - Auto;
• Height - Auto;
• Row - 0;
• Column - 1;
• RowSpan - 1;
• ColumnSpan - 1;
• HorizontalAlignment - Stretch;
• VerticalAlignment - Stretch;
• Margin - 10 пикселов со всех сторон.

А второе поле ввода - такие же, за исключением:

• Имя - отсутствует;
• Row - 1.

Сохраним проект и попробуем запустить его на исполнение. У нас должно получиться приложение, чей интерфейс показан на рис. 3.

Здесь мы заметим ещё одно отличие Visual Studio 2017 от предыдущих версий этой среды разработки. В верхней части содержимого окна, по его середина выводится небольшая чёрная панель инструментов, открывающая доступ к вспомогательным отладочным средствам. К сожалению, полностью убрать её не представляется возможным, но мы можем сжать эту панель, для чего достаточно щёлкнуть на находящейся в её нижней части двойной линии. Свёрнутая вспомогательная панель показана на рис. 4.

Развернуть эту панель (если она нам понадобится) можно щелчком на всё той же двойной линии, которая теперь занимает эту панель целиком.

Полюбовавшись на наше новое универсальное приложение, завершим его работу.

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

Теперь приступим к созданию привязки. Нам следует привязать свойство Text второго поля ввода, в которое заносится величина в дюймах, к свойству Text поля ввода txtCentimetres, куда вводится величина в сантиметрах. Следовательно, поле ввода txtCentimetres станет источником, а второе поле ввода - приёмником.

Visual Studio поддерживает визуальные средства для создания привязок. Ими-то мы и воспользуемся.

Прежде всего, нам следует выбрать в визуальном конструкторе элемент, который станет приёмником привязки. Именно так, а не иначе - поскольку привязка создаётся у приёмника, а не у источника.

Далее обратимся к панели Свойства, в которой указываются параметры создаваемых на странице элементов управления - значения свойств представляющих их объектов. Нам понадобится поле ввода Text, которое находится в категории Общие и служит для задания значения одноимённого свойства, которое, в свою очередь, задаёт значение, занесённое в поле ввода.

Правее этого поля ввода находится небольшая кнопка, имеющая вид светлого квадратика. (Отметим, что такая же кнопка присутствует и правее всех прочих элементов управления панели Свойства, служащих для задания значений свойств.) При щелчке на ней появится меню, с помощью которого выполняется указание для соответствующего свойства особого значения. Например, привязки.

Итак, найдём в панели Свойства поле ввода Text и щёлкнем квадратную кнопку, что находится правее его. В появившемся на экране меню выберем пункт Создать привязку данных. На экране появится диалоговое окно Создание привязки данных (рис. 5).

В раскрывающемся списке Тип привязки нам следует выбрать пункт ElementName - тем самым мы укажем создание привязки к элементу управления.

В иерархическом списке Имя элемента выбирается элемент - источник привязки. Сразу после выбора типа привязки там появится перечень присутствующих на текущей странице элементов интерфейса; он будет представлен в виде структуры, показывающей вложенность одних элементов в другие. Элементы, для которых были заданы имена, будут представлены в этом списке их именами; для элементов, не имеющих имён, будут выведены имена представляющих их классов. Найдём там пункт txtCentimetres - нужное нам поле ввода - и выберем его.

В иерархическом списке Путь указывается свойство источника, к которому выполняется привязка. Этот список будет заполнен сразу после выбора элемента-источника и перечислит все его свойства. Выберем там свойство Text.

Остальные параметры привязки пока менять не будем. Просто нажмём кнопку ОК, чтобы создать привязку.

Отметим, что после создания привязки квадратная кнопочка, что находится правее поля ввода Text в панели Свойства, сменит свой цвет на жёлтый. Тем самым Visual Studio сигнализирует нам, что для данного свойства создана привязка.

Сохраним проект и запустим приложение на выполнение. Когда оно запустится, попытаемся ввести какое-либо значение в поле ввода Сантиметры - и сразу увидим, что это же значение появится и в поле ввода Дюймы (рис. 6). Только что созданная нами привязка успешно выполняет перенос значения из одного поля ввода в другое - то есть работает!

Обратим внимание, что простейшая привязка такого рода создаётся полностью визуальными инструментами. Нам даже ни разу не пришлось писать программный код - ни интерфейсный, ни функциональный!

2.4. XAML-код, создающий привязку

Мы уже знаем, как в интерфейсном XAML-коде указываются значения свойств - с помощью синтаксиса вида:

Text="Сантиметры"

Здесь свойству Text элемента управления даётся значение - строка "Сантиметры".

Таким способом можно указать в качестве значения свойства лишь элементарные данные: строки, числа, логические величины, элементы перечислений и пр. Однако в случае создания привязки понадобится указать для свойства в качестве значения объект класса Binding, который и представит эту привязку. Как это сделать?

Воспользовавшись для описания значения свойства так называемым объектным синтаксическим расширением. В качестве значения свойства указывается имя класса, на основе которого создаётся объект, далее через пробел записываются его свойства в виде пар имя свойства=значение свойства, разделённыых запятыми, и всё это берётся в фигурные скобки.

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

Text="{Binding Text, ElementName=txtCentimetres, Mode=TwoWay}"

Здесь всё довольно просто: свойству Text присваивается в качестве значения объект класса Binding (то есть привязка), у которой для свойств Path, ElementName и Mode заданы значения "Text", "txtCentimetres" и TwoWay соответственно.

Рассмотрим свойства класса Binding:

• ElementName - имя элемента управления - источника привязки;
• Path - имя свойства источника, к которому выполняется привязка.

Если это свойство в XAML-коде привязки находится сразу после имени её класса (Binding), имя свойства можно опустить. То есть вместо:

{Binding Path=Text . . .}

можно записать:

{Binding Text . . .}

Собственно, в приведённом ранее примере кода, создающего нашу привязку, так и записано;