Windows Phone 7.5 платформа и возможности. Часть 7.

Перед тем как перейти непосредственно к шаблонам приложений, надо сказать несколько слов по поводу Windows Phone и Metro-дизайна. Платформа Windows Phone не просто очередная платформа для мобильных устройств. Она содержит в себе не только технологическую составляющую, но и полностью проработанную концепцию дизайна интерфейса и взаимодействия с пользователем под названием Metro-дизайн или стиль Metro. Если вы дизайнер или в вашей команде есть выделенный дизайнер, вы можете воспользоваться всей мощью инструментарий Expression Blend 4 или Expression Blend for Windows Phone, которая поставляется вместе с Windows Phone SDK. Что же делать если вы разработчик и не хотите заниматься визуальным дизайном приложения, например, вы разрабатываете бизнес-приложение и всё что от него требуется, соответствовать общему дизайну и стилю Windows Phone? Всё очень просто. Во-первых, Silverlight для телефона разработан с учётом требований Metro-дизайна, поэтому все встроенные элементы управления выполнены в Metro-дизайне. Во-вторых, по умолчанию, приложения, созданные из шаблонов из поставки Windows Phone SDK, работают, выглядят и используют стили и шрифты в соответствии с Metro-дизайном. С другой стороны, возможностей стилизации элементов управления и приложений, основанных на XAML, которые представляет Silverlight, вполне достаточно, чтобы сделать своё приложение неповторимым и узнаваемым, оставаясь в рамках стиля Metro. Руководство по дизайну интерфейсов и взаимодействию с пользователем для Windows Phone можно найти по следующей ссылке http://msdn.microsoft.com/en-us/library/hh202915.aspx Всё, что было сказано выше относится, конечно, к дизайну обычных приложений, так как требования к дизайну игровых приложений и их интерфейсу, могут существенно отличаться. При этом не надо забывать об общих принципах взаимодействия с пользователем, заложенных в концепции Windows Phone.

Сначала давайте рассмотрим три шаблона, представляющих собой три основных стиля приложения для Windows Phone:

 Windows Phone Application;

 Windows Phone Pivot Application;

 Windows Phone Panorama Application;

 

Windows Phone Application – это аналог простого диалогового приложения у которого один основной экран, через который происходит основное взаимодействие с пользователем. Windows Phone Pivot Application – это некий аналог приложения с закладками, где заголовок каждой закладки определяет содержимое. Стандартный вариант использования представляет из себя следующий случай – каждая закладка представляет собой одни и те же, в целом, данные, но в разных представлениях и/или с разной фильтрацией. Так, например, календарь, почтовый клиент и настройки телефона, все это примеры подобного подхода. Как правило, шаблон использует элемент управления Pivot. Windows Phone Panorama Application – представляет из себя приложение панораму, в котором зоны взаимодействия с пользователем также разделены на панели, но доступны они через горизонтальную прокрутку; фоновое изображение установлено сразу на всю панораму, и она имеет общий заголовок, который, тем не менее, прокручивается медленнее, чем панели; контент соседней панели справа виден при отображении текущей. Например, таким образом реализованы хабы в Windows Phone: People, Marketplace, Pictures, Music+Videos и др. Как правило, шаблон использует элемент управления Panorama. Шаблоны, заканчивающиеся на Agent – это шаблоны библиотек, для выполнения соответствующих фоновых задач:

 Windows Phone Audio Playback Agent;

 Windows Phone Audio Streaming Agent;

 Windows Phone Scheduled Task Agent;

 

Шаблон Windows Phone Databound Application – представляет из себя простой шаблон приложения с вида список – детальное представление с реализацией навигации между страницами с передачей параметров и хранением данных в глобальном VeiwModel. Шаблон Windows Phone Class Library – шаблон библиотеки классов для Windows Phone. Шаблон Windows Phone Silverlight and XNA Application для Silverlight приложения, которое может использовать XNA для рендеринга графического контента.

Давайте в диалоге New Project Visual Studio выберем Visual C#, Silverlight for Windows Phone и простой шаблон приложения Windows Phone Application и назовём его ExploringXAMLFeatures. В диалоге выбора целевой операционной системы выберем Windows Phone OS 7.1. Рассмотрим структуру проекта в окне 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. Несмотря, на то, что это самый простой проект, он содержит все ключевые элементы, которые содержат все остальные шаблоны и типы проектов. Обратите внимание, на тот факт, что часть настроек, представленных в виде конфигурационных файлов, могут редактироваться в визуальном интерфейсе редактирования настроек приложения.

Обратите внимание, что Visual Studio по умолчанию отображает и дизайн, и XAML код страницы. Если вы переходили к просмотру других файлов решения, двойным щелчком перейдите на файл MainPage.xaml. В XAML код файла MainPage.xaml внутрь элеметна Grid с именем ContentPanel вставьте элемент управления Button:

 

<!—ContentPanel — place additional content here—>

<Grid x:Name=»ContentPanel» Grid.Row=»1″ Margin=»12,0,12,0″>

<Button Content=»Нажми меня»

Name=»MyButton»

FontSize=»18″

Width=»175″

Height=»75″ />

</Grid>

В окне дизайна кнопка отобразится сразу приблизительно в центре интерфейса. Обратили внимание на атрибут 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, как показано ниже:

 

<TextBlock Name=»PageTitle»

Text=»second page»

Margin=»9,-7,0,0″

Style=»{StaticResource PhoneTextTitle1Style}»/>

Итак, у нас в проекте есть две страницы, при запуске приложения отображается страница MainPage.xaml. Как теперь перейти со страницы MainPage.xaml на SecondPage.xaml? Попробуем два простых способа, как это сделать. В XAML код файла MainPage.xaml после добавленного ранее кода Button, добавим код HyperlinkButton, как показано ниже:

 

<!—ContentPanel — place additional content here—>

<Grid x:Name=»ContentPanel» Grid.Row=»1″ Margin=»12,0,12,0″>

<Button Content=»Нажми меня»

Name=»MyButton»

FontSize=»18″

Width=»175″

Height=»75″ />

<HyperlinkButton Content=»Вторая страница»

Name=»MyHyperlinkButton»

FontSize=»18″

Width=»175″

Height=»75″

Margin=»140,350,140,185″ />

</Grid>

Элемент управления HyperlinkButton имеет специальноe свойство NavigateUri, которое позволяет указать Uri для перехода. Добавим это свойство со значением /SecondPage.xaml, как показано ниже:

 

<HyperlinkButton Content=»Вторая страница»

Name=»MyHyperlinkButton»

FontSize=»18″

Width=»175″

Height=»75″

Margin=»140,350,140,185″

NavigateUri=»/SecondPage.xaml»/>

Запустим приложение (F5).Когда отобразится интерфейс приложения, если мы нажмём ссылку Вторая страница, то произойдет переход на вторую, ранее созданную страницу SecondPage.xaml. Если после этого нажать на аппаратную кнопку Back, то мы вернёмся на основную (предыдущую) страницу – по умолчанию эта кнопка позволяет перейти на предыдущую активную страницу. Теперь воспользуемся возможностью программного перехода. Сначала добавим в секцию using следующий код:

 

using System.Windows.Navigation;

А затем, заменим код обработчика MyButton_Click на следующий:

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, как показано ниже:

 

<!—ContentPanel — place additional content here—>

<Grid x:Name=»ContentPanel» Grid.Row=»1″ Margin=»12,0,12,0″>

<Button Content=»Обратно»

Name=»MyButton»

FontSize=»18″

Width=»175″

Height=»75″

Click=»MyButton_Click» />

<HyperlinkButton Content=»Первая страница»

Name=»MyHyperlinkButton»

FontSize=»18″

Width=»175″

Height=»75″

Margin=»140,350,140,185″

NavigateUri=»/MainPage.xaml»/>

</Grid>

Для создания обработчика события 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);

// Если можно отменить переход, уточним у пользователя,

// хочет ли он остаться на текущей странице

 

По материалам предоставленным компанией Microsoft для проведения лонча по продукту и сайта http://w7phone.ru.

 

Пока нет комментариев.

Вы должны зайти чтобы оставить комментарийt.

Нет трэкбэков.
 

You need to log in to vote

The blog owner requires users to be logged in to be able to vote for this post.

Alternatively, if you do not have an account yet you can create one here.

Powered by Vote It Up