Основы разработки приложений на языке С# под Windows 8, 2014 (стр. 3 )

Замечание. В Windows 8 также произойдёт автоматическое добавление плитки приложения на начальный экран в конец списка. В Windows 8.1 автоматического добавления плитки не происходит: пользователь сам выбирает, какие из установленных приложений добавить на начальный экран.

Структура проекта приложения

Рассмотрим наиболее важные файлы созданного нами проекта Windows Store – приложения. Для этого обратим внимание на окно Обозревателя решений (Solution Explorer).

MainPage. xaml — это разметка главной страницы приложения на языке XAML. К названию страницы не предъявляется никаких требований, важно только указать в файле App. xaml. cs, какую страницу считать главной (её пользователь увидит первой). По умолчанию в качестве такой страницы используется MainPage. xaml. Сейчас это единственная страница нашего приложения, но, как правило, приложения для
Windows 8 состоят из нескольких страниц, объединённых с помощью элементов навигации.

MainPage. xaml. cs — это файл кода (code-behind) на языке C# страницы MainPage. xaml. Здесь, как правило, находится основная часть кода, относящегося к логике работы соответствующей страницы.

App. xaml — это разметка объекта Windows Store – приложения на языке XAML. Данная разметка не имеет визуального представления и не является страницей приложения. В файле App. xaml можно хранить данные и настройки для всего приложения. Кроме того, в данном файле удобно определять стили и подключать ресурсы, используемые на нескольких страницах приложения, хотя это и не обязательно. Также в данном файле можно указать тему оформления приложения (светлую или темную).

App. xaml. cs — это файл кода (code-behind) на языке C# для App. xaml. В данном файле обрабатываются события уровня приложения, такие как запуск, активация, в том числе активация по поисковому запросу, и деактивация приложения. Кроме того, в App. xaml. cs можно перехватывать необработанные исключения и отлавливать ошибки навигации между страницами.

Package. appxmanifest — это манифест приложения. Он содержит множество настроек, таких как заголовок, пути к картинкам для плиток (Tiles) и экрана заставки (Splash Screen), задание поддерживаемых ориентаций экрана, определение необходимых приложению системных возможностей и т. д. Несмотря на то, что это XML-файл, он почти всегда редактируется не напрямую, а с помощью встроенного в Visual Studio графического редактора. Редактор манифеста приложения можно открыть двойным щелчком мышью по имени соответствующего файла в окне обозревателя решений (Solution Explorer).

Рис. 7. Редактор манифеста

AssemblyInfo. cs — еще один конфигурационный файл, в котором определяются некоторые метаданные главной сборки (Assembly) приложения.

TestApp_TemporaryKey. pfx — это криптографический сертификат с закрытым ключом, которым подписывается приложение.

Logo*.png, SmallLogo*.png, StoreLogo*.png — логотипы для большой и малой плиток приложения, а также иконка для списка всех приложений. Это очень важные файлы, т. к. логотипы – первое, что увидит пользователь сразу же после установки приложения (или до установки в магазине). В процессе работы приложение может программно управлять своими плитками. Логотипы представляют собой картинки с прозрачным фоном, цвет реального фона задается в манифесте приложения.

SplashScreen*.png — картинка для экрана заставки, отображаемая во время загрузки приложения до главной страницы. При создании своей картинки необходимо учитывать, что она служит исключительно для информирования пользователя о загрузке приложения, не более того.

Кроме перечисленных файлов в проекте присутствует раздел References. В данном разделе находятся ссылки на сборки (Assemblies) и фреймворки (Frameworks), подключенные приложением. В нашем примере подключены два фреймворка: .NET for Windows Store apps и Windows, включающие все необходимые сборки из. NET Framework и Windows Runtime соответственно.

Замечание. В Visual Studio 2012 присутствует также файл StandardStyles. xaml — файл ресурсов стилей для графических элементов управления. Этот файл подключается в App. xaml и позволяет применять содержащиеся в нём стили и их модификации к элементам на всех страницах приложения. Начиная с версии 2013 данный файл не используется, а большинство содержащихся в нём стилей теперь предоставляются фреймворком (некоторые были объединены, переименованы или удалены).

Добавляем функциональность приложению

Добавим на страницу нашего приложения кнопку, текст на которой будет меняться на «Hello, world!» после её нажатия. Для этого откроем редактор пользовательского интерфейса главной страницы приложения с помощью двойного щелчка мышью по файлу MainPage. xaml в окне Solution Explorer.

Рис. 8 . Окно редактора пользовательского интерфейса.

