В диалоге New Project Visual Studio выберем Visual C#, Silverlight for Windows Phone и простой шаблон приложения Windows Phone Application и назовём его ExploringXAMLFeatures.
В диалоге выбора целевой операционной системы выберем Windows Phone OS 7.1
После создания проекта, окно Visual Studio примет следующий вид
Рассмотрим структуру проекта в окне Solution Explorer:
Название файла | Назначение |
AppManifest.xml | Файл манифеста, необходимый для генерации XAP файла, в который упаковывается приложение для развёртывания на телефоне. |
AssemblyInfo.cs | Ещё один конфигурационный файл, в котором определяются некоторые метаданные главной сборки(Assembly) приложения. |
WMAppManifest.xml | Файл метаданных, который содержит разнообразные настройки приложения: заголовок, задание первой страницы, пути к иконкам, определение необходимых системных возможностей и.т.д. |
App.xaml | Это файл ресурсов приложения. Здесь располагаются глобальные ресурсы (это будет рассмотрено при использовании стилей) или глобальные события (происходящие при старте приложения). Этот файл также является точкой входа приложения. |
App.xaml.cs | Файл кода (code-behind) для App.xaml. Здесь можно обрабатывать события и ошибки уровня приложения, в том числе его tombstoning. Данную концепция будет рассмотрена позднее, когда будет рассматриваться многозадачность. |
ApplicationIcon.png | Картинка, которая будет иконкой приложения в телефоне. Это действительно важный файл, так как он является первым, что увидят пользователи при работе с приложением. |
Background.png | Данная картинка используется, когда приложение закреплено на стартовом экране телефона(start screen). По сути это большая иконка приложения. Разумно сделать её визуально похожей на ApplicationIcon.png. |
MainPage.xaml | Это часть выбранного шаблона приложения. Название MainPaige не очень удачное, но именно оно используется шаблоном проекта по умолчанию. Этот страница представляет интерфейс, который видит пользователь при старте приложения. |
MainPage.xaml.cs | Файл кода страницы MainPage.xaml. |
SplashScreenImage.jpg | Данная картинка отображается во время загрузки +приложения. Можно задать свою картинку с анимацией, чтобы проинформировать, что приложение загружается. Есть техника создания очень динамичных страниц загрузки на XNA, но она выходит далеко за рамки этого цикла статей. |
Файлы XAML определяют интерфейс приложения. На самом деле - это просто XML файлы с языком разметки XAML.
Несмотря, что это самый простой проект, он содержит все ключевые элементы, которые содержат все остальные шаблоны и типы проектов.
Обратите внимание, что часть настроек, представленных в виде конфигурационных файлов, могут редактироваться в визуальном интерфейсе редактирования настроек приложения.
Добавление элементов управления на страницу XAML
Обратите внимание, что Visual Studio по умолчанию отображает и дизайн, и XAML код страницы.
Если вы переходили к просмотру других файлов решения, двойным щелчком перейдите на файл MainPage.xaml.
В XAML код файла MainPage.xaml внутрь элеметна Grid с именем ContentPanel вставьте элемент управления Button:
В окне дизайна кнопка отобразится сразу приблизительно в центре интерфейса. Обратили внимание на атрибут Name ? Это уникальный идентификатор элемента, который помогает ссылаться на него в коде. Считайте это ID атрибутом элемента управления. Давайте теперь добавим какие-нибудь действия при нажатии на эту кнопку. Есть два способа привязать событие к кнопке Button (или любому другому элементу управления). В XAML, прямо в определении Button, можно добавить атрибут Click и система InteliSense автоматически спросит, хотим ли мы сгенерировать новый обработчик событий:
Можно связать обработчик событий напрямую в коде страницы Home.xaml.cs не указывая его в XAML файле:
Public MainPage() { InitializeComponent(); MyButton.Click +=new RoutedEventHandler(MyButton_Click); }
Оба способа работают. Можете использовать любой из них. Для упрощения здесь будет использоваться определение метода в XAML. Теперь в функции MyButton_Click можно написать управляемый код, который будет изменять интерфейс или вызывать другие функции. Завершим наш пример приложения, добавив код, который будет изменять текст в TextBlock PageTitle (PageTitle – это Name, так что можно ссылаться на неё напрямую в коде) на «привет wp7». Чтобы сделать это допишем следующий код в функцию:
Private void MyButton_Click(object sender, RoutedEventArgs e) { PageTitle.Text = "привет wp7"; }
Выберем в настройках проекта Windows Device Emulator
И запустим приложение, нажав на зеленый треугольник или копку F5. После запуска приложения и нажатия на кнопку «Нажми меня», вид экрана должен быть аналогичным снимку экрана ниже:
Добавление новых страниц в проект
Только самое простое приложение состоит из одной страницы. Мы хотим научиться писать сложные многостраничные приложения. Мы можем использовать шаблоны Pivot, Panorama, можем использовать паттерн проектирования MVVM (Model-View-ViewModel), а сначала научимся добавлять новые страницы в проект и переходить между ними.
В окне Solution Explorer щелкнем правой кнопкой мыши по названия проекта, и в отобразившемся меню выберем, Add, далее New Item, в открывшемся диалоговом окне выберем Windows Phone Portrait Page и назовем её SecondPage.xaml:
Теперь у нас есть пустая XAML страница, точная копия страницы MainPage.xaml до того, как мы её отредактировали.
Чтобы лучше различать страницы, перейдем к XAML коду страницы SecondPage и у элемента TextBlock с Name PageTitle отредактируем свойство Text, как показано ниже:
Навигация между страницами приложения
Итак, у нас в проекте есть две страницы, при запуске приложения отображается страница MainPage.xaml. Как теперь перейти со страницы MainPage.xaml на SecondPage.xaml?
Попробуем два простых способа, как это сделать.
В XAML код файла MainPage.xaml после добавленного ранее кода Button, добавим код HyperlinkButton, как показано ниже:
Элемент управления HyperlinkButton имеет специальноe свойство NavigateUri, которое позволяет указать Uri для перехода. Добавим это свойство со значением /SecondPage.xaml, как показано ниже:
Запустим приложение (F5).
Когда отобразится интерфейс приложения, если мы нажмём ссылку Вторая страница, то произойдет переход на вторую, ранее созданную страницу SecondPage.xaml. Если после этого нажать на аппаратную кнопку Back, то мы вернёмся на основную (предыдущую) страницу – по умолчанию эта кнопка позволяет перейти на предыдущую активную страницу.
Теперь воспользуемся возможностью программного перехода. Сначала добавим в секцию using следующий код:
Private void MyButton_Click(object sender, RoutedEventArgs e) { NavigationService.Navigate(new Uri("/SecondPage.xaml", UriKind.Relative)); }
Запустите приложение (F5) и убедитесь, что кнопка работает также как и ссылка.
Добавим на вторую страницу (SecondPage.xaml) элементы управления и код, который бы позволял вернуться на предыдущую страницу.
В XAML код файла SecondPage.xaml внутрь элеметна Grid с именем ContentPanel вставьте элементы управления Button и HyperlinkButton, как показано ниже:
Для создания обработчика события Click кнопки MyButton на странице SecondPage кликните правой кнопкой мыши по тексту MyButton_Click в XAML редакторе и выберите Navigae to Event Handler.
Запустите приложение (F5) и убедитесь, что ссылка «Первая страница» на второй странице возвращает приложение на MainPage.
Теперь воспользуемся возможностью программного перехода. В коде страницы SecondPage.xaml.cs добавим в секцию using следующий код:
Using System.Windows.Navigation;
А затем, заменим код обработчика MyButton_Click на следующий:
Private void MyButton_Click(object sender, RoutedEventArgs e) { NavigationService.GoBack(); }
Запустите приложение (F5) и убедитесь, что кнопка Обратно на второй странице возвращает приложение на MainPage.
Обратите внимание, что в коде, который запускается по нажатию кнопки мы не использовали название страницы, на которую нам необходимо перейти, а попросили сервис навигации, представленный классом NavigationService перейти на страницу, которая была в стеке переходов перед текущей.
События перехода с/на страницы могут быть обработаны програмно, например, чтобы уточнить у пользователя, действительно ли он хочет уйти с текущей страницы.
Добавьте следующий код в файл SecondPage.xaml.cs сразу после обработчика MyButton_Click:
Protected override void OnNavigatingFrom(NavigatingCancelEventArgs e) { base.OnNavigatingFrom(e); // Если можно отменить переход, уточним у пользователя, хочет ли он остаться на текущей странице if (e.IsCancelable) { MessageBoxResult result = MessageBox.Show("Может быть останетесь?", "Подтверждение перехода", MessageBoxButton.OKCancel); if (result == MessageBoxResult.OK) { // Пользователь решил остаться e.Cancel = true; return; } } }
Код достаточно простой, чтобы вы с ним могли разобраться самостоятельно.
Запустите приложение (F5) и обратите внимание, что уточняющий диалог отображается вне зависимости от того, собираемся вы вернуться на MainPage нажатием на кнопку или по ссылке.
Теперь осталось научиться передавать между страницами параметры.
Двойным щелчком по MainPage.xaml перейдём к редактированию основной страницы. В коде MainPage.xaml добавим элемент управления TextBox, выше элемента Button, как показано ниже:
Двойным щелчком по SecondPage.xaml перейдём к редактированию основной страницы. В коде SecondPage.xaml добавим элемент управления TextBox, выше элемента Button, также как на странице MainPage:
Теперь, в обработчик события MyButton_Click страницы MainPage добавим параметры в Uri перехода на вторую страницу по кнопке:
Private void MyButton_Click(object sender, RoutedEventArgs e) { NavigationService.Navigate(new Uri("/SecondPage.xaml?text="+Uri.EscapeDataString(MyTextBox.Text), UriKind.Relative)); }
И, наконец, в код страницы SecondPage.xaml.cs, сразу же после обработчика OnNavigatedFrom, добавим обработчик прихода на страницу OnNavigatedTo и в нем обработаем приходящий параметр и выведем его в MyTextBox:
Protected override void OnNavigatedTo(NavigationEventArgs e) { base.OnNavigatedTo(e); if (NavigationContext.QueryString.ContainsKey("text")) { MyTextBox.Text = NavigationContext.QueryString["text"].ToString(); } }
Запустите приложение (F5) и проверьте, как оно работает, например, при переходе по ссылке со страницы MainPage на SecondPage.
Итоги и следующие шаги
Итак, мы разобрались с тем, что надо установить для разработки под Windows Phone 7, познакомились с доступными шаблонами и научились создавать новое приложение из шаблона. Также мы научились добавлять элементы управления, прямо в XAML код, добавлять в проект новые страницы и организовывать между ними переход по ссылке и в коде с возможностью передачи параметров.
На следующем шаге мы познакомимся с некоторыми вариантами разметки, доступными в Silverlight, рассмотрим основные элементы управления, а также узнаем, что такое контекст ввода для текстовых полей.
Последнее обновление: 31.10.2015
Запустим 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 следующим образом:
С помощью атрибутов элементов мы задаем их внешний вид и позиционирование. Например, с помощью атрибута 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 . Однако можно выбрать и один из эмуляторов, если они уже установлены.
При запуске приложения на смартфоне важно, чтобы смартфон не находился в состоянии блокировки. Итак, запустим:
Введем в текстовое поле какое-нибудь число и нажмем на кнопку:
При тестировании через смартфон важно помнить, что при запуске приложение автоматически устанавливается на телефон, и мы можем его найти в списке всех приложений:
И при необходимости потом, отключившись от компьютера, также сможем его запустить, либо удалить.
На этом создание первого приложения завершено.
При установке Windows Phone Developer Tools вы получаете следующие бесплатные инструменты и компоненты.- Windows Phone emulator
- Zune software
- XNA Game Studio 4.0
- Silverlight
- .NET Framework 4
Expression Blend for Windows Phone
Expression Blend for Windows Phone - программа для разработки дизайна, которая позволяет создавать и добавлять специальные визуальные возможности, такие как градиенты, анимации и переходы. Для некоторых задач Expression Blend проще в использовании, чем Visual Studio. Следующий список содержит некоторые задачи, которые легко выполняются с помощью Expression Blend.- Визуальное создание шаблонов данных
- Использование во время разработки тестовых данных для визуализации шаблонов данных
- Визуальное создание стилей элементов управления
- Создание и просмотр анимации
Примечание:
В этой статье описывается работа в Visual Studio 2010 Express for Windows Phone, и не будет использоваться Expression Blend for Windows Phone.
Visual Studio 2010 Express for Windows Phone
Visual Studio 2010 Express for Windows Phone включает в себя drag-and-drop дизайнер, который имитирует внешний вид телефона, редактор кода и отладчик. Если вы работали с Visual Studio для разработки других видов приложений, вы обнаружите среду для разработки мобильных приложений очень знакомой. На следующем изображении показан внешний вид Visual Studio 2010 Express for Windows Phone.Дизайнер для Windows Phone содержит панель инструметов (Toolbox), режим дизайна (Design view), режим XAML (XAML view), обозреватель решений (Solution Explorer) и окно «Свойства» (Properties window), похожие на стандартный дизайнер Visual Studio. Два ключевых различий в том, что в режиме дизайна поверхность выглядит как Windows Phone устройство, и появилось целевое устройство (Target device), которое позволит вам выбрать, будет ли вы отлаживать приложение на устройстве или эмуляторе. На следующем изображении показан внешний вид эмулятора в портретной и альбомной ориентации.
Рекомендации по проектированию интерфейса (Design Guidelines)
Важно, что бы вы знали об установленных принципах проектирования интерфейса, если вы планируете опубликовать своё Windows Phone приложения в App Hub. Рекомендации по проектированию описывают, как спроектировать пользовательский интерфейс для своего приложения.В следующей таблице приводится краткое изложение основных принципов проектирования интерфейса и требований к приложений, которые необходимо учесть при проектировании и разработке вашего приложения. Полный и самый актуальный список рекомендаций по проектированию интерфейса вы можете найти по следующей ссылке.
UI Design and Interaction Guide for Windows Phone 7
Категория | Рекомендации по проектированию |
---|---|
Навигация, фреймы и страницы |
|
Панель приложения |
|
Кнопка «Назад» |
|
Ориентация экрана |
|
Темы оформления |
|
Настройки приложения |
|
Сенсорный ввод |
|
Экранная клавиатура |
|
Элементы управления Canvas и Grid |
|
Элементы управления Panorama и Pivot |
|
Текст |
|
Дополнительные ресурсы
Ниже приведены некоторые ссылки на дополнительные ресурсы, где можно узнать больше о разработке для Windows Phone.Ресурс | Описание |
---|---|
Windows Phone App Hub | Дополнительная документация, примеры кода и сообщество по разработке для Windows Phone. |
Windows Phone Development Documentation | Официальная документация по разработке для Windows Phone на MSDN. |
Silverlight Documentation | Официальная документация по Silverlight и Silverlight for Windows Phone на MSDN. |
Code Samples for Windows Phone | Скачиваемые примеры кода, которые дополняют документацию по Windows Phone. |
Windows Phone QuickStarts | Сборник коротких статей, демонстрирующих задачи и возможности при разработке для Windows Phone. |
Windows Phone Developer Guide | Руководство разработчика, описывающее историю фиктивной компанией, которая решила использовать Windows Phone 7 как клиентское устройство для уже существующих облачного приложения. |
The Windows Phone Developer Blog | Блог, который содержит актуальную информацию и объявления прямо от команды по разработке Windows Phone. |
Windows Phone 7 Development for Absolute Beginners | Серия видеороликов для абсолютных новичков, не требующая никаких навыков программирования. |
Windows Phone 7 Jump Start | Серия видеороликов для разработчиков, не знакомых с разработкой для Windows Phone с использованием Silverlight или XNA. |
Windows Phone 7 Training Course | Видеоролики и практические занятия по разработке для Windows Phone с использованием Silverlight или XNA. |
.toolbox | Учебники и другие ресурсы для дизайнеров, обучающие, как разрабатывать дизайн приложения для Windows Phone. Включает в себя учебники по Expression Blend. |
Jeff Wilcox Blog | Блог о Silverlight, Silverlight Toolkit и Silverlight for Windows Phone. Джеф Уилкокс - это ведущий разработчик программного обеспечения в Microsoft в команде Silverlight. |
Jeff Prosise Blog | Блог о различных областях в программировании на.NET, в том числе Silverlight и Windows Phone. Джеф Просиз является опытным программистом и одним из основателей Wintellect. |
С сегодняшнего дня все разработчики могут пополнять магазин Windows 10. Если вы используете эту операционную систему, вы можете создать для нее собственное приложение. Регистрироваться в качестве разработчика не нужно, публиковать его в магазине тоже, но вы сможете пользоваться им сами или отправить его своим друзьям.
Как создать приложение для Windows 10?
Зайдите на сайт , залогиньтесь в аккаунт Microsoft и согласитесь с предложенными условиями.
Откроется начальная страница сервиса. Нажмите на «Windows 10» и выберите в разделе шаблонов «Empty App W10».
Придумайте своему приложению название, впишите его в соответствующее поле и нажмите «Start with this one!»
Вы перейдете в рабочую панель App Studio. Во вкладке «Content» вы можете наполнить приложение контентом из RSS-ленты любого сайта и различных сервисов (Facebook, Twitter, YouTube, Instagram, Flickr и так далее). Также можно использовать HTML-код.
Расположение контента на странице приложения можно настроить, нажав значок редактирования на плитке любого из блоков. Изменения не сохраняются автоматически, поэтому иногда нажимайте кнопку Save.
Во вкладке «Themes» можно выбрать любую из заготовленных тем оформления или модифицировать существующую так, чтобы она максимально подходила вашему приложению.
Во вкладке «Tiles» настраивается живая плитка приложения. Вы можете загрузить иконки разных размеров.
Вкладка «Settings» - финальная. В ней можно выбрать язык приложения, добавить описание, привязать проект к своему аккаунту разработчика и активировать показ рекламы.
В любой момент можно посмотреть, как ваше приложение будет выглядеть и работать на смартфоне, планшете и компьютере. Если необходимо внести правки, вернитесь в любую вкладку и отредактируйте контент.
Скачайте архив с приложением на компьютер, распакуйте его в какую-нибудь папку, но не спешите его запускать.
Скачайте с сайта Microsoft корневой сертификат и установите его. Затем зайдите в меню «Обновление и безопасность» параметров устройства и в разделе «Для разработчиков» включите «Режим для разработчика».
С выходом Windows 8, разработчикам был представлен абсолютно новый тип приложений – приложения в стиле Modern UI. Ну, как новый? Подобные приложения уже разрабатывались для Windows Phone. Данные приложения не имели ничего общего с привычными Windows-приложениями. Такие приложения не совместимы с предыдущими версиями Windows, обладают абсолютно новым интерфейсом (Modern) и для их разработки используется новый WinRT API
(Windows Runtime API) и Windows XAML
(язык разметки интерфейса).
Никаких проблем для написания только Windows 8-версии своего приложения не было, однако, если требовалось написать приложение не только для Windows, но и для Windows Phone, нужно было преодолеть определенные трудности. Все дело в том, что Windows Phone для своих приложений использует Silverlight и Windows Phone API, тогда, как Windows 8 использует Windows XAML и WinRT API. Они имеют некоторые существенные отличия.
Несведущему человеку может показаться, что никаких проблем это приносить не должно, хотя на деле каждая версия приложения должна быть написана с нуля полностью. Именно это является главной проблемой, так как объем работы, который требовалось выполнить, был колоссальным. Нет, конечно были способы для унификации некоторых частей приложения, но они трудны для начинающего разработчика.
В Microsoft знали об этой проблеме и долгое время работали над ее решением. Результатом этой работы стали так называемые универсальные приложения Windows (Universal Windows Apps), которые доступны начиная с Windows 8.1 Update 1 и Windows Phone 8.1 (которая до конца лета будет доступна для установки всем устройствам на Windows Phone 8). Можно предположить, что теперь приложения будут работать без перекомпиляции как на Windows, так и на Windows Phone, но это не совсем так.
Каждое приложение все так же будет создаваться и компилироваться отдельно для каждой платформы, но объем требуемой работы теперь существенно сократился. Все дело в том, что Microsoft наконец-то унифицировали большую часть API для Windows и Windows Phone. Больше всего изменений было выполнено именно на стороне Windows Phone. Отныне для написания приложений для этих двух платформ (скоро будет три, Xbox One туда же) используется WinRT API и Windows XAML. Конечно же привычный для Windows Phone Silverlight никуда не делся и даже обзавелся некоторыми дополнительными возможностями, но не о нем сейчас разговор.
Универсальные приложения теперь используют среду выполнения Windows (тот самый Windows Runtime). Эти нововведения позволяют программисту свести платформозависимый код к минимуму, ведь большинство вызовов к API идентичны.
Тестовое приложение
Сегодня предлагаю вам попробовать написать простое универсальное приложение, имя которому «Hello, World!» . Писать будем на языке C# (требуются как минимум начальные знания языка и XAML ). Для этого минимально нам понадобится:
Windows 8.1 (x86)
Это совсем минимально. С таким комплектом вы сможете разработать универсальное приложение и отлаживать его Windows-версию на своем текущем компьютере. Windows Phone-версию приложения вы сможете отлаживать только на реальном устройстве (причем требуется аккаунт разработчика).
Чтобы иметь возможность отлаживать свое приложение в эмуляторе Windows Phone, вам потребуется:
Windows 8.1 Профессиональная (x64)
Процессор с поддержкой аппаратной виртуализации для клиента Hyper-V (подходит даже бюджетный Celeron G1610 и вроде даже Pentium 4 на LGA775)
Visual Studio Express 2013 для Windows с обновлением 2
С таким комплектом вы сможете разрабатывать свое приложение более полноценно и тестировать его в различных режимах с использованием имитатора Windows-планшета и эмулятора Windows Phone.
Я же буду использовать Visual Studio Ultimate 2013 и показывать все буду именно на ней. Не волнуйтесь, от бесплатной Express интерфейс практически не отличается. Начнем!
Универсальный «Hello, World!»
Запустим Visual Studio и создадим новый проект.
В разделе «Приложения Магазина Windows» есть различные шаблоны приложений как для Windows, так и для Windows Phone. Нас интересуют именно универсальные приложения, шаблоны которых доступны в специальном подразделе.
На выбор дается два варианта: пустое приложение и приложение с Hub (это такой классный элемент управления). Остановимся на пустом приложении, ведь мы пока только учимся, и сразу лезть в дебри не следует. Пойдем от простого.
Введите имя для создаваемого приложения. Я назвал его «UniversalHelloWorld» , четко и ясно. Нажимаем «ОК» и ожидаем, пока Visual Studio создает проект. Давайте рассмотрим структуру созданного проекта.
Весь проект подразделен на три части :
Windows - содержит код и элементы, доступные только Windows-версии приложения
Windows Phone - содержит код и элементы, доступные только Windows Phone-версии приложения
Shared – содержит код и элементы, которые доступны сразу для двух платформ
Обратите внимание, что на данный момент общим являются только один элемент: App.xaml (и App.xaml.cs). Этот элемент отвечает за запуск и остановку приложения.
Вы уже можете попробовать запустить приложение. И для этого нажмите F5. Для прекращения отладки, вернитесь в Visual Studio и нажмите «Shift+F5» . Вы должны увидеть пустой экран. Первоначально будет запущена Windows-версия приложения. Чтобы выбрать, какую версию приложения запустить, найдите на панели инструментов кнопку отладки (зеленый треугольник).
Здесь вы можете выбрать, где запускать отладку вашего приложения. Имитатор выполняет имитацию Windows-планшета, у которого вы можете менять ориентацию, разрешение дисплея и прочие вещи. Кнопка «Удаленный компьютер» предназначена для запуска отладки на внешнем Windows 8 устройстве. Я для этих целей использую Surface RT.
Вернемся к смене запускаемой версии. В подменю «Запускаемый проект» вы можете выбрать «Windows Phone 8.1» . После этого содержимое базового меню изменится и на ваш выбор будет доступно множество эмуляторов.
Выберите желаемый эмулятор и запустите отладку. После того, как эмулятор запустится, вы увидите пустой экран своего приложения. После завершения отладки эмулятор закрывать совсем не требуется.
Пока каждая версия приложения имеет отдельную главную страницу MainPage.xaml. Так как наше приложения очень простое, нам совсем не требуется разный дизайн страницы на каждой платформе. Перенесите MainPage.xaml в раздел Shared, и затем удалите его из разделов Windows и Windows Phone. Структура проекта станет такой:
Открыв данный файл, вы увидите эту страну в визуальном редакторе, а также ее код разметки. Пока мы имеем следующий код:
Он всего лишь создает корневую сетку страницы, закрашенную стандартным цветом страницы. Давайте добавим на страницу одноименную надпись и кнопку для приветствия. Разместите в Grid элемент TextBlock. Код элемента будет таков:
Чтобы посмотреть, как страница выглядит в режиме планшета/десктопа и телефона, используйте выпадающий список над редактором кода.
Также добавим на страницу кнопку, которая покажет нам небольшое сообщение. Код этой кнопки такой:
Добавим для этой кнопки обработчик события ее нажатия (Click). Для этого дважды щелкните кнопку, и вы автоматически перейдете к редактору кода C#. Автоматически сгенерировался пустой обработчик.