Блог Сергея Пугачёва

<< День #20. Уведомления (Push Notifications).| День #22. Trial (пробная) версия приложения. >>

Это двадцать первая статья серии «45 дней с Windows Phone 7».

Многие разработчики, создающие Windows Phone 7 Silverlight приложения, хотят использовать Silverlight, в том числе и для написания игр. Хотя основной платформой, позволяющей создавать игры для телефонов, является XNA, Silverlight также является мощной платформой для работы с графикой, поэтому игры, написанные на Silverlight, имеют такое же право на существование, как и XNA игры.

Если Вы создадите Silverlight Windows Phone 7 приложение (или XNA игру) и запустите его на эмуляторе, то данное приложение будет отображаться в списке всех установленных приложений телефона (данный список появляется при нажатии стрелочки вправо на главном экране). Но на реальном телефоне игры отображаются не в данном списке, а в специальном хабе «Games». Есть очень простой способ сделать так, чтобы Ваши приложения тоже отображались в данном хабе. Но делать это стоит, только если приложение действительно являются игрой. Попытка разместить приложение, не являющееся игрой, в хабе «Games» – повод для отказа в публикации приложения в Marketplace.

Помните день #1?

В первом дне данной серии мы рассматривали все файлы, входящие в проект Silverlight Windows Phone 7 приложения. В том числе и файл «WMAppManifest.xml» (он находится в папке «Properties»). Данный файл как раз и позволяет указать, что наше приложение является игрой и будет размещаться в хабе «Games».

Внутри файла «WMAppManifest.xml» находятся метаданные приложения, в том его имя, иконка, путь к стартовой странице и.т.д.

Кстати, изменение стартовой страницы – хороший способ ручного тестирования приложения. Например, вместо того, чтобы при отладке вначале загружать какую-то базовую страницу приложения, а уже потом с помощью навигации переходить на ту страницу, которую требуется отладить, можно сразу указать отлаживаемую страницу в качестве стартовой, а также передать ей некоторые параметры. Например, укажем, что вначале будет загружаться страница «ProductPage.xaml»:

<Tasks>
    <DefaultTask  Name ="_default" NavigationPage="ProductPage.xaml?id=42"/>
</Tasks>

Естественно, перед этим страницу «ProductPage.xaml» надо создать. Но вернёмся к задаче размещения нашего приложения в хабе «Games». Для этого изменим свойство «Genre» – жанр тега «App». Вот как выглядит данный тег по умолчанию (естественно, Ваших приложениях многие значения будут отличаться):

<App xmlns="" Genre="apps.normal"
ProductID="{6b6bf47b-9652-47d3-8758-fd1b11f99971}"
Title="Day22_AppsVsGames"
RuntimeType="Silverlight" Version="1.0.0.0"
Author="SergeyPugachev"
Description="An amazing demo on how to change your app's location."
Publisher="pugachve.info">

Значением жанра по умолчанию является «apps.normal». Поменяем данное значение на используемое для игр: «apps.games».

Теперь после запуска приложения на эмуляторе оно не будет отображаться в стандартном списке приложений, а так как хаба «Games» на эмуляторе нет, то приложение как будто исчезнет с телефона (запускаться из Visual Studio оно, конечно, продолжит). Далее приведу модифицированную версию тега «App»:

<App xmlns="" Genre="apps.games"
ProductID="{6b6bf47b-9652-47d3-8758-fd1b11f99971}"
Title="Day22_AppsVsGames"
RuntimeType="Silverlight" Version="1.0.0.0"
Author="SergeyPugachev"
Description="An amazing demo on how to change your app's location."
Publisher="pugachve.info">

Теперь при отладке приложения на реальном устройстве, Вы найдёте его в хабе «Games».

На данной фотографии моё приложение Вы найдёте в левом нижнем углу. Оно имеет стандартную иконку.

<< День #19. Элемент управления Map.| День #21. Приложения и игры. >>

Это двадцатая статья серии «45 дней с Windows Phone 7».

Вчера мы говорили об элементе управления «Map», который позволяет добавить картографию в Ваши приложения. Сегодня мы от элементов управления перейдём к более системным вещам. Мы рассмотрим уведомления (Push Notifications). Наверное, это одна из самых важных статей в данной серии.

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

