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

Silverlight 5, XAML и связывание данных

admin — Mon, 30 May 2011 07:51:19 +0000

В рамках on-line части конференции DevCon’11 я зыписал доклад Silverlight 5, XAML и связывание данных.

45 дней с Windows Phone 7. День #24. WebBrowser. Часть 2. Локальный контент.

admin — Thu, 03 Feb 2011 18:37:58 +0000

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

В Дне #18 мы подробно рассматривали возможности элемента управления «WebBrowser». После этого мне было задано достаточно много вопросов, преимущественно о том, как загружать локальные ресурсы, в первую очередь картинки, в данный элемент управления. Если картинка находится на удалённом web сервере, то проблем нет. Мы просто пишем её Url адрес. Но что делать, если картинка находится в ресурсах приложения? Ведь метод «NavigateToString» браузера не позволяет задать местоположение, загружаемых ресурсов.

На помощь нам приходит изолированное хранилище. Мы уже рассматривали данную тему в Дне #15. В изолированное хранилище можно положить HTML страницы и ресурсы к ним, такие как картинки, а после этого отобразить данные страницы в элементе управления «WebBrowser».

Отображение в «WebBrowser» страниц из изолированного хранилища.

Создадим новое приложение и разместим на главной странице элемент управления «WebBrowser» с именем «webBrowser1». Подпишемся на событие «Loaded» созданного элемента управления. Но перед тем как создать обработчик события, добавим функцию сохранения текстовых файлов в изолированном хранилище:

private static void SaveToIsoStore(string fileName, string text)
{
    var isoStore = IsolatedStorageFile.GetUserStoreForApplication();
    if (isoStore.FileExists(fileName))
        isoStore.DeleteFile(fileName);

    using (var sw = new StreamWriter(isoStore.CreateFile(fileName)))
    {
        sw.Write(text);
    }
}

Данная функция принимает имя и содержимое файла, который потом создаётся в изолированном хранилище.

Теперь с помощью данной функции создадим файл «fileName123.htm» и отобразим его в элементе управления «WebBrowser»:

private void WebBrowser1Loaded(object sender, RoutedEventArgs e)
{
    SaveToIsoStore("fileName123.htm", "Isolated Storage!!!");
    webBrowser1.Navigate(new Uri("fileName123.htm", UriKind.Relative));
}

Всё верно, мы можем просто передать имя файла относительно корня изолированного хранилища элементу управления «WebBrowser».

Сохранение данных из ресурсов приложения в изолированное хранилище.

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

Добавим в проект два файла: «readme.htm» и «windows-phone-7.jpg» и установим свойство «Build Action» для файлов в значение «Content».

Файл «readme.htm» – это просто html страница, на которой находится картинка «windows-phone-7.jpg»:




    Untitled Page


Windows Phone 7!
Замечательная ОС

Теперь создадим функцию сохранения в изолированном хранилище любого файла, а не только текстового, как это было в первом примере:

private static void SaveToIsoStore(string fileName, byte[] data)
{
    var strBaseDir = string.Empty;
    const string delimStr = "/";
    var delimiter = delimStr.ToCharArray();
    var dirsPath = fileName.Split(delimiter);

    var isoStore = IsolatedStorageFile.GetUserStoreForApplication();

    for (var i = 0; i < dirsPath.Length - 1; i++)
    {
        strBaseDir = Path.Combine(strBaseDir, dirsPath[i]);
        isoStore.CreateDirectory(strBaseDir);
    }

    if (isoStore.FileExists(fileName))
    {
        isoStore.DeleteFile(fileName);
    }

    using (var bw = new BinaryWriter(isoStore.CreateFile(fileName)))
    {
        bw.Write(data);
        bw.Close();
    }
}

Воспользуемся данной функцией и сохраним нужные нам файлы из ресурсов приложения. Кроме того, после сохранения файлов, перейдём в браузере на только что сохранённую страницу «readme.htm»:

private void WebBrowser1Loaded(object sender, RoutedEventArgs e)
{
    string[] files = {
                        "readme.htm",
                        "windows-phone-7.jpg"
                        };

    foreach (var f in files)
    {
        var sr = Application.GetResourceStream(new Uri(f, UriKind.Relative));
        using (var br = new BinaryReader(sr.Stream))
        {
            var data = br.ReadBytes((int)sr.Stream.Length);
            SaveToIsoStore(f, data);
        }
    }

    webBrowser1.Navigate(new Uri("readme.htm", UriKind.Relative));
}

Запустим приложение и увидим страницу с находящейся на ней картинкой:

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

Пример кода.

45 дней с Windows Phone 7. День #23. Реклама в WP7 приложениях.

admin — Tue, 25 Jan 2011 10:54:37 +0000

<< День #22. Trial (пробная) версия приложения.| День #24. WebBrowser. Часть 2. Локальный контент. >>

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

