Вы зашли как: Гость
05.10.2015 13:10 | dronov_va

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


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

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

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


Рис. 5. Главное окно Visual Studio 2015



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

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


Рис. 6. Панель Обозреватель решений развёрнута




Рис. 7. Панели Обозреватель серверов и Панель элементов свёрнуты и отображаются в виде корешков



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

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

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

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

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


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

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

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

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



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


Рис. 8. Диалоговое окно Создание проекта



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

Convertor

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

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

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


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

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


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


Рис. 10. Файл с интерфейсным кодом, открытый в Visual Studio



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

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

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

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


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


Рис. 11. Панель Свойства, показывающая список параметров



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

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

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

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

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

Grid

(см. рис. 11).

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


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


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




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

Комментарии

Комментариев нет...
Для возможности комментировать войдите в 1 клик через

По теме

Акции MSFT
73.16 0.00
Акции торгуются с 17:30 до 00:00 по Москве
Мы на Facebook
Мы ВКонтакте
Все права принадлежат © MSInsider.ru (ex TheVista.ru), 2017
Сайт является источником уникальной информации о семействе операционных систем Windows и других продуктах Microsoft. Перепечатка материалов возможна только с разрешения редакции.
Работает на WMS 2.34 (Страница создана за 0.053 секунд (Общее время SQL: 0.012 секунд - SQL запросов: 31 - Среднее время SQL: 0.00037 секунд))