Почему уведомления?

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

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

Как работают уведомления.

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

• При первом запуске на телефоне приложение обращается к сервису уведомлений (Microsoft’s Push Notification service), который возвращает URI. С помощью данного URI серверная часть будет оправлять уведомления на телефон.
• Когда требуется отправить уведомление, серверная часть передаёт на ранее сохранённый URI сообщение определённого формата. Сервис уведомлений передаст данное сообщение на телефон в форме Toast уведомления, Live Tile обновления или просто данных приложению.

Данная статья описывает то, как работают уведомления. Если Вы хотите увидеть пример того, как шаг за шагом реализовать уведомления в своём приложении, после прочтения данной статьи откройте Windows Phone Developer Training Kit и выполните практическое занятие.

Типы уведомлений.

Я уже говорил, что существуют три типа уведомлений. Далее приведу их список с кратким описанием каждого типа:

• Raw уведомления – этот тип уведомлений используется для отправки «сырых» данных приложению, когда само приложение запущено. Телефон никак не отображает данный тип уведомлений. Приложение просто получает данные от сервера.
• Toast уведомления – в отличие от Row уведомлений, данный тип уведомлений будет получен, если Ваше приложение не запущено. Toast уведомления всплывают полоской в верхней части экрана. Но, если Toast уведомления будут всплывать слишком часто, это может начать раздражать пользователя. Данный тип уведомления не предназначен для отправки данных приложению, для этого Вам всё равно надо передавать Raw уведомления. При нажатии на Toast уведомление пользователь быстро переключится в Ваше приложение.
• Live Tile обновления – если Ваше приложение закреплено на стартовой странице телефона, Вы можете обновить Tile приложения (квадрат на стартовой странице). Можно обновить фон квадрата и/или добавить число от одного 0 до 99.

Получение URI от сервиса уведомлений.

Для получения URI, который будет использовать серверная часть Вашего приложения при отправке уведомлений на телефон, достаточно написать всего около десяти строчек кода. В первую очередь подключите пространство имён «Microsoft.Phone.Notification». Далее создаётся объект класса «HttpNotificationChannel». В конструктор класса «HttpNotificationChannel» передаётся уникальное имя канала. Класс «HttpNotificationChannel» используется для взаимодействия с сервисом уведомлений (Push Notification service – PNS). Всё взаимодействие происходит в отдельном потоке, а для получения URI требуется подписаться на событие. В обработчике события мы уже можем получить URI. В примере ниже полученный URI выводится в окно «Output» в Visual Studio как отладочная информация. Отображать URI на экране не требуется, так как это глубоко внутренняя информация.

public partial class MainPage
{
    private readonly HttpNotificationChannel _channel;

    public MainPage()
    {
        InitializeComponent();

        _channel = new HttpNotificationChannel("pugachev.info" + DateTime.Now.Ticks);

        _channel.ChannelUriUpdated += ChannelChannelUriUpdated;
        _channel.ErrorOccurred += ChannelErrorOccurred;

        _channel.Open();
        _channel.BindToShellToast();
    }

    static void ChannelErrorOccurred(object sender, NotificationChannelErrorEventArgs e)
    {
        Debug.WriteLine("An error occured while initializing the notification channel");
        Debug.WriteLine(e.Message);
    }

    static void ChannelChannelUriUpdated(object sender, NotificationChannelUriEventArgs e)
    {
        Debug.WriteLine(e.ChannelUri);
    }
}

При выполнении данного примера кода я получил следующий URI (в вашем случае он, естественно будет другим):

http://db3.notify.live.net/throttledthirdparty/01.00/AHEHNbRDjdk3Rr6DCPlxYnbVAgAVAAADAQAAnAQUZm52OjIzOEQ1NDKDRkI5MEVFMEQ

Поле получения URI передайте его каким-то образом серверной части Вашего приложения.

Отправка уведомления.

Код отправки уведомления, приведённый ниже, выполняется на сервере. Мы будем отправлять Toast уведомление. При этом отправляется HTTP сообщение определённого формата на ранее полученный URI:

