Передать на печать

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

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


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

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

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

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


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



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

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

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


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

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

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


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

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


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

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

MainPage.xaml.cs

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


Рис. 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).


Рис. 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();
        }
    }
}



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


10. Создание приложения, адаптирующегося к текущим параметрам экрана

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

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

Процесс адаптации приложения можно разделить на два этапа.


10.1. Адаптация элементов управления

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

Переключимся на файл

MainPage.xaml

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

Grid

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

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


Рис. 23. Панель Структура документа



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

[ Grid ]

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

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

ColumnDefinitions

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

ColumnDefinitions

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

Width

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

Star

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

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

txtInches

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

Width

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

Auto

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

HorizontalAlignment

значение

Stretch

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

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

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


Рис. 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>

lt;/Page>[/code]




Окончание следует...


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




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

  Передать на печать





Все права принадлежат © MSInsider.ru и TheVista.ru, 2013
Сайт является источником уникальной информации о семействе операционных систем Windows и других продуктах Microsoft. Перепечатка материалов возможна только с разрешения редакции.
Работает на WMS 1.1 (Страница создана за 0.421 секунд)