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

Продолжение статьи, посвящённой разработке универсальных приложений в среде Visual Studio 2015.


3. Краткое знакомство с Visual Studio 2015

Вот теперь можно запустить Visual Studio. Сделать это можно через меню Пуск.

Внимание!
Если мы по какой-либо причине не активизировали на своей системе режим разработчика (см. параграф 2.2), Visual Studio при запуске выведет нам небольшое окно с соответствующим предупреждением. Закроем это окно, завершим работу Visual Studio и активизируем этот режим.

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

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

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

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

В одном и том же месте могут выводиться сразу несколько панелей, накладывающихся друг на друга; эти панели представляются выступающими внизу корешками. Так, в правой части главного окна выводятся сразу три панели: Обозреватель решений (эта панель активна по умолчанию), Team Explorer и Представление классов (см. рис. 6). Чтобы переключиться на нужную панель, достаточно щёлкнуть на представляющем её расположенным внизу корешке.

Сразу после запуска Visual Studio в клиентской области её главного окна будет выведена так называемая начальная страница. В её левой части будут выведены гиперссылки, запускающие операции создания нового и открытия существующего проекта, а также быстрого открытия созданных ранее проектов. (Как видно из рис. 5, автор к моменту написания статьи уже успел создать два проекта.) Правая часть начальной страницы отведена под вывод гиперссылок для перехода на различные справочные материалы с сайта MSDN, список новостей и т.п.

На этом мы закончим рассмотрение Visual Studio 2015. (Если мы что-то упустили, наверстаем потом, по ходу дела.)


4. Создание нового проекта

Давайте лучше начнём, наконец, написание нашего первого универсального приложения Windows.

И начнём мы его с создания нового проекта. Сделать это можно четырьмя способами:

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

Visual Studio предоставляет несколько способов сделать одно и то же действие, что часто очень удобно.

Через некоторое время на экране появится диалоговое окно Создание проекта (рис. 8). В расположенном слева иерархическом списке типов приложений выберем пункт Установленные > Шаблоны > Visual C# > Windows > Универсальные, в центральном списке выберем пункт Пустое приложение (универсальное приложение Windows), введём в поле ввода Имя имя создаваемого проекта -

Convertor

- и нажмём кнопку ОК.

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

Создание нового проекта занимает довольно продолжительное время. А когда проект, наконец, будет создан, внешний вид главного окна сильно изменится.


5. Проект и его составные части. Решение

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

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

Как видим, позиций - "ветвей" и пунктов - в этом списке немало. "Ветвь" Properties хранит файлы, описывающие параметры исполняемого файла приложения (или, в терминологии платформы универсальных приложений, сборки). "Ветвь" References перечисляет все сборки, необходимые для работы приложения; как правило, все эти сборки входят в состав платформы универсальных приложений. "Ветвь" Assets хранит файлы с изображениями: логотип для магазина Store, картинка для заставки, для вывода на платках разного размера и др. Пункт Package.appxmanifest представляет файл со сведениями о самом приложении: названием, которое будет выводиться в заголовке его окна, номера версии платформы, под управлением которой оно способно работать, и пр.

Нас же сейчас как начинающих разработчиков интересуют "ветви", соответствующие файлам с исходным кодом приложения. Всего их две - тех, чьи названия заканчиваются на ".xaml": App.xaml и MainPage.xaml.

Каждая из этих "ветвей" содержит по одному-единственному пункту, который также представляет файл с исходным кодом и название которого представляет собой название "ветви" с добавленными в конце символами ".cs". Для "ветви" App.xaml это будет пункт App.xaml.cs, а для MainPage.xaml - MainPage.xaml.cs.

И ещё. На рис. 9 видно, что "ветвь" проекта Convertor (Universal Windows) вложена в "ветвь" Решение "Convertor" (проектов: 1). Последняя представляет решение - сущность более высокого уровня, чем проект. Решение может объединять в себе несколько проектов: собственно приложение, какой-либо дополнительный компонент к нему, отдельное тестовое приложение и т. п. По умолчанию Visual Studio создаёт решение для каждого вновь формируемого проекта; впрочем, мы можем указать ему не делать этого.

Но вернёмся к файлам с исходным кодом. Что это за файлы?


6. Исходный код универсального приложения

Весь исходный код, что мы напишем в процессе разработки, делится на две части:

• интерфейсный - описывающий интерфейс приложения;
• функциональный - реализующий функциональность, логику работы приложения.

Интерфейсный код пишется на языке XAML (eXtensible Application Markup Language, расширяемый язык разметки для приложений) и хранится в файлах с расширением

.xaml

. Файлы

App.xaml

и

MainPage.xaml

хранят именно интерфейсный код.

Функциональный код в нашем случае пишется на языке C# и хранится в файлах с расширением

.cs

. Файлы

App.xaml.cs

и

MainPage.xaml.cs

содержат функциональный код.

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

.cs

. Так, файл

MainPage.xaml.cs

хранит функциональный код, связанный с файлом

MainPage.xaml

.

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

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

MainPage

; следовательно, её код хранится в файлах

MainPage.xaml

и

MainPage.xaml.cs

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

Самая первая страница, которую создаст Visual Studio в проекте, станет начальной страницей. Именно она будет отображена на экране при запуске приложения.

Помимо этого, отдельная пара файлов -

App.xaml

и

App.xaml.cs

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


7. Создание интерфейса приложения в визуальном редакторе

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


7.1. Визуальный конструктор интерфейса

Откроем файл

MainPage.xaml

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

Если это первый открытый нами XAML-файл, Visual Studio выполнит загрузку и инициализацию визуального конструктора интерфейса, что может занять около минуты. Подождём, пока конструктор запустится, и посмотрим на содержимое открытого файла (рис. 10).

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

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

Мы можем добавлять любые элементы интерфейса, перетаскивая их мышью с панели Панель элементов. (Она находится в левой части главного окна, изначально свёрнута и представляется корешком.) И мы можем удалять ненужные элементы, выделяя их и нажимая клавишу <Del>.

Читателям, работавшие ранее с какими-либо средствами разработки, графическими приложениями, да и тем же Microsoft Word, всё это должно быть прекрасно знакомо.


7.2. Панель Свойства

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

Все параметры разбиты на категории: Кисть, Внешний вид, Общие и др. Мы можем разворачивать эти категории, чтобы отобразить все относящиеся к ним параметры, и, наоборот, сворачивать их. Иногда бывает, что часть параметров в категории скрыта; в этом случае, чтобы вывести их, следует нажать на расположенную под параметрами широкую кнопку с направленной вниз стрелкой (эту кнопку можно увидеть на рис. 11).

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

В верхней части панели Свойства находится поле ввода Имя. В нём задаётся уникальное имя элемента интерфейса, которое используется для программного доступа к нему. Это имя имеет смысл указывать лишь для тех элементов, которыми мы планируем управлять из функционального кода: получать введённое в них значение, заносить в них данные, делать элемент доступным или недоступным и т.п. (Впрочем, Visual Studio сам даёт имена всем создаваемым элементам управления.)

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

Grid

(см. рис. 11).

Ещё ниже мы видим поле поиска, позволяющего быстро найти в панели Свойства нужный нам параметр.


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


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

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