private static void SendToastNotification()
{
    var request = (HttpWebRequest)WebRequest.Create("http://db3.notify.live.net/throttledthirdparty/01.00/AAERNQbcM6D5TaCKRQDXVyGZAgAAAAADAQAAAAQUZm52OjIzOEQ2NDJDRkI5MEVFMEQ");
    request.Method = "POST";
    request.ContentType = "text/xml";
    request.Headers.Add("X-NotificationClass", "2");
    request.Headers.Add("X-WindowsPhone-Target", "toast");
    const string notificationData = "<?xml version=\"1.0\" encoding=\"utf-8\"?>" +
                                    "<wp:Notification xmlns:wp=\"WPNotification\">" +
                                    "<wp:Toast>" +
                                    "<wp:Text1>45 дней c Windows Phone 7</wp:Text1>" +
                                    "<wp:Text2>Уведомления</wp:Text2>" +
                                    "</wp:Toast>" +
                                    "</wp:Notification>";

    var contents = Encoding.UTF8.GetBytes(notificationData);
    request.ContentLength = contents.Length;

    using (var requestStream = request.GetRequestStream())
    {
        requestStream.Write(contents, 0, contents.Length);
    }

    using (var response = (HttpWebResponse)request.GetResponse())
    {
        var notificationStatus = response.Headers["X-NotificationStatus"];
        var notificationChannelStatus = response.Headers["X-SubscriptionStatus"];
        var deviceConnectionStatus = response.Headers["X-DeviceConnectionStatus"];

        Console.WriteLine("Статус: {0}. Статус канала: {1}. Статус устройства: {2}.",
            notificationStatus,
            notificationChannelStatus,
            deviceConnectionStatus);
    }
}

Как видите, код достаточно длинный. Но пример полностью показывает, как отправить уведомление. Попробуйте выполнить данный пример, и Вы увидите, каким мощным инструментом являются уведомления. С их помощью Ваше приложение может чаще оказаться перед глазами пользователя.

Иконка на иллюстрации – это иконка приложения. Её достаточно легко поменять.

Пример кода.

<< День #18. элемент управления WebBrowser.| День #20. Уведомления (Push Notifications) >>

Это девятнадцатая статья серии «45 дней с Windows Phone 7».

Вчера мы говорили про элемент управления «WebBrowser», с помощью которого можно отображать не только web сайты, но и произвольно сгенерированный HTML. Сегодня мы рассмотрим более специфический элемент управления, который позволяет показывать карту в Windows Phone 7 Silverlight приложениях. Название данного элемента управления весьма логично, он называется «Map» – карта.

Использование элемента управления «Map».

Перетащите элемент управления Map из Toolbox на страницу Silverlight приложения. При этом подключится соответствующее XML пространство имён:

xmlns:map="clr-namespace:Microsoft.Phone.Controls.Maps;
assembly=Microsoft.Phone.Controls.Maps"

После того как я задал позиционирование и размеры для карты, XAML код элемента управления выглядит следующим образом:

<map:Map Height="607" HorizontalAlignment="Left"
Name="myMap" VerticalAlignment="Top" Width="456" />

Запустим приложение и посмотрим на карту.

Посмотрев на иллюстрацию выше, Вы, наверное, хотите спросить меня про белую надпись посередине карты, с текстом: «Invalid Credentials. Sign up for a developer account.». Если вкратце, нам нужен ключ API для работы с картой. Далее в статье я расскажу, как такой ключ получить (абсолютно бесплатно, надо заметить), а также мы рассмотрим множество других аспектов работы с картой.

Регистрация аккаунта разработчика и получение ключа для работы с картой.

Регистрация аккаунта разработчика и получение ключа для работы с картой.

Итак, зайдите на портал Bing Maps и зарегистрируйтесь. Поле регистрации создайте новый ключ API в разделе «Create or view keys». Форма создания нового ключа представлена на иллюстрации ниже.

В качестве «Application URL» можете ввести адрес Вашего web сайта. После заполнения формы Вы получите ключ, похожий на данный:

AsWlUnHbvLgHlLHaRhTZLslewv1QIdGppxOqyL-6He2jxyHvLAjutrcntemUih-w9

(Нет, это не мой ключ. Я заменил достаточно много знаков. Но показанный ключ похож на тот, что Вы получите).

Задаём Credentials Provider.

После того, как Вы получите ключ API, данный ключ надо задать в приложении. Если в Вашем приложении только одна карта, просто напишите ключ в свойстве «CredentialsProvider» элемента управления «Map».

<map:Map CredentialsProvider=
"AsWlUnHbvLgHlLHaRhTZLslewv1QIdGppxOqyL-6He2jxyHvLAjutrcntemUih-w9"/>

Но, если карт в приложении несколько, лучше использовать другой подход: определить ключ API один раз в файле App.xaml, а потом с помощью механизма связывания данных задать ключ для каждой карты. Далее приведу код, добавляемый в файл App.xaml при использовании данного подхода:

<Application.Resources>
<map:ApplicationIdCredentialsProvider ApplicationId=
"AsWlUnHbvLgHlLHaRhTZLslewv1QIdGppxOqyL-6He2jxyHvLAjutrcntemUih-w9"
x:Key="BingMapsAPIKey"/>
</Application.Resources>

Теперь свойство «CredentialsProvider» у элемента управления Map измениться:

<map:Map CredentialsProvider="{StaticResource BingMapsAPIKey}">

После задания «CredentialsProvider» запустите приложение. Белая надпись посреди карты должна исчезнуть.

Добавляем точки(Pushpin) на карту.

Мы можем добавить пользовательские точки на карту как с помощью C# кода, так и в XAML разметке. Для добавления точки требуется определить местоположение, а также содержимое, являющееся, по сути, подписью. Добавим точку в XAML разметке:

<map:Map CredentialsProvider=
"AsWlUnHEvLgHlLHaRqTZLslewv1QIdGppxOqyL-7He2jxyHvLAjutrcntemUih-w9">
<map:Pushpin Location="40.1449, -82.9754" FontSize="30" 
Background="Orange" Content="1" />
</map:Map>

Аналогичный результат можно получить и с помощью C# кода:

Pushpin pushpin = new Pushpin();
Location location = new Location();
location.Latitude = 40.1449;
location.Longitude = -82.9754;
pushpin.Location = location;
pushpin.Background = new SolidColorBrush(Colors.Orange);
pushpin.Content = "1";
pushpin.FontSize = 30;
MapControl.Children.Add(pushpin);

На иллюстрации ниже показано, как только что добавленная нами точка выглядит на карте.

Если Вам интересно как преобразовать какой-либо адрес в значение широты/долготы, прочтите соответствующую статью. Данная статья описывает работу с картами в десктопном Silverlight, но актуальна и для работы с картами на телефоне.

Добавляем на карту произвольные фигуры.

Полезным классом при работе с картой является «MapPolygon». MapPolygon позволяет задать список координат, по которым на карте рисуется фигура. Данная фигура позиционируется в нужное место карты независимо от прокрутки и изменения масштаба карты. Координаты являются значениями широты/долготы, что позволяет обозначить на карте страны, регионы, места для парковки, да и вообще все, что может потребоваться обозначить в Вашем приложении. Далее я добавляю простую фигуру на карту:

XAML

<map:MapPolygon Fill="Purple"
Stroke="White" Opacity=".7"
Locations="40.1449,-82.9754 40.1449,-12.9754 10.1449,-82.9754" />

C#

MapPolygon mapPolygon = new MapPolygon();
mapPolygon.Fill = new SolidColorBrush(Colors.Purple);
mapPolygon.Stroke = new SolidColorBrush(Colors.White);
mapPolygon.Opacity = .7;
LocationCollection locations = new LocationCollection();
Location location = new Location();
location.Latitude = 40.1449;
location.Longitude = -82.9754;
Location location1 = new Location();
location1.Latitude = 40.1449;
location1.Longitude = -12.9754;
Location location2 = new Location();
location1.Latitude = 10.1449;
location1.Longitude = -82.9754;
locations.Add(location);
locations.Add(location1);
locations.Add(location2);
mapPolygon.Locations = locations;
MapControl.Children.Add(mapPolygon);