В предыдущей статье мы говорили о том, как сделать пробную (trial) версию Windows Phone 7 приложения. Эта версия, по сути, предназначена для того, чтобы приложение лучше продавалось. Сегодня мы узнаем, как можно заработать, даже создавая бесплатные приложения. А если говорить более конкретно, рассмотри, как можно добавить в приложения рекламу с помощью Microsoft Advertising SDK for Windows Phone 7.

Примите во внимание, что вывод денег, полученных от рекламы в Россию недоступен. Требуется искать обходные пути. Здесь ситуация почти как с PayPal.

С чего начать?

В первую очередь стоит посетить Microsoft Advertising pubCenter. На данном сайте описана последовательность шагов, необходимых для показа рекламы в Ваших приложениях: получение SDK, регистрация приложения, добавление рекламных элементов управления на страницы.

Так как данная серия ориентирована на разработчиков, здесь мы также рассмотрим работу с элементом управления «AdControl», служащим для показа рекламы.

Работа с элементом управления «AdControl».

Для начала Advertising SDK, в состав которого входит нужный нам элемент управления, требуется скачать и установить. Если Вы не читали предыдущий параграф и поэтому не посещали Microsoft Advertising pubCenter, то можете скачать SDK напрямую:

http://www.microsoft.com/downloads/en/details.aspx?FamilyID=b0f00afc-9709-4cc2-ba2c-57728db6cbd6

Установив SDK, добавим элемент управления «AdControl» на Toolbox в Visual Studio, как мы это делали с элементом управления «Panorama» в Дне #16.

Теперь разместим элемент управления на главной странице нашего приложения:

Нам требуется задать два обязательных свойства: AdUnitId и ApplicationId. Значения обоих свойств можно получить, зарегистрировав приложение в Microsoft Advertising pubCenter, создав там новый Ad Unit (рекламную единицу) и задав все необходимые настройки.

Использование тестовых значений при работе с «AdControl».

При разработке и тестировании приложений, содержащих рекламу, не стоит использовать настоящие значения AdUnitId и ApplicationId. Поскольку это будет выглядеть как нелегальное накручивания себе количества кликов и показов. Кроме того, «AdControl» может распознать, когда работает в эмуляторе, и не будет показывать настоящую рекламу в этом случае.

Далее я приведу тестовые значения, которые стоит использовать при отладке:

Ad Type	Ad Model	Size (WxH)	Test ApplicationId	Test AdUnitId
Text Ad	Contextual	480 x 80	test_client	TextAd
XXL Image Banner	Contextual	480 x 80	test_client	Image480_80
XL Image Banner	Contextual	300 x 50	test_client	Image300_50

В примере выше я использовал «Image480_80» баннер, который, как нетрудно догадаться из названия, будет занимать на экране область размером 480 на 80 пикселей.

Что такое «Ad Unit»?

Рекламные единицы (ad units) задают основные настройки рекламы. В том числе ту категорию рекламных объявлений, которая будет показываться. Допустим, мы создаём приложение «Таймер чистки зубов». Данное приложение поможет детям определить, сколько времени чистить каждую область рта. Поскольку родители тоже, скорее всего, захотят посмотреть, сколько их ребёнок чистит зубы, реклама в данном приложении будет в самый раз. Но не показывать же в этот момент рекламу, связанную с программированием на C++??? Требуется что-то более подходящее.

Для каждой рекламной единицы мы можем определить категории рекламных объявлений. Категорий достаточно много (примерно 385) и Вы можете выбрать несколько из них, но не более трёх. Вот как выглядит список категорий:

Для нашего приложения, помогающего чистить зубы, мы выберем, в том числе категорию «Health & Fitness – Dental Care».

После создания рекламной единицы, скопируем значения «AdUnitId» и «ApplicationId» в pubCenter, и зададим их в нашем элементе управления. Код будет выглядеть примерно так:

А так будет выглядеть приложение, запущенное в эмуляторе:

Profit!

Просто добавив рекламный элемент управления в приложение (предположим, что приложение используется реальными людьми), Вы начнёте замечать активность в pubCenter. Кроме того, в pubCenter можно найти несколько метрик, самой главной из которых для Вас является, конечно же, «Revenue» – доход.

Надо отметить, что есть интересный способ монетизации приложений. В дне #22 мы рассматривали, как сделать пробную версию приложения, но пробная версия не обязательно должна иметь урезанную функциональность. Она может быть полнофункциональной, просто в ней будет показываться реклама. Если пользователь заплатит деньги за приложение – реклама показываться перестанет. Данная модель относительно популярна.

Пример кода.

45 дней с Windows Phone 7. День #22. Trial (пробная) версия приложения.

admin — Sun, 23 Jan 2011 13:10:23 +0000

<< День #21. Приложения и игры.| День #23. Реклама в WP7 приложениях. >>

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

Вчера мы говорили о том, как добавить приложение (игру) в хаб «Games». Сегодня мы узнаем, как сделать триальную (Trial) – пробную версию приложения или игры. На самом деле это не какая-то специализированная версия (.xap файл будет тот же), а просто некоторые дополнительные проверки в коде, благодаря которым в процессе работы приложение может изменять функциональность в зависимости от того, в каком режиме работает: полном или пробном. При покупке приложения в Marketplace, пользователь имеет возможность сначала приложение попробовать, а если оно ему понравится – уже заплатить деньги и использовать полную версию.

Иллюстрация с сайта pocketgamer.co.uk

На иллюстрации процесса покупки видно, что внизу экрана присутствуют две кнопки – попробовать (try) и купить (buy). Типичным примером использования данной функциональности являются игры. Допустим, игра имеет 50 уровней. Тогда разработчик может в пробной версии оставить возможность пройти игру только до 5-ого уровня, а для прохождения остальных будет требоваться покупка игры.

Использование класса LicenseInformation.

В пространстве имён «Microsoft.Phone.Marketplace» есть, в том числе класс «LicenseInformation», который позволяет получить информацию о текущем статусе оплаты нашего приложения. Подключим нужное пространство имён:

using Microsoft.Phone.Marketplace;

Следующим шагом будет создание экземпляра класса «LicenseInformation»:

var li = new LicenseInformation();

Это почти всё, что требуется сделать. Класс «LicenseInformation» содержит функцию «IsTrial», возвращающую булевское значение и позволяющую определить, работаем ли мы в пробном режиме:

if (!li.IsTrial())
{
    //Сделать что-то, доступное только платным пользователям
}
else
{
    //Сделать что-то, доступное пробным пользователям
}

Тестирование пробного режима.

К сожалению, нет никакого встроенного способа переключения между пробным и полным режимами при разработке приложения («IsTrial()» на эмуляторе возвращает false). Но я использую достаточно простой способ, чтобы иметь возможность отлаживать пробную версию. Для этого я проверяю, находимся ли мы в режиме отладки, и если да, то сохраняю в настройках приложения параметр «trialMode» в значении «true». Делается это в файле «App.xaml.cs»:

IsolatedStorageSettings _settings = IsolatedStorageSettings.ApplicationSettings;

public App()
{
    UnhandledException += Application_UnhandledException;

    _settings["trialMode"] = false;

    if (System.Diagnostics.Debugger.IsAttached)
    {
        _settings["trialMode"] = true;

        Application.Current.Host.Settings.EnableFrameRateCounter = true;
    }

    InitializeComponent();

    InitializePhoneApplication();
}

В этом случае тестируется пробный режим, а для тестирования полного режима можно закомментировать строчку «_settings["trialMode"] = true;».

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

LicenseInformation _li = new LicenseInformation();
IsolatedStorageSettings _settings = IsolatedStorageSettings.ApplicationSettings;

// Constructor
public MainPage()
{
    InitializeComponent();

    if (_li.IsTrial() || (bool)_settings["trialMode"])
    {
        //Сделать что-то, доступное пробным пользователям
    }
    else
    {
        //Сделать что-то, доступное только платным пользователям
    }
}

Может это и не лучший способ, но он работает.

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

45 дней с Windows Phone 7. День #21. Приложения и игры.

admin — Mon, 17 Jan 2011 16:19:54 +0000

<< День #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»:

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

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

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

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

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

Видео со мной о Mobile Developer Day.

admin — Wed, 15 Dec 2010 20:33:21 +0000

Первый раз дал кому-то интервью в видео формате.

45 дней с Windows Phone 7. День #20. Уведомления (Push Notifications).

admin — Sun, 21 Nov 2010 09:28:59 +0000

<< День #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 = "" +
                                    "" +
                                    "" +
                                    "45 дней c Windows Phone 7" +
                                    "Уведомления" +
                                    "" +
                                    "";

    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);
    }
}

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

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

Пример кода.

45 дней с Windows Phone 7. День #19. Элемент управления Map.

admin — Mon, 15 Nov 2010 21:14:34 +0000

<< День #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 код элемента управления выглядит следующим образом:

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

Посмотрев на иллюстрацию выше, Вы, наверное, хотите спросить меня про белую надпись посередине карты, с текстом: «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».

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

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

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

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

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

Аналогичный результат можно получить и с помощью 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

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# коде. Естественно применять два способа одновременно не нужно, выберете один и используйте его.

45 дней с Windows Phone 7. День #18. Элемент управления WebBrowser.

admin — Thu, 11 Nov 2010 07:35:48 +0000

<< День #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:

При этом будет подключено соответствующее 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:

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

При этом элемент управления 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 = "Привет!" +
"Блог Сергея Пугачёва";
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»:

Взаимодействие со страницами, загруженными в 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:



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

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

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

Пример кода.

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

45 дней с Windows Phone 7. День #17. Элемент управления Pivot.

admin — Tue, 09 Nov 2010 12:33:20 +0000

<< День #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 можно будет посмотреть на имена (данные) с различных сторон: имена для мальчиков и девочек, мужские и женские имена по отдельности соответственно. Создадим три вкладки:

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

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

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

Теперь воспользуемся связыванием данных и определим то, что будет отображаться. Сделаем это в 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. Скачайте пример и попробуйте элемент управления в действии.