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

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


3.4. RelativePanel: выравнивающая панель

Контейнер RelativePanel автор назвал выравнивающей панелью, поскольку он позволяет расположить дочерний элемент относительно других дочерних элементов. Это значит, что мы можем указать, что какой-то дочерний элемент должен находиться ниже или правее другого элемента, что нижняя граница элемента должна совпадать с нижней границей его "соседа" и т. п.

Выравнивающая панель появилась только в Windows 10; в предыдущих версиях Windows она не поддерживается.

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

• RightOf - задаёт элемент, правее которого будет располагаться текущий элемент;
• Below - задаёт элемент, ниже которого будет располагаться текущий элемент;
• LeftOf - задаёт элемент, левее которого будет располагаться текущий элемент;
• Above - задаёт элемент, выше которого будет располагаться текущий элемент;
• AlignLeftWith - задаёт элемент, относительно левой границы которого будет выровнена левая граница текущего элемента;
• AlignTopWith - задаёт элемент, относительно верхней границы которого будет выровнена верхняя граница текущего элемента;
• AlignRightWith - задаёт элемент, относительно правой границы которого будет выровнена правая граница текущего элемента;
• AlignBottomWith - задаёт элемент, относительно нижней границы которого будет выровнена нижняя граница текущего элемента;
• AlignHorizontalCenterWith - задаёт элемент, относительно центра которого будет выровнен центр текущего элемента по горизонтали;
• AlignVerticalCenterWith - задаёт элемент, относительно центра которого будет выровнен центр текущего элемента по вертикали;
• AlignLeftWithPanel - если true, левая граница текущего элемента будет выровнена по левой границе контейнера;
• AlignTopWithPanel - если true, верхняя граница текущего элемента будет выровнена по верхней границе контейнера;
• AlignRightWithPanel - если true, правая граница текущего элемента будет выровнена по правой границе контейнера;
• AlignBottomWithPanel - если true, нижняя граница текущего элемента будет выровнена по нижней границе контейнера;
• AlignHorizontalCenterWithPanel - если true, центр текущего элемента будет выровнен по центру контейнера по горизонтали;
• AlignVerticalCenterWithPanel - если true, центр текущего элемента будет выровнен по центру контейнера по вертикали.

Отметим ещё раз, что все эти свойства устанавливаются для дочернего элемента, а не для самого контейнера.

По умолчанию дочерний элемент будет помещён в левый верхний угол выравнивающей панели (точку с координатами [0, 0]) и займёт её всю целиком. Это нужно иметь в виду.

Также нужно иметь в виду, что перечисленные выше свойства имеют следующий приоритет:

• свойства, указывающие выравнивание относительно границ самого контейнера (AlignLeftWithPanel, AlignTopWithPanel и др.);
• свойства, управляющие выравниванием относительно границ соседних элементов (AlignLeftWith, AlignTopWith и др.);
• свойства, задающие относительное местоположение (RightOf, Below и пр.);
• свойства, устанавливающие центрирование текущего элемента (AlignHorizontalCenterWith, AlignHorizontalCenterWithPanel и др.).

Так, если одновременно указано выравнивание правой границы текущего элемента относительно какого-либо другого элемента и правой границы контейнера, правая граница элемента будет выровнена по правой границе контейнера, так как свойство AlignRightWithPanel имеет больший приоритет, нежели AlignRightWith.

Также нужно отменить, что вышеупомянутые свойства задают местоположение и размеры пространства, отведённого под текущий элемент, и последний может иметь меньшие размеры, чем отведённое под него пространство. В таком случае мы можем указать выравнивание элемента, воспользовавшись свойствами HorizontalAlignment и VerticalAlignment. Однако значение Stretch этих свойств может быть проигнорировано, если текущее местоположение элемента исключает его растягивание.

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

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

Сначала добавим надпись (TextBlock). Зададим для неё такие свойства:

• Text - "Сообщение";
• Width - Auto;
• Height - Auto;
• RelativePanel > AlignTopWithPanel - true (установить флажок);
• RelativePanel > AlignLeftWithPanel - true.

Добавим первую кнопку (Button) и укажем для неё:

• Content - "ОК";
• Width - 80;
• Height - Auto;
• AlignTopWithPanel - true;
• RelativePanel > AlignRightWithPanel - true.

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

• Content - "Отмена";
• Width - 80;
• Height - Auto;
• AlignRightWithPanel - true;
• RelativePanel > AlignVerticalCenterWithPanel - true.

И, наконец, поместим в контейнер поле ввода (TextBox) с параметрами:

• Text - "";
• Width - Auto;
• Height - Auto;
• HorizontalAlignment - Stretch;
• VerticalAlignment - Stretch;
• RelativePanel > RightOf - textBlock (имя, заданное для надписи самим Visual Studio);
• RelativePanel > LeftOf - button (имя, заданное для первой кнопки самим Visual Studio; также можно указать вторую кнопку - button1);
• AlignTopWithPanel - true;
• RelativePanel > AlignBottomWithPanel - true;
• Margin - 5 пикселов слева и справа и 0 сверху и снизу.

Отступы позволят нам визуально отделить поле ввода от надписи и кнопок.

Ради наглядности переключимся в альбомное представление, щёлкнув кнопку Альбомная в верхней части визуального конструктора, установим подходящий масштаб и посмотрим на нашу форму (рис. 13).

Теперь давайте дадим выравнивающей панели задачку посложнее. Создадим с её помощью форму входа.

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

Для первой надписи:

• Text - "Имя";
• Width - Auto;
• Height - Auto;
• AlignTopWithPanel - true;
• AlignLeftWithPanel - true.

Для второй надписи:

• Text - "Пароль";
• Width - Auto;
• Height - Auto;
• RelativePanel > Below - textBlock (имя первой надписи);
• AlignLeftWithPanel - true;
• Margin - 20 пикселов сверху и 0 по остальным направлениям.

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

• Text - "" (пустая строка);
• Width - Auto;
• Height - Auto;
• HorizontalAlignment - Stretch;
• RightOf - textBlock1 (имя второй надписи);
• AlignTopWithPanel - true;
• AlignRightWithPanel - true;
• Margin - 5 пикселов слева и 0 по остальным направлениям.

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

• Text - "";
• Width - Auto;
• Height - Auto;
• HorizontalAlignment - Stretch;
• Below - textBox (имя первого поля ввода);
• RightOf - textBlock1 (имя второй надписи);
• AlignRightWithPanel - true;
• Margin - 5 пикселов слева и сверху и 0 справа и снизу.

Для кнопки:

• Content - "Войти";
• Width - Auto;
• Height - Auto;
• Below - textBox1 (имя второго поля ввода);
• AlignRightWithPanel - true;
• Margin - 30 пикселов сверху и 0 по остальным направлениям.

Полюбуемся на результат (рис. 14).

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


3.5. Canvas: канва

Контейнер-канва Canvas (также носящий название холста) позволяет разместить дочерние элементы в строго определённых местах. Мы просто указываем координаты размещаемых в канве элементов, задавая их значение в пикселах.

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

• Left - горизонтальная координата левой границы элемента в виде целого числа (int) в пикселах;
• Top - вертикальная координата верхней границы элемента в виде целого числа (int) в пикселах;
• ZIndex - порядок перекрытия элементов друг друга; элементы с большим значением этого свойства перекрывают элементы с меньшим значением. Указывается в виде целого числа (int). Значение по умолчанию - -1; в этом случае порядок перекрытия определяется порядком создания элементов.

Координаты отсчитываются из левого верхнего угла канвы в направлении вправо и вниз. Значения свойств, задающих выравнивание элемента, игнорируются.

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

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

Добавим надпись (TextBlock) и позиционируем её с помощью мыши в левом верхнем углу контейнера. Зададим для её свойства Text в качестве значения строку "Сообщение".

Добавим поле ввода (TextBox). Растянем его по вертикали на всю высоту канвы. Для свойства Text укажем в качестве значения пустую строку.

Точно таким же образом добавим на канву обе кнопки (Button). Поместим их правее поля ввода одну над другой. Зададим в качестве значения свойства Content первой кнопки строку "ОК", а для второй кнопки - строку "Отмена".

Останется лишь подправить местоположение и размеры всех элементов - и форма готова.

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


4. Параметры отступов. Внешние и внутренние отступы

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

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

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

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

Давайте создадим новый проект. В контейнере-сетке, сформированном Visual Studio на главной странице, не будем создавать никаких столбцов и строк, в результате чего сетка будет содержать всего одну строку, один столбец и, как следствие, одну ячейку.

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

Таким образом мы можем позиционировать сразу несколько элементов в одной ячейке сетки. Хотя всё же удобнее размещать их в разных ячейках...

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


5. Переполнение и его обработка. ScrollViewer: панель с прокруткой

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

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

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

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

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

• Auto - полоса прокрутки появляется лишь тогда, когда возникает переполнение, в противном случае она скрыта;
• Disabled - полоса прокрутки всегда скрыта, и прокрутка невозможна;
• Hidden - полоса прокрутки всегда скрыта, однако прокрутка возможна касанием, с клавиатуры или вращением колёсика мыши;
• Visible - полоса прокрутки отображается всегда, даже если переполнение не возникает.

Для свойства HorizontalScrollBarVisibility значение по умолчанию - Disabled, для свойства VerticalScrollBarVisibility - Visible.

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

Выделим саму панель с прокруткой, воспользовавшись панелью Структура документа (о ней говорилось в первой статье цикла), найдём в дополнительной области категории Макет панели Свойства свойства HorizontalScrollBarVisibility и VerticalScrollBarVisibility и зададим для них значение Auto. После этого выделим сетку и укажем для неё достаточно большое значение ширины (свойство Width), например, 600 пикселов.

Запустим приложение на выполнение - и сразу увидим результат (рис. 15).

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

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


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

• Раздел сайта MSDN, посвящённый разработке универсальных приложений.
• Раздел сайта MSDN, посвящённый контейнерам и их применению.
• Описание контейнера - выравнивающей панели RelativePanel.
• Описание контейнера-канвы Canvas.
• Описание свойства Margin.
• Описание свойства Padding.
• Описание контейнера - панели с прокруткой ScrollViewer.