Теперь на карте у нас есть точка и фигура. Как это выглядит показано на иллюстрации ниже.

Если Вам интересны другие возможности по работе с картой, обратите внимание на Bing Maps Silverlight Control Interactive SDK. Там вы найдёте много полезной информации.

Пример кода.

Пример кода показывает, как добавить точку и фигуру на карту в XAML разметке и C# коде. Естественно применять два способа одновременно не нужно, выберете один и используйте его.

<< День #17. Элемент управления Pivot.| День #19. Элемент управления Map >>

День #24. WebBrowser. Часть 2. Локальный контент.

Это восемнадцатая статья серии «45 дней с Windows Phone 7».

Что может делать элемент управления «WebBrowser»?

Очевидно, что элемент управления WebBrowser служит для просмотра Web страниц. Но полноценным браузером данный элемент управления не является, так как у него нет адресной строки, вкладок, различных диалогов и.т.д. Можно представить данный элемент управления как некий аналог «iframe» из HTML мира. Кроме того, элемент управления WebBrowser уже имеет встроенную поддержку мультитач жестов. Вам для этого делать ничего не требуется.

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

Вообще говоря, добавить WebBrowser в Silverlight Windows Phone 7 приложение просто. Надо только перетащить данный элемент управления из Toolbox:

<phone:WebBrowser x:Name="wbMain"/>

При этом будет подключено соответствующее XML пространство имён:

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

Для того чтобы в браузере отобразить страницу, достаточно вызвать один метод:

wbMain.Navigate(new Uri("http://pugachev.info"));

Я также заменил заголовок страницы Silverlight приложения и название самого приложения. Результат показан на иллюстрации ниже.

Важно отметить, что элемент управления WebBrowser в Windows Phone 7, в отличие от своего аналога в десктопном Silverlight не нуждается в HtmlBrush, так как большинство графических преобразований можно сделать над самим браузером. Например, повернём WebBrowser на 45 градусов по оси Y:

<phone:WebBrowser x:Name="wbMain">
    <phone:WebBrowser.Projection>
        <PlaneProjection RotationY="-45"/>
    </phone:WebBrowser.Projection>
</phone:WebBrowser>

Вот как это будет выглядеть:

При этом элемент управления WebBrowser полностью интерактивен и продолжает работать как обычно. Во внебраузерном Silverlight 4 приложении мы такое бы сделать не смогли.

Загрузка локального контента.

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

Давайте теперь загрузим в браузере какую-либо страницу. Загрузка страниц будет происходить в том числе с помощью классов из XNA Framework, поэтому добавим в раздел «References» проекта нашего приложения библиотеку «Microsoft.Xna.Framework.dll». Классы из XNA часто помогают упростить разработку не только игр, но и обычных Silverlight Windows Phone 7 приложений.

Итак, в начале мы прочитаем нужную страницу с помощью StreamReader, а после этого вызовем у WebBrowser метод «NavigateToString»:

StreamReader reader = new StreamReader(TitleContainer.OpenStream("html/wp7wiki.html"));
wbMain.NavigateToString(reader.ReadToEnd());

Класс «TitleContainer» находится в пространстве имён «Microsoft.Xna.Framework». Если Вы хотите узнать больше про «Microsoft.Xna.Framework», прочитайте соответствующую статью на MSDN.

Кроме загрузки уже существующей страницы, мы можем генерировать HTML прямо в коде приложения. Далее приведу пример того, как это можно сделать:

string html = "<h1 style=\"color:red;\">Привет!</h1>" +
"<a href=\"http://pugachev.info\">Блог Сергея Пугачёва</a>";
wbMain.NavigateToString(ConvertExtendedAscii(html));

Функция «ConvertExtendedAscii» используется для устранения возможных проблем с кодировкой.

public static string ConvertExtendedAscii(string html)
{
    var retVal = "";
    var s = html.ToCharArray();

    foreach (char c in s)
    {
        if (Convert.ToInt32(c) > 127)
            retVal += "&#" + Convert.ToInt32(c) + ";";
        else
            retVal += c;
    }

    return retVal;
}

