Начало Windows Phone 8 Development: урок 1. Макет приложения и обработчик событий

В сети достаточно много материалов, посвященных разработке под Windows Phone. А вот с частным случаем Windows Phone 8 — дела обстоят несколько печальней. В данном цикле статей будет освящен материал, сглаживающий данный пробел. Однако, если Вы ищите материалы для непосредственного начала обучения по написанию приложений под эту мобильную ОС — то будет тяжело. Советую начать с изучения приложения просто под Windows 8. Однако, если Вы являетесь разработчиком ПО независимо от происхождения или платформы, то это то, что нужно.

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

И так. Давайте дадим ответ на вопрос, какие есть этапы разработки во время создания приложения? Вот к каким выводам я пришел:

• Application Layout and Events Handing (Макет приложения и обработка событий)
• Access to Application Isolated Local Storage (Доступ к изолированному хранилищу приложения)
• Navigation between Pages and passing Parameters (Навигация по приложению и передача параметров)
• Communicating with Services and Data Binding (Связь с сервисами и данными)
• Threading and Asynchronous Calls (Потоки и асинхронные вызовы)
• Access to Phone Resources like Address Book and GPS (Доступ к ресурсам телефона, таким как телефонная книга и GPS )
• Panorama and Pivot Applications
• Animation and Transitions using Blend for Visual Studio 2012

Для разработки приложений Вам понадобится Windows Phone SDK 8 и Visual Studio 2012, а так же лицензия разработчика. Где их взять и как настроить уже имеется достаточное количество информации в сети интернет.

Некоторые факты перед стартом разработки

— Приложения Windows Phone используют XAML
— XAML используется на страницах приложения для задания макета (Layout), а так же связанные с ними CS или VB, отвечающие за обработку событий.
— XAML схож с HTML5 и отвечает за внешний вид наших страничек.

Создание приложения

Первое

Запускаем Visual Studio и создаем новый проект Windows Phone. Будем использовать C#.

Далее у Вас появляется возможность, под какую версию ОС создать проект. 7.1 или 8.0. Выбираем естественно 8.

Второе

Сразу после создания проекта у вас открывается как минимум два окна. Слева — предпросмотр страницы, справа — редактор кода. То есть редактирование XAML сразу визуально отражается. Однако я не приверженец визуального редактирования. И в моих уроках он практически не используется.

Как описывать страницы приложения используя XAML?

Существует достаточно большое количество элементов управления, таких как Grid(сетка), Canvas (холст), StackPanel и др. Используем StackPanel.

Как работает StackPanel?

Мне нравится StackPanel, так как можно создавать как горизонтальное, так и вертикальное управление, а также вкладывать StackPanel друг в друга.

А теперь ознакомьтесь с кодом ниже. В нем имеется два StackPanel внутри ContentPanel. Один с горизонтальной ориентацией, а другой с вертикальной и каждый в свою очередь содержит по четыре кнопки.

А теперь обратите внимание на визуальный редактор страницы.

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

Так, а что же мы сегодня все-таки сделаем?

Первый пример думаю, вызовет у вас улыбку. Однако…. Вы вводите два числа, они умножаются, и выводится результат. Получится нечто, похожее на это:

Макет достаточно прост. Состоит из двух StackPanels с четырьмя кнопками, как и в примере выше, но вместо кнопок в первом StackPanels имеются два текстовых поля и два поля для ввода. Текстовые поля это TextBlock, поля для ввода это TextBox.

Заметьте, что я добавил InputScope в TextBox, сообщая тем самым, что необходима только цифровая клавиатура а не полная.

Касательно кода

Макет мы сверстали. Осталось сообщить приложению, что и как оно должно делать при поступлении данных.

Шаг 1

Создание обработчика события очень просто благодаря Visual Studio. Просто выберите необходимый элемент. В нашем случае это кнопка Messagebox и сделайте на ней двойной щелчок мышью. Второй способ сделать тоже самое, это выбрать элемент и на панели Свойств клацнуть на кнопке с изображением молнии, после чего появится список всех возможных событий. Выберите «Click».

Шаг 2