Пользовательский интерфейс Windows Store – приложений, написанный на языке C#, описывается декларативным образом на языке XAML. Visual Studio позволяет редактировать XAML-код не только напрямую, но также и в графическом редакторе WYSIWYG (What You See Is What You Get, «что видишь, то и получишь»). Окно редактора пользовательского интерфейса Windows Store – приложений по умолчанию разделено по горизонтали на две половины. Вверху находится графический редактор WYSIWYG, схематически выполненный в виде планшета, а внизу редактор XAML-разметки. Посередине располагается панель, с помощью которой можно поменять редакторы местами, изменить размер каждого из них, переключиться в режим, когда редакторы располагаются горизонтально справа налево, а не сверху вниз, а также скрыть один из редакторов и работать, например, только с XAML-разметкой.

Замечание. С подробными комментариями к XАML-документации  можно познакомиться по ссылке http://msdn. /ru-ru/library/b2s063f7.aspx.

Добавим кнопку, перетащив соответствующий элемент (Button) из панели элементов (Toolbox) в графический редактор. Зададим кнопке имя (свойство Name), например, «myButton», и изменим то, что написано на кнопке (свойство Content), например, на «Нажми меня».

Рис. 9.  Кнопка с заданными свойствами

Изменим положение кнопки так, чтобы она находилась в центре экрана, для этого отредактируем элемент XAML-разметки, связанный с кнопкой, заменив способ расположения элемента по вертикали (VerticalAlignment) и горизонтали (HorizontalAlignment) на выравнивание по центру (Center) и убрав отступы (Margin):

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Button x:Name="MyButton" Content="Нажми меня"

  HorizontalAlignment="Center" VerticalAlignment="Center"/>

</Grid>

С XAML-разметкой связан код на языке C#, располагающийся в файле MainPage. xaml. cs. Перейти к нему можно щёлкнув по соответствующему файлу в обозревателе решений или выбрав пункт Перейти к коду (View Code) в контекстном меню при редактировании XAML-разметки. Также к С#-коду можно перейти при добавлении обработчика какого-либо события.

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

Рис. 10. Код страницы с обработчиком нажатия кнопки

Страница представляет собой класс MainPage, в конструкторе которого инициализируется графический интерфейс (метод this. InitializeComponent). В классе переопределен метод OnNavigatedTo, вызываемый при переходе на страницу. Для обработки события нажатия на кнопку был автоматически сгенерирован пустой метод MyButton_Click. Добавим в него изменение текста кнопки на «Hello, world!».

MyButton. Content = "Hello, world!";

И запустим новую версию приложения.

Рис. 11. Приложение до нажатия кнопки

Рис. 12. Приложение после нажатия кнопки

Отладка приложения на имитаторе (симуляторе)

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

Для запуска приложения в имитаторе нужно изменить в выпадающем списке кнопки запуска пункт Локальный компьютер (Local Machine) на Имитатор (Simulator), а затем нажать кнопку запуска.

Рис. 2.13 Переход в режим Имитатор

После нажатия кнопки запуска на имитаторе откроется окно имитатора и запустится приложение.

Рис. 2.14. Отладка приложения в имитаторе

В имитаторе для удобства можно изменить размер окна, это никак не отразится на виртуальном разрешении экрана.

По центру внизу имитатора располагается кнопка Start (), функциональность которой аналогична программной кнопке на панели «чудо-кнопок» или аппаратной кнопке на клавиатуре. В правой части окна имитатора находятся 14 кнопок управления:

Свернуть имитатор (Minimize). Располагать имитатор поверх других окон (Always on top). Режим работы, при котором физическая мышь является мышью в имитаторе (Mouse mode). Режим работы, при котором физическая мышь эмулирует сенсорный ввод (касание пальцем) в имитаторе (Basic touch mode). Эмуляция сенсорного зуммирования с помощью мыши (Pinch/zoom touch mode). Эмуляция сенсорного вращения (двумя пальцами) с помощью мыши (Rotation touch mode). Поворот экрана по часовой стрелке на 90° (Rotate clockwise (90 degrees)). Поворот экрана против часовой стрелки на 90° (Rotate counterclockwise (90 degrees)). Изменение разрешения экрана (Change resolution). Установка местоположения (Set location). Получение снимка экрана (Copy screenshot). Настройки снятия снимков экрана (Screenshot settings). Имитация свойств сетевых подключений (Network connection properties). Помощь (Help).

Поворот имитатора эмулирует поворот реального устройства. Для изменения разрешения экрана имитатора нажмите на соответствующую кнопку. Откроется меню с выбором размера диагонали экрана и разрешения. При одной и той же диагонали экрана, например, 10,6 дюймов, можно задать разное разрешение. Это связано с тем, что экраны могут иметь различную плотность пикселов (точек на дюйм — PPI, Pixels Per Inch). Для растровых рисунков, используемых в приложении, желательно иметь несколько вариантов для экранов с разной плотностью пикселов.