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

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

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

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

А для размещения элементов на страницах используются контейнеры. О которых, в основном, речь и пойдёт в этой статье.


1. Введение в контейнеры

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

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

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

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

Все контейнеры представляются классами, являющимися потомком класса Panel. Он определяет основную функциональность всех контейнеров.


2. Основные параметры элементов интерфейса, влияющие на их местоположение и размеры

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


2.1. Размеры элементов

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

• Width и Height - задают, соответственно, ширину и высоту элемента в пикселах. Значение по умолчанию - Auto;
• MinWidth и MinHeight - задают минимальную ширину и высоту элемента в пикселах. Значение по умолчанию - 0;
• MaxWidth и MaxHeight - задают максимальную ширину и высоту элемента в пикселах. Значение по умолчанию - 0.

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

Для свойств Width и Height мы можем указать абсолютный размер в пикселах в виде числа с плавающей точкой двойной точности (тип double). В этом случае платформа универсальных приложений будет, по возможности, стараться выдержать заданный нами размер.

На заметку
Тип double языка C# полностью соответствует поддерживаемому платформой универсальных приложений классу Double. В функциональном коде для объявления переменных, хранящих числа с плавающей точкой двойной точности, мы можем использовать как первый, так и второй.

Ещё мы можем указать автоматическое управление размерами элемента; в этом случае элемент получит такие размеры, чтобы либо лишь вместить в себе всё содержимое, либо занять всё отведённое ему пространство в контейнере. (Подробнее об этом мы поговорим позже.) Для этого нужно лишь задать для соответствующего свойства - Width и Height - особое значение Auto, щёлкнув в панели Свойства кнопку Задать значение "Auto", которая находится правее поля ввода, в котором задаётся значение размера, и имеет вид стилизованного крестика.

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

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

Значение 0 свойств, устанавливающих минимальные и максимальные размеры, указывает, что соответствующий размер не ограничен сверху или снизу. Так, если для свойства MaxHeight задать значение 0, высота элемента может быть сколь угодно большой. (Это, кстати, значение по умолчанию для всех этих свойств.)


2.2. Выравнивание элементов

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

Этими параметрами управляют свойства HorizontalAlignment и VerticalAlignment. Первое свойство задаёт выравнивание по горизонтали, второе - по вертикали.

Доступные значения для свойства HorizontalAlignment:

• Left - выравнивание по левому краю пространства, отведённого под элемент в контейнере;
• Center - выравнивание по центру;
• Right - выравнивание по правому краю;
• Stretch - растяжение элемента на всё отведённое ему пространство по горизонтали.

Указать значение этого свойства можно, щёлкнув соответствующую кнопку-переключатель в панели Свойства.

Если задать выравнивание Left, Center или Right, элемент примет ширину, либо заданную в свойстве Width, либо минимально необходимую для того, чтобы вместить всё своё содержимое (если для свойства Width указано значение Auto, устанавливающее автоматическое управление шириной). Поэтому в таких случаях для элементов, чьё содержимое изначально не определено (наподобие полей ввода), лучше задать ширину явно.

Если же для свойства HorizontalAlignment указать значение Stretch, элемент растянется по ширине лишь в том случае, если для его свойства Width задано значение Auto (то есть используется автоматическое управление шириной). В противном случае элемент не растянется и будет вести себя, как если бы было задано значение Center. Поэтому, если мы хотим, чтобы элемент занял всё отведённое ему пространство по горизонтали, предварительно обязательно укажем для его свойства Width значение Auto.

Что касается свойства VerticalAlignment, то для него доступны следующие значения:

• Top - выравнивание по верхнему краю пространства, отведённого под элемент в контейнере;
• Center - выравнивание по центру;
• Bottom - выравнивание по нижнему краю;
• Stretch - растяжение элемента на всё отведённое ему пространство по вертикали.

Для этого свойства применимо всё, сказанное выше, в описании свойства HorizontalAlignment, разумеется, с поправкой на то, что здесь учитывается не ширина, а высота элемента.


3. Контейнеры, используемые в универсальных приложениях

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


3.1. Grid: сетка

Контейнер-сетка Grid был в основных чертах рассмотрен в статье, посвящённой разработке первого универсального приложения. Кратко опишем его возможности.

• Сетка располагает дочерние элементы в ячейках, образованных пересечением заданных разработчиков строк и столбцов.
• Сетка обеспечивает изменение размеров дочерних элементов при изменении размеров самого контейнера.
• Сетка поддерживает все значения свойств HorizontalAlignment и VerticalAlignment, в том числе и Stretch.
• Для задания высоты строки (свойство Height) и ширины столбца (Width) можно использовать значение Auto, задающее автоматическое управление размером, и величины в пикселах или долях (единица измерения "звезда"). Более подробно способы задания размеров описывались в первой статье цикла.
• Для указания номера строки, в которой находится дочерний элемент, используется свойство Row, для задания номера столбца - Column, причём эти свойства указываются для самого элемента. Значение по умолчанию для обоих этих свойств - 0.
• Свойство ColumnSpan позволяет указать, сколько столбцов займёт интерфейсный элемент; это позволяет растянуть последний на несколько столбцов. Для указания количества строк, занимаемых элементом, используется свойство RowSpan. Они также указываются для дочернего элемента. Значения по умолчанию для этих свойств - 1 (то есть элемент занимает один столбец и одну строку).

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

Неудивительно, что именно этот контейнер автоматически формируется Visual Studio при создании каждой новой страницы.

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

Первый пример - форма авторизации, содержащая поля ввода имени пользователя и пароля и кнопку входа.

Запустим Visual Studio и создадим новый проект. В сформированном изначально контейнере-сетке создадим три строки высотой в 40 пикселов и два столбца шириной в одну долю. (Как это сделать, было описано в первой статье цикла.)

Добавим в контейнер две надписи (TextBlock), два поля ввода (TextBox) и кнопку (Button). Разместим их произвольным образом. Отметим, что при этом Visual Studio сам установит для них какие-то значения свойств, руководствуясь некими своими соображениями, и эти соображения в корне отличаются от наших. Но ничего страшного - всё равно мы скоро зададим местоположение и размеры элементов непосредственным указанием значений их свойств.

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

• Text - "Имя";
• Width - Auto;
• Height - Auto;
• Row - 0;
• Column - 0;
• RowSpan - 1;
• ColumnSpan - 1;
• HorizontalAlignment - Left;
• VerticalAlignment - Center;
• Margin - 0, 0, 0, 0.

Для первого поля ввода:

• Text - "" (пустая строка);
• Width - Auto;
• Height - Auto;
• Row - 0;
• Column - 1;
• RowSpan - 1;
• ColumnSpan - 1;
• HorizontalAlignment - Stretch;
• VerticalAlignment - Center;
• Margin - 0, 0, 0, 0.

Вторая надпись будет иметь такие параметры:

• Text - "Пароль";
• Width - Auto;
• Height - Auto;
• Row - 1;
• Column - 0;
• RowSpan - 1;
• ColumnSpan - 1;
• HorizontalAlignment - Left;
• VerticalAlignment - Center;
• Margin - 0, 0, 0, 0.

Второе поле ввода - такие:

• Text - "";
• Width - Auto;
• Height - Auto;
• Row - 1;
• Column - 1;
• RowSpan - 1;
• ColumnSpan - 1;
• HorizontalAlignment - Stretch;
• VerticalAlignment - Center;
• Margin - 0, 0, 0, 0.

А кнопка получит следующие параметры:

• Content - "Войти";
• Width - Auto;
• Height - Auto;
• Row - 2;
• Column - 1;
• RowSpan - 1;
• ColumnSpan - 1;
• HorizontalAlignment - Right;
• VerticalAlignment - Bottom;
• Margin - 0, 0, 0, 0.

В результате визуальный конструктор покажет нам вот что - см. рис. 2.

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

Второй пример - форма для отправки сообщения, содержащая область редактирования, где, собственно, вводится текст сообщения, и кнопки ОК и Отмена. Чтобы сделать её, также создадим новый проект.

В контейнере-сетке создадим две строки, задав для первой высоту 40, а для второй - 200 пикселов, и три столбца с шириной 100 пикселов, 1 Star и 100 пикселов соответственно.

Добавим в контейнер надпись (TextBlock), поле ввода (TextBox) и две кнопки (Button). Опять же, поместим их произвольным образом.

Зададим такие параметры для надписи:

• Text - "Сообщение";
• Width - Auto;
• Height - Auto;
• Row - 0;
• Column - 0;
• RowSpan - 1;
• ColumnSpan - 1;
• HorizontalAlignment - Left;
• VerticalAlignment - Center;
• Margin - 0, 0, 0, 0.

Поле ввода будет иметь следующие параметры:

• Text - "";
• Width - Auto;
• Height - Auto;
• Row - 0;
• Column - 1;
• RowSpan - 2;
• ColumnSpan - 1;
• HorizontalAlignment - Stretch;
• VerticalAlignment - Stretch;
• Margin - 0, 0, 0, 0.

Параметры первой кнопки:

• Content - "ОК";
• Width - 80;
• Height - Auto;
• Row - 0;
• Column - 2;
• RowSpan - 1;
• ColumnSpan - 1;
• HorizontalAlignment - Right;
• VerticalAlignment - Top;
• Margin - 0, 0, 0, 0.

Параметры второй кнопки:

• Content - "Отмена";
• Width - 80;
• Height - Auto;
• Row - 1;
• Column - 2;
• RowSpan - 1;
• ColumnSpan - 1;
• HorizontalAlignment - Right;
• VerticalAlignment - Top;
• Margin - 0, 0, 0, 0.

В результате мы получим страницу, показанную на рис. 3.

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


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

• Раздел сайта MSDN, посвящённый разработке универсальных приложений.
• Раздел сайта MSDN, посвящённый контейнерам и их применению.
• Описание базового класса Panel.
• Описание свойства Width.
• Описание свойства Height.
• Описание свойства MinWidth.
• Описание свойства MinHeight.
• Описание свойства MaxWidth.
• Описание свойства MaxHeight.
• Описание свойства HorizontalAlignment.
• Описание свойства VerticalAlignment.
• Описание контейнера-сетки Grid.

Продолжение следует...