Visual Studio загрузит сопряженный CS файл, в котором и происходит описание событий.

 private void MessageboxUpdate_C1ick(object sender, RoutedEventArgs e) < MessageBox.Show(ValueOfX.Text + "X" + ValuеОfУ.Text + " https://habrastorage.org/r/w1560/getpro/habr/post_images/c38/3f2/788/c383f2788404205a31139d3cae00cf80.png" alt="image" data-src="https://habrastorage.org/getpro/habr/post_images/c38/3f2/788/c383f2788404205a31139d3cae00cf80.png"/> 
 
Код
 (double.Parse(ValueOfX.Text) * double.Parse(ValueOfY.Text)).ToString(); 
 
Для более информативного вывода выводим числа, которые умножаются, знак умножения, равно и результат. 2 X 2 = 4.
 
Заметьте, что я использую метод double.Parse для привидения значений строк из TextBox в числовые, типа double.
 
Шаг 3
 
Повторите Шаг1, но в этот раз с другой кнопкой и обновите обработчик событий.
 
 
 private void Textвlockоpdate_C1ick(object sender, RoutedEventArgs e)
 
Код является более простым, в силу того, что не используем строки. И просто передаем результат в TextBlock.
 
Тестируем!
 
Полезной особенностью SDK является поддержка эмуляции устройства. Однако подробно про это поговорим чуть позже. А сейчас просто построим и запустим проект на эмуляторе нажав ctrl+F5. Этот процесс довольно медлительный. Так что запаситесь терпением и дождитесь полной загрузки. После загрузки введите значения для X и Y. Обратите внимание, что клавиатура имеет только числовые значения.
 
 
Теперь нажмите на кнопки Messagebox и TextBlock.
 
 
 
Надеюсь данный урок был полезен. А теперь подведем итоги:
 
— Windows Phone приложения состоят из страничек, построенных на XAML 
— XAML используется для описания визуальной части страницы, а прикрепленный файлы CS или VB – для описания событий. 
— Органы управления описываются почти также, как ив HTML — используя теги. А каждый тег состоит из свойств, определяющих его поведение и формат, как например InputScope для TextBox. 
— Для создания обработчика события – двойной щелчок в визуальном дизайнере на нужном элементе. Или выбрать в окне свойств элемента нужный. 
— Все что вводится/выводится на/из экрана — строка. 
— Использовали метод double.Parse для преобразования в число и последующую работу с ним. А метод ToString — для вывода результата на экран. 
— Для построения и запуска проекта на эмуляторе использовали комбинацию клавиш ctrl+F5.
 
 
.NET
 
Разработка под Windows Phone
 
C#
 
 
Введение в разработку для Windows Phone 8.1
 
Windows Phone на сегодняшний день является одной из трех наиболее популярных ОС для смартфонов, в связи с чем возникает необходимость в приложениях различного рода для этой операционной системы. И хотя пока Windows Phone по популярности сильно уступает системам Android или iOS, в то же время количество устройств под управлением данной ОС растет в абсолютном выражении, что так или иначе рождает потребность в приложениях. Кроме того, есть сферы, где Windows Phone может составить конкуренцию другим системам, например, приложения для бизнеса.
 
Рассмотрим, что же нам потребуется для создания приложений для Windows Phone 8.1. А нам потребуется среда разработки Visual Studio Express 2013 for Windows c пакетом обновления не ниже SP2 (так как пакеты обновления от SP2 и выше по умолчанию содержат Windows Phone SDK 8.1). Также вместо экспресс-версии мы можем использовать другой более функциональный выпуск Visual Studio, например, Visual Studio Community , Professional или Ultimate .
 
В плане функционала для разработки для WP8.1 эти выпуски несильно отличаются, и в дальнейшем для всех примеров я буду использовать Visual Studio Express 2013 for Windows.
 
Кроме самой разработки нам также потребуются средства тестирования. Visual Studio по умолчанию предоставляет эмуляторы смартфонов, которые можно использовать для тестирования. Однако для подключения эмуляторов нам надо включить в BIOS режим виртуализации, затем в Windows необходимо включить Hyper-V, который имеет ряд ограничений. В частности, режим Hyper-V доступен только для 64-битных версий Windows 8 Pro и Windows 8 Enterprise. И если вашей ОС является Windows 8 Basic или Windows RT, то Hyper-V вы не сможете использовать.
 
Кроме того, мы можем естественно использовать смартфон с OS Windows Phone 8.1. Хотя эмуляторы очень удобны: они предоставляют различный спектр устройств с различными настройками, но полную достоверную картину дает тестирование на реальных устройствах. Поэтому в дальнейшем я буду в качестве устройства использовать именно смартфон.
 
Прежде чем использовать смартфон, нам предстоит выполнить небольшую процедуру по регистрации смартфона для разработки.
 
Регистрация телефона
 
Чтобы зарегистрировать телефон, надо использовать утилиту Windows Phone Developer Registration 8.1, которая идет в комплекте Windows Phone SDK 8.1.
 
 
 
Для регистрации телефона выполним ряд шагов:
 
 
Разблокируем экран телефона
 
Убедимся, что дата и время телефона установлены правильно
 
Подключим телефон к компьютеру с помощью USB-кабеля
 
В Windows 8/8.1 перейдем на стартовый экран с плитками и далее перейдем к списку всех приложений.
 
В секции Windows Phone SDK 8.1 нажмем на плитку Windows Phone Developer Registration 8.1 После этого должно открыться следующее окно: 
 
Убедимся, что в окне в разделе "Состояние" значится "Обнаружено устройство Windows Phone. Нажмите кнопку "Зарегистрировать", чтобы разблокировать телефон."
 
Нажимаем кнопку "Зарегистрировать"
 
Далее откроется окно входа в сервисы Microsoft, где нам надо ввести свои логин и пароль: 
 
Если все было введено и подключено правильно, то затем появится сообщение об успешной регистрации устройства: При регистрации надо учитывать, что смартфон должен иметь примерно корректное время для вашего региона, например, совпадать со временем на компьютере. И также смартфон обязательно должен быть подключен к интернету. Необязательно для этого иметь какой-то тариф провайдера, который предусматривает доступ к интернету. Можно просто настроить wi-fi-точку на локальном компьютере и затем через настройки wi-fi на смартфоне подключиться к интернету на локальном компьютере, как, например, сделал я.
 
 
После успешной установки необходимого инструментария создадим первое приложение.
 
Как создать программу на Windows phone
 
Запустим Visual Studio Express 2013 for Windows. В меню выберем File->New Project.. . Перед нами откроется окно создания проекта:
 
 
 
В левой части окна выберем Visual C#->Store Apps-> Windows Phone Apps . А среди шаблонов нового проекта выберем Blank App (Windows Phone) , дадим какое-нибудь название проекту, например, назовем его HelloApp. И нажмем ОК.
 
И Visual Studio создаст новый проект:
 
 
 
Проект по шаблону Blank App по умолчанию имеет следующие узлы:
 
 
Каталог Assets , содержащий используемые файлы изображений
 
App.xaml и App.xaml.cs - файл ресурсов приложения на xaml и файл кода приложения на c# соответственно
 
MainPage.xaml и MainPage.xaml.cs - файл графического интерфейса окна приложения и файл кода окна на c# соответственно
 
Package.appxmanifest - файл манифеста приложения
 
 
На данном начальном этапе пока для нас ценность представляют файлы MainPage.xaml и MainPage.xaml.cs. Откроем файл MainPage.xaml, который представляет графический интерфейс:
 
 
 
Слева в виде телефона у нас будет окно графического дизайнера. Справа - окно разметки графического интерфейса на языке xaml. Графический интерфейс в данном случае представлен классом MainPage, который представляет собой отдельную страницу. Все изменения по интерфейсу, которые мы сделаем, тут же будут отображаться в графическом дизайнере, который даст нам визуальное понимание того, как в итоге будет все выглядеть.
 
Допустим, наше приложение будет считать сумму вклада после начисления процентов. Для этого нам нужно поле ввода суммы вклада, поле для вывода результата и кнопку, с помощью которой мы будем инициировать вычисления итоговой суммы. Итак, изменим код файла MainPage.xaml следующим образом:
 
Итак, тут мы добавили в элемент Grid три новых элемента. Страница с графическим интерфейсом может иметь один корневой элемент, в который потом уже добавляются все остальные. В данном случае это элемент Grid.
 
Мы добавили текстовое поле (элемент TextBox) для ввода некоторого значения, кнопку для инициации действия, и элемент TextBlock для вывода результата действия.
 
С помощью атрибутов элементов мы задаем их внешний вид и позиционирование. Например, с помощью атрибута Margin задаются отступы от внешнего края. Более подробно об атрибутах и прочих элементах языка xaml мы поговорим в дальнейшем.
 
После добавления элементов и их атрибутов у нас автоматически обновится и окно дизайнера:
 
 
 
Теперь изменим код кнопки следующим образом:
 
С помощью выражения Click="button1_Click" мы добавили обработчик события Click. Таким образом, по нажатию кнопки будет срабатывать метод button1_Click . Теперь определим этот метод.
 
Откроем файл 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 HelloApp < public sealed partial class MainPage : Page < public MainPage() < this.InitializeComponent(); this.NavigationCacheMode = NavigationCacheMode.Required; >protected override void OnNavigatedTo(NavigationEventArgs e) < >> >
 
В класс MainPage добавим новый метод:
 
private void button1_Click(object sender, RoutedEventArgs e) < double capital; if(Double.TryParse(textBox1.Text,out capital)) < capital+=capital * 0.12; textBlock1.Text = capital.ToString() + " долларов"; >else < textBlock1.Text="Некорректное значение"; >>
 
В методе мы получаем введенное в текстовое поле значение и пытаемся его преобразовать к типу double. Если преобразование пройдет успешно, то выводим результат несложных вычислений.
 
Запустим на выполнение:
 
 
 
При запуске мы можем выбрать, где мы будем тестировать приложение - на реальном устройстве или эмуляторе. В моем случае я запускаю приложение на реальном смартфоне, поэтому в выпадающем списке выбираю Device . Однако можно выбрать и один из эмуляторов, если они уже установлены.
 
При запуске приложения на смартфоне важно, чтобы смартфон не находился в состоянии блокировки. Итак, запустим:
 
 
 
Введем в текстовое поле какое-нибудь число и нажмем на кнопку:
 
 
 
При тестировании через смартфон важно помнить, что при запуске приложение автоматически устанавливается на телефон, и мы можем его найти в списке всех приложений:
 
 
 
И при необходимости потом, отключившись от компьютера, также сможем его запустить, либо удалить.
 
На этом создание первого приложения завершено.
 
При подготовке материала использовались источники:

https://habr.com/ru/articles/180301/

https://metanit.com/sharp/windowsphone/1.1.php

https://metanit.com/sharp/windowsphone/1.2.php