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

Третья часть вводной статьи о разработке универсальных приложений Windows в Visual Studio 2015.


7.3. Интерфейсный код страницы

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

<Page

    x:Class="Convertor.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Convertor"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">



    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">



    </Grid>

</Page>

Язык XAML основан на языке XML. Отдельные теги определяют элементы интерфейса, а атрибуты этих тегов задают их параметры. Все элементы интерфейса в универсальной платформе представляются классами, поэтому можно сказать, что теги XAML создают объекты этих классов, а атрибуты устанавливают значения их свойств.

Каждая страница универсального приложения представляет собой отдельный класс, являющийся потомком класса

Page

. Этот класс объявляет тег <Page> с атрибутом

x:Class

, в качестве значения которого указывается имя объявляемого класса -

Convertor.MainPage

.

За кадром
Все классы, формирующие приложение, должны находиться в отдельном просранстве имён. Это пространство имён создаёт сам Visual Studio и даёт ему то же имя, что и проекту. Так, для нашего приложения будет создано пространство имён

Convertor

.

Тег

Grid

, вложенный в тег

Page

, создаёт контейнер

Grid

, который будет управлять размерами и местоположением всех элементов интерйейса. Этот контейнер уже будет представлять собой объект класса

Grid

, а не отдельный класс, так как в нём нет атрибута

x:Class

.

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

Grid

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

Grid

.


7.4. Настройка контейнера

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

Grid

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

Чтобы

Grid

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

Развернём в этой панели категорию Макет и поищем в ней параметры

ColumnDefinitionCollection

и

RowDefinitionCollection

, задающие наборы, соответственно, столбцов и строк таблицы. Не нашли? Тогда щёлкнем кнопку с направленной вниз стрелкой, чтобы открыть набор дополнительных, изначально скрытых параметров. Ага, вот они!

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

Начнём со столбцов. Нажмём кнопку напротив названия параметра

ColumnDefinitionCollection

. На экране появится окно редактора коллекции

ColumnDefinitions

(рис. 12).

ColumnDefinitions

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

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

Что касается параметров столбца, то самый важный из них -

Width

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

• Pixel

  - абсолютное значение ширины в пикселах;

• Star

  - относительное значение ширины в долях свободного пространства контейнера. Например, если мы создадим два столбца и зададим для них значения ширины в 8 и 2 "Star", то вся ширина контейнера будет разделена на 8+2=10 долей, первый столбец получит ширину в 8 долей, а второй - в 2 доли;

• Auto

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

Мы можем развернуть два скрытых параметра, нажав кнопку с направленной вниз стрелкой. Это параметры

MaxWidth

и

MinWidth

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

Давайте создадим два столбца и зададим для них значение ширины

Auto

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

Завершается задание параметров столбцов нажатием кнопки ОК окна редактора коллекции

ColumnDefinitions

.

Теперь займёмся параметрами набора строк. Нажмём кнопку напротив названия параметра

RowDefinitionCollection

. На экране появится окно редактора коллекции

RowDefinitions

(рис. 13).

RowDefinitions

Здесь, по большему счёту, всё то же самое, что и в окне редактора коллекции

ColumnDefinitions

. Только параметры носят названия

Height

(высота строки),

MaxHeight

(максимальная высота) и

MinHeight

(минимальная высота).

Создадим пять строк. Для третьей по счёту (она имеет номер 2, так как в XAML и C# нумерация элементов коллекции начинается с нуля; на рис. 13 эта строка выделена) укажем высоту в 30 пикселов, для остальных зададим высоту равной

Auto

. И не забудем зажать кнопку ОК диалогового окна.

Закончив с контейнером, сохраним все файлы проекта. Сделать это можно тремя способами:

• нажав находящуюся в панели инструментов кнопку Сохранить всё;
• выбрав пункт Файл > Сохранить всё главного меню;
• нажав комбинацию клавиш <Ctrl>+<Shift>+<S>.

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

<Page . . .>

    <Grid . . .>

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="30"/>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="Auto"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="Auto"/>

            <ColumnDefinition Width="Auto"/>

        </Grid.ColumnDefinitions>

    </Grid>

</Page>

MainPage.xaml

. Проверим его и исправим, если нужно.


7.5. Добавление элементов управления

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

Найдём на левой границе главного окна корешок скрытой по умолчанию Панели элементов. Щёлкнем на этом корешке, чтобы развернуть панель, и раскроем в ней категорию Типовые элементы управления XAML. То, что мы увидим, показано на рис. 14.

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

...в которой сразу же развернём категорию Общие, найдём параметр Text, задающий выводящийся в надписи текст, введём в расположенное правее поле строку "Дюймы" и нажмём клавишу <Enter>.

Далее развернём категорию Макет. Здесь нас, в первую очередь, интересуют параметры Row и Column, указывающие номера, соответственно, строки и столбца контейнера Grid, в которых будет находиться данный элемент управления. Введём в расположенные правее названий этих параметров числа 0, не забывая нажимать клавишу <Enter>. Тем самым мы укажем размещение надписи "Дюймы" в первой строке и первом столбце контейнера.

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

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

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

TextBox

. Зададим для него такие параметры:

• Общие > Text (изначально присутствующий в поле ввода текст) - "0";
• Макет > Width - 230;
• Макет > Row - 1;
• Макет > Column - 0;
• Макет > Margin - четыре значения 0.

Помимо этого, изменим у поля сгенерированное Visual Studio имя на более понятное -

txtInches

, ведя его в поле ввода Имя.

Далее добавим кнопку, которая представляется в Панели элементов как

Button

. Её параметры будут такими:

• Общие > Content (содержимое кнопки; может представлять собой не только текст) - "Преобразовать";
• Макет > Width (ширина элемента управления в пикселах) - 130;
• Макет > Row - 1;
• Макет > Column - 1;
• Макет > Margin - четыре значения 0;
• Имя - btnConvert.

Ещё она надпись (

TextBlock

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

• Общие > Text - "Сантиметры";
• Макет > Row - 3;
• Макет > Column - 0;
• Макет > Margin - четыре значения 0.

И ещё одно поле ввода (

TextBox

) с параметрами:

• Общие > Text - "0";
• Общие > IsReadOnly (является ли элемент управления доступным только для чтения) - True (флажок установлен);
• Макет > Row - 4;
• Макет > Column - 0;
• Макет > ColumnSpan (указывает, сколько столбцов контейнера займёт этот элемент; по умолчанию - один) - 2;
• Макет > HorizontalAlignment (задаёт выравнивание по горизонтали) - Stretch (крайняя правая кнопка-переключатель; указывает, что элемент должен занять всё отведённое ему в контейнере пространство по горизонтали);
• Макет > Margin - четыре значения 0;
• Имя - txtCentimetres.

Сохраним проект и посмотрим, что у нас получилось (рис. 17).

Проверим XAML-код - он должен быть таким, как показано ниже. (Часть кода опущена и заменена многоточием.)

<Page . . .>

    <Grid . . .">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="30"/>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="Auto"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="Auto"/>

            <ColumnDefinition Width="Auto"/>

        </Grid.ColumnDefinitions>

        <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="0"

        TextWrapping="Wrap" Text="Дюймы" VerticalAlignment="Top"/>

        <TextBox x:Name="txtInches" HorizontalAlignment="Left" Margin="0"

        Grid.Row="1" TextWrapping="Wrap" Text="0" VerticalAlignment="Top"

        Width="230"/>

        <Button x:Name="btnConvert" Content="Преобразовать" Grid.Column="1"

        HorizontalAlignment="Left" Margin="0" Grid.Row="1"

        VerticalAlignment="Top" Width="130"/>

        <TextBlock x:Name="textBlock1" HorizontalAlignment="Left" Margin="0"

        Grid.Row="3" TextWrapping="Wrap" Text="Сантиметры"

        VerticalAlignment="Top"/>

        <TextBox x:Name="txtCentimetres" Margin="0" Grid.Row="4"

        TextWrapping="Wrap" Text="0" VerticalAlignment="Top" IsReadOnly="True"

        Grid.ColumnSpan="2"/>

    </Grid>

</Page>

8. Запуск приложения

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


8.1. Запуск на локальном компьютере

Запустить приложение непосредственно на локальном компьютере очень просто.

Рис. 18. Кнопка запуска приложения на панели инструментов с раскрытым меню

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

Запуск приложения выполняется нажатием самой кнопки запуска (рис. 18), выбором пункта Отладка > Начать отладку главного меню или нажатием клавиши <F5>.

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

Рис. 19. Приложение Convertor, запущенное на локальном компьютере

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

Для завершения работы приложения проще всего закрыть его окно. Также можно нажать кнопку Остановить отладку в панели инструментов, выбрать пункт Отладка > Остановить отладку или нажать комбинацию клавиш <Shift>+<F5>.

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


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


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

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

Владимир Дронов, MSInsider.ru Team
Октябрь 2015