JavaScript по умолчанию отключён.

Если на Ваших страницах есть JavaScript, то просто так он работать не будет. Его поддержку надо включить явно. Сделать это очень просто, достаточно задать значение свойства «IsScriptEnabled»:

<phone:WebBrowser x:Name="wbMain" IsScriptEnabled="True"/>

Взаимодействие со страницами, загруженными в WebBrowser.

При взаимодействии со страницей, загруженной в WebBrowser мы можем вызывать из C# кода JavaScript функции, а из JavaScript уведомлять Silverlight приложение. Вызвать JavaScript функцию из C# можно с помощью «.InvokeScript()». В данном примере мы вызываем функцию «functionName» с параметром «parametr1» и получаем возвращаемое значение:

string returnValue = (string)wbMain.InvokeScript("functionName", "parametr1");

Для оповещения Silverlight приложения из JavaScript в Silverlight приложении надо подписаться на событие «ScriptNotify» элемента управления браузера. В обработчике события можно получить параметр, переданный из JavaScript:

void wbMain_ScriptNotify(object sender, NotifyEventArgs e)
{
    var value = e.Value;
}

В JavaScript для вызова оповещения надо сделать следующее:

window.external.Notify("value");

В данном примере мы передаём Silverlight приложению параметр со значением «value».

Так как взаимодействовать с JavaScript не имеет смысла до загрузки страницы, мы можем отслеживать процесс загрузки с помощью двух событий элемента управления «WebBrowser»: «Navigating» и «Navigated». Например, во время загрузки, чтобы не смущать пользователя белым экраном, можно показывать ProgressBar:

<ProgressBar Foreground="Orange" x:Name="ProgBar"
Visibility="Collapsed" IsIndeterminate="True" Height="4"
HorizontalAlignment="Left" Margin="10,66,0,0"
VerticalAlignment="Top" Width="460" />

void Browser_Navigating(object sender, NavigatingEventArgs e)
{
    ProgBar.Visibility = Visibility.Visible;
}

void Browser_Navigated(object sender, NavigationEventArgs e)
{
    ProgBar.Visibility = Visibility.Collapsed;
}

Соответственно, когда страница загружается, ProgressBar будет виден, а после загрузки страницы он будет скрыт.

Пример кода.

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

<< День #16. Элемент управления Panorama.| День #18. Элемент управления WebBrowser >>

Это семнадцатая статья серии «45 дней с Windows Phone 7».

Вчера мы говорили о том, для чего служит и как используется элемент управления «Panorama». Сегодня мы рассмотрим похожий, но всё-таки другой элемент управления, который часто путают с «Panorama» и который называется «Pivot».

Элемент управления «Pivot».

Pivot представляет собой элемент управления для создания своеобразных табов. Данный сценарий применяется в окне настроек телефона для переключения между настройками самого телефона и настройками приложений. Рассмотрим другое приложение на телефоне. Например, в календаре можно переключиться из режима «day» в режим «agenda». Данные режимы позволяют посмотреть на одни и те же данные как бы с различных сторон. Это также частый сценарий применения элемента управления «Pivot». Можно сказать даже основной сценарий. Далее приведены иллюстрации того, как всё это выглядит.

Когда следует использовать элемент управления «Panorama», а когда «Pivot».

Tim Heuer написал прекрасную статью о том, когда что стоит использовать. Вы также можете посмотреть видео на Channel 9.

Мои советы достаточно просты:

• Используйте элемент управления Panorama для Вашего приложения, кода оно представляется хабом (некой длинной лентой, которую пользователю будет интересно прокучивать), и нет необходимости в панели приложения.
• Используйте элемент управления Pivot, когда Вам надо показать одни и те же или связанные данные с различных сторон. Как бы расплывчато это не звучало.

Использование элемента управления «Pivot».

Если Вы не читали вчерашнюю статью про элемент управления Panorama, прочтите её. Там описывалось, как добавить Panorama и Pivot на Toolbox в Visual Studio. Вообще, использование Pivot очень похоже на использование Panorama и далее мы рассмотрим использование Pivot на конкретных примерах. В сегодняшнем примере мы будем применять связывание данных (Data Binding) и шаблоны данных (Data Templates) для отображения списка имён в приложении, используемом для подбора имени ребёнка. В трёх вкладках элемента управления Pivot можно будет посмотреть на имена (данные) с различных сторон: имена для мальчиков и девочек, мужские и женские имена по отдельности соответственно. Создадим три вкладки:

<controls:Pivot Title="BABY NAMES">
    <controls:PivotItem Header="boys">

    </controls:PivotItem>
    <controls:PivotItem Header="girls">

    </controls:PivotItem>
    <controls:PivotItem Header="either">

    </controls:PivotItem>
</controls:Pivot>

Но пустые вкладки мало чем могут помочь, давайте двигаться дальше.

Добавляем данные.

На каждую вкладку мы добавим элемент управления ListBox, у которого будет задан шаблон элемента (ItemTemplate). Далее приведён полный получившийся XAML код:

<controls:Pivot Title="BABY NAMES">
    <controls:PivotItem Header="boys">
        <ListBox x:Name="boyList" Margin="0,0,-12,0">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="0,0,0,17" >
                        <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </controls:PivotItem>
    <controls:PivotItem Header="girls">
        <ListBox x:Name="girlList" Margin="0,0,-12,0">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="0,0,0,17" >
                        <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </controls:PivotItem>
    <controls:PivotItem Header="either">
        <ListBox x:Name="allList" Margin="0,0,-12,0">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="0,0,0,17" >
                        <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </controls:PivotItem>
</controls:Pivot>

Теперь воспользуемся связыванием данных и определим то, что будет отображаться. Сделаем это в C# коде. Сейчас я не буду подробно рассказывать про связывание данных, так как на эту тему уже написано достаточно. Знание данной темы необходимо любому Silverlight/WPF разработчику, поэтому я предполагаю, что со связыванием данных Вы знакомы.

namespace Day17_PivotControl
{
    public partial class MainPage : PhoneApplicationPage
    {
        BabyName[] names = new BabyName[10] {new BabyName("Steve", 1, 0),
					new BabyName("Jennifer", 2, 0),
					new BabyName("Alex", 1, 2),
					new BabyName("Casey", 1, 2),
					new BabyName("Quinn", 1, 2),
					new BabyName("Anthony", 1, 0),
					new BabyName("Sarah", 2, 0),
					new BabyName("Parker", 2, 1),
					new BabyName("Jessica", 2, 0),
					new BabyName("Jeff", 1, 0)};

        // Constructor
        public MainPage()
        {
            InitializeComponent();
            boyList.ItemsSource = from n in names
                                  where (n.Gender1 == 1 || n.Gender2 == 1)
                                  orderby n.Name
                                  select new BabyName(n.Name, n.Gender1, n.Gender2);

            girlList.ItemsSource = from n in names
                                   where (n.Gender1 == 2 || n.Gender2 == 2)
                                   orderby n.Name
                                   select new BabyName(n.Name, n.Gender1, n.Gender2);

            allList.ItemsSource = from n in names
                                  orderby n.Name
                                  select new BabyName(n.Name, n.Gender1, n.Gender2);
        }
    }
}

Скачать исходный код класса «BabyName» можно в разделе «Пример кода».

В данном примере для каждой вкладки мы определяем своё представление начальных данных. В этом конкретном случае посредством фильтрации.

Хочется отметить, что в 99.99% не стоит использовать в приложении больше семи (7) вкладок/секций для элементов управления Pivot и Panorama. В первую очередь, потому, что пользователи больше просто не запомнят. А если они это не запомнят, как они будут это использовать? Семь плюс-минус два – это хорошо известный предел кратковременной памяти человека. В основном, поэтому телефонные номера редко бывают длиннее семи цифр. Вообще говоря, для большинства приложений не стоит делать даже больше пяти вкладок/секций.

Пример кода.

В данной статье приведён простой пример использования элемента управления Pivot в Silverlight приложениях для Windows Phone 7. Скачайте пример и попробуйте элемент управления в действии.