Разработка универсальных приложений Windows 10. Самое первое приложение. Часть 5

Окончание статьи о разработке универсальных приложений Windows.


10.2. Адаптация интерфейса: теория

Подготовив почву, можно заняться адаптацией самого интерфейса приложения.

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

Запустить Blend можно прямо из среды Visual Studio. Для этого достаточно выбрать пункт Вид > Проектировать в Blend главного меню.

Открытые нами в Visual Studio файлы исходного кода автоматически открываются в Blend сразу же при его запуске. Мы сами можем удостовериться в этом, взглянув на его главное окно (рис. 25).

Здесь всё нам уже знакомо: главное меню, панель инструментов, визуальный редактор интерфейса, корешки, представляющие открытые файлы, панели Обозреватель решений и Свойства, панель Объекты и временная шкала, перечисляющая все элементы интерфейса, что имеются на странице, и аналогичная уже знакомой нам панели Структура документа (см. рис. 23). Есть даже простой редактор кода и кнопка запуска приложения, расположенная на панели инструментов, - так что мы сможем в случае чего отредактировать функциональный код и запустить приложение, чтобы проверить, как оно работает.

Но для нас сейчас интерес представляет панель Состояния (рис. 26). Проверим, присутствует ли она на экране, и, если нет, выведем, выбрав пункт Вид > Окно состояний или нажав комбинацию клавиш <Ctrl>+<Alt>+<S>.

В этой панели в виде иерархического списка будут выводиться все визуальные состояния, что мы создадим для страницы, и их адаптивные триггеры. (Изначально эта панель пуста.) Что всё это такое? Сейчас выясним.

Визуальное состояние представляет интерфейс страницы при заданных нами параметрах экрана (окна). Наше приложение будет иметь два таких состояния: при минимальной ширине экрана (окна) 560 пикселов, и при ширине, меньшей этого значения.

Адаптивный триггер устанавливает условие, при котором интерфейс приложения переключается в визуальное состояние, для которого он задан. Так, для первого визуального состояния мы зададим адаптивный триггер, указывающий минимальную ширину экрана (окна) в 560 пикселов, для второго - 1 пиксел.

Изначальное состояние страницы, разработанное нами ранее, без учёта каких-либо визуальных состояний, называется базовым.

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

Row

кнопки Преобразовать (

btnConvert

) значение 2, поместив её тем самым в третью строку контейнера (изначально это свойство имеет значение 1; кнопка находится во второй строке). Свойства, не перечисленные в визуальном состоянии, получат значения, заданные в базовом состоянии.

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


10.3. Адаптация интерфейса: практика

Итак, разобравшись с теорией, приступим к практическому занятию.

В панели Состояния найдём кнопку Добавить группу состояний (значок на ней изображает нечто, похожее на две карточки картотеки, и зелёный знак "плюс") и нажмём её. Blend создаст группу визуальных состояний, даст ей имя

VisualStateGroup

, выведет в списке панели в виде "ветви" и сразу же выделит (рис. 27).

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

VisualState[i]<порядковый номер>[/i]

/i][/code], но нам имеет смысл дать ему более вразумительное имя, скажем, [code]vsWideScreen[/code]. Введём его в поле ввода, находящееся непосредственно в этом пункте, и нажмём клавишу <Enter> (рис. 28).

На заметку
Пункт База, расположенный в самом верху списка панели Состояния, представляет базовое состояние страницы.

Во вновь созданном визуальном состоянии нужно создать необходимые адаптивные триггеры. В пункте, представляющем только что созданное нами визуальное состояние, нажмём кнопку Edit Adaptive Triggers (со значком молнии). На экране появится диалоговое окно редактора коллекции [code]StateTriggerBase[/code] (рис. 29).

Здесь нам всё знакомо по окнам редактора коллекции [code]ColumnDefinitions[/code] и [code]RowDefinitions[/code] (см. рис. 12 и 13). Для визуальных триггеров доступны свойства [code]MinWindowWidth[/code] (минимальная ширина экрана или окна) и [code]MinWindowHeight[/code] (минимальная высота).

Создадим визуальный триггер и зададим для него значение свойства [code]MinWindowWidth[/code], равное 560 пикселам. Нажмём кнопку ОК, чтобы подтвердить сделанные изменения.

Далее создадим в панели Состояния ещё одно визуальное состояние, дав ему имя [code]vsNarrowScreen[/code]. В нём сформируем визуальный триггер, для свойства [code]MinWindowWidth[/code] которого укажем значение 1.

В результате перечисленных выше действий панель Состояния примет вид, показанный на рис. 30.

Пребывая в первом визуальном состоянии ([code]vsWideScreeen[/code]), приложение будет иметь интерфейс, заданный нами в базовом состоянии, следовательно, никаких параметров для него нам задавать не нужно. А для второго визуального состояния ([code]vsNarrowScreen[/code]) нам потребуется изменить параметры двух элементов интерфейса.

Чтобы указать параметры элементов управления для какого-либо визуального состояния, нам следует перед собственно их указанием выбрать в панели Состояния соответствующий ему пункт. Если же нам понадобится исправить базовое состояние, мы выберем пункт База.

В панели Состояние выберем пункт, соответствующий второму визуальному состоянию ([code]vsNarrowScreen[/code]; как на рис. 30). После этого выделим кнопку Преобразовать и в панели Свойства зададим для неё следующие параметры:

• Макет > [code]Row[/code] - 2 (переносим кнопку в третью строку контейнера [code]Grid[/code]);
• Макет > [code]Column[/code] - 0 (помещаем её в первый столбец контейнера);
• Макет > [code]Margin[/code] > отступ сверху (поле ввода, помеченное направленной вверх стрелкой) - 5 писелов (визуально отделяем кнопку от поля ввода Дюймы).

Визуальный редактор покажет нам результат наших действий (рис. 31).

На этом всё. Закроем Blend. (Сохранять документы не нужно, так как сохранение будет выполнено автоматически.) Visual Studio выведет предупреждение, сообщающее о том, что файлы исходного кода были изменены внешней программой, и предлагающее перезагрузить их (рис. 32). Нажмём кнопку Да или Да для всех.

В результате в XAML-код страницы будет добавлен фрагмент, приведённый ниже. (Созданный ранее код опущен и заменён многоточием.)

11. Задание параметров приложения

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

Параметры приложения задаются в отдельном документе, хранящемся в файле [code]Package.appxmanifest[/code]. Откроем его, как делали это с файлами исходного кода страницы, и посмотрим на его содержимое (рис. 34).

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

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

На вкладке Визуальные ресурсы задаются различные изображения, входящие в состав приложения (рис. 35). Это изображения для плиток разного размера, логотипа, выводящегося при запуске приложения, ещё до вывода его начальной страницы, и логотипа для магазина Store.

Все файлы изображений, указанных на этой вкладке, хранятся в папке [code]Assets[/code], которая находится в папке с файлами проекта. Эта папка отображается в панели Обозреватель решений в виде "ветви" Assets; пункты этой "ветви" представляют сами графические файлы.

Закончив указание параметров приложения, следует закрыть окно, в котором открыт файл [code]Package.appxmanifest[/code], и при необходимости сохранить его.


12. Заключение

В этой статье мы учились создавать универсальные приложения Windows с помощью среды разработки Visual Studio 2015 Community Edition. И в процессе учёбы создали своё первое приложение, хоть и неказистое, но вполне работоспособное.


Дополнительные материалы

• Раздел сайта MSDN, посвящённый разработке универсальных приложений.
• Раздел сайта MSDN, посвящённый Visual Studio и поддерживаемым этой средой языкам программирования.