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

Четвёртая часть вводной статьи, рассказывающей о разработке универсальных приложений Windows.


8.2. Запуск в имитаторе

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

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

Имитатор с запущенным на нём приложением показан на рис. 20.

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

Внимание!
Если закрыть имитатор, не завершая приложение, последнее так и останется запущенным. В этом случае необходимо нажать кнопку Остановить отладку в панели инструментов Visual Studio, выбрать пункт Отладка > Остановить отладку или нажать комбинацию клавиш <Shift>+<F5>.

С помощью имитатора Visual Studio также можно увидеть, как приложение будет выглядеть на экране смартфона. Однако этот режим поддерживается только в 64-разрядной редакции Windows.


8.3. Запуск из меню Пуск

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

Внимание!
По окончанию разработки следует удалить установленное таким образом приложение из системы.


9. Разработка логики приложения

Что ж, интерфейс приложения мы создали. Теперь займёмся его логикой, а то наше творение до сих пор не "знает", что же мы от него хотим.


9.1. Редактор кода. Код класса страницы

Откроем файл функционального кода начальной страницы

MainPage.xaml.cs

, дважды щёлкнув на представляющем его пункте в панели Обозреватель решений. Откроется редактор кода Visual Studio (рис. 21).

Давайте рассмотрим функциональный код, сгенерированный Visual Studio (комментарии удалены ради компактности).

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Runtime.InteropServices.WindowsRuntime;

using Windows.Foundation;

using Windows.Foundation.Collections;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Navigation;



namespace Convertor

{

    public sealed partial class MainPage : Page

    {

        public MainPage()

        {

            this.InitializeComponent();

        }

    }

}

Если не отвлекаться на малозначительные детали, здесь мы видим объявление пространства имён

Convertor

, а в нём - объявление класса начальной страницы

MainPage

, потомка базового класса

Page

.

Ключевое слово

partial

, поставленное в объявлении класса, говорит о том, что здесь мы видим лишь часть объявляющего этот класс кода. Остальной код хранится в связанном XAML-файле (

MainPage.xaml

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

Конструктор класса

MainPage

вызывает метод

InitializeComponent()

. Последний объявлен в одном из служебных файлов, сгенеририванных Visual Studio и не выводящихся в Обозревателе решений, и выполняет инициализацию элементов интерфейса, описанных в связанном XAML-файле.


9.2. Создание обработчиков событий

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

Все обработчики событий должны представлять собой методы класса страницы (в нашем случае это класс

MainPage

).

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

Это событие

Click

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

Чтобы привязать обработчик к событию в каком-либо элементе интерфейса, нам потребуется вернуться к связанному XAML-файлу. Переключимся на файл

MainPage.xaml

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

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

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

Нам нужно привязать обработчик к событию

Click

кнопки. Это можно сделать двумя способами:

• быстрый: дважды щёлкнуть мышью на расположенном правее названия события поле ввода - тогда Visual Studio сам даст имя методу, который станет обработчиком события;
• медленный: ввести имя метода - обработчика события в это поле ввода и нажать клавишу <Enter>.

В любом случае произойдёт автоматическое переключение на редактор кода с содержимым файла

MainPage.xaml.cs

, в котором уже будет создано объявление метода - обработчика события (см. ниже).

private void btnConvert_Click(object sender, RoutedEventArgs e)

{



}

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

private void btnConvert_Click(object sender, RoutedEventArgs e)

{

    double fl = double.Parse(txtInches.Text);

    fl = fl * 2.54;

    txtCentimetres.Text = fl.ToString();

}

Рассмотрим его построчно.

double fl = float.Parse(txtInches.Text);

Извлекаем величину в дюймах, введённую в поле Дюймы (

txtInches

), и преобразуем его в число двойной точности.

Занесённое в поле ввода значение хранится в свойстве

Text

класса

TextBox

в строковом виде. Для преобразования его в число двойной точности (тип, он же класс

double

) применяем статичный метод

Parse()

класса

double

.

fl = fl * 2.54;

Собственно преобразуем дюймы с сантиметры, умножив полученное ранее число на 2,54 (размерность одного дюйма в сантиметрах).

txtCentimetres.Text = fl.ToString();

Выводим результат, предварительно преобразовав его в строку вызовом метода

ToString()

класса

double

. (Непосредственно занести в поле ввода значение, не являющееся строкой, мы не можем.)

В результате мы должны получить в файле MainPage.xaml.cs код, показанный ниже (комментарии удалены).

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Runtime.InteropServices.WindowsRuntime;

using Windows.Foundation;

using Windows.Foundation.Collections;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Navigation;



namespace Convertor

{

    public sealed partial class MainPage : Page

    {

        public MainPage()

        {

            this.InitializeComponent();

        }



        private void btnConvert_Click(object sender, RoutedEventArgs e)

        {

            double fl = double.Parse(txtInches.Text);

            fl = fl * 2.54;

            txtCentimetres.Text = fl.ToString();

        }

    }

}

MainPage.xaml

, щёлкнув на соответствующем корешке в верхней части клиентской области. Выделим контейнер

Grid

, щёлкнув на белом поле, не занятом надписями, полями ввода и кнопкой.

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

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

[ Grid ]

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

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

ColumnDefinitions

. В окне редактора коллекции

ColumnDefinitions

выделим первую колонку и зададим для неё значение свойства

Width

, равное 1 "звезде" (

Star

). Тем самым мы отведём под первую колонку контейнера всё оставшееся свободное пространство.

После этого выделим поле ввода Дюймы (

txtInches

). В панели Свойства развернём категорию Макет. Найдём свойство

Width

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

Auto

. И зададим для свойства

HorizontalAlignment

значение

Stretch

, щёлкнув самую правую кнопку-переключатель в наборе.

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

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

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

Grid

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

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

RowDefinitions

. В окне редактора коллекции

RowDefinitions

добавим новую строку, зададим для неё высоту

Auto

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

Наконец, поочерёдно выделим надпись "Сантиметры" и поле ввода Сантиметры (

txtCentimetres

) и зададим для них значения параметра Макет >

Row

, равные 4 и 5 соответственно. Так мы сместим эти элементы в контейнере на строку ниже.

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

<Page . . .>

    <Grid . . .>

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="30"/>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="Auto"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition/>

            <ColumnDefinition Width="Auto"/>

        </Grid.ColumnDefinitions>

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

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

        <TextBox x:Name="txtInches" Margin="0" Grid.Row="1" TextWrapping="Wrap"

        Text="0" VerticalAlignment="Top"/>

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

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

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

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

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

        VerticalAlignment="Top"/>

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

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

        Grid.ColumnSpan="2"/>

    </Grid>

</Page>

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