Перенос из Windows 8 в Windows Phone 8. Общие сведения

Перенос из Windows 8 в Windows Phone 8. Общие сведения

Вначале давайте ознакомимся с приложением Contoso Cookbook.

Рис. 2. Приложение Contoso Cookbook для Windows 8: главная страница

Приложение состоит из трех страниц с рецептами, которыми пользователь может управлять. Рецепты собраны в группы и распределены по типам национальных кухонь. На главной странице (см. рисунок 2) представлены группы в несколькими рецептами национальных кухонь в каждой.

Рис. 3. Страница с группами рецептов

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

Рис. 4. Страница с рецептами

На странице с рецептами представлена подробная информация о рецепте: список ингредиентов, инструкции по приготовлению и время приготовления.

Для переноса слоя представления Contoso Cookbook придется полностью переписать большую часть кода XAML. Ниже показаны примеры заданий этого упражнения.

  • Замените элементы верхнего уровня LayoutAwarePage (в приложении Windows Store) элементами PhoneApplicationPage (в приложении Windows Phone 8).
  • Установите портретную ориентацию страницы приложения для телефона.
  • Найдите замену для пользовательских элементов управления из приложения Windows Store (например, GridView и FlipView), отсутствующих в приложении Windows Phone.
  • Скорректируйте пространства имен XAML для Windows Phone. Например, в приложениях Windows Store элемент управления Grid расположен в пространстве имен Windows.UI.Xaml.Control, а в Windows Phone 8 — в пространстве имен System.Windows.Controls.

Мы начнем с главного экрана, а затем перейдем к другим страницам приложения.

Задание 1. Создание нового проекта Windows Phone, импорт общих файлов и файлов ресурсов

  1. Запустите Visual Studio Express 2012 для Windows Phone 8.
  2. В меню File (Файл) щелкните New (Создать) и выберите Project (Проект).
  3. На панели навигации слева разверните в дереве навигации узел Templates (Шаблоны), а затем — узел Visual C#, щелкните WindowsPhone.
  4. На панели справа щелкните Windows Phone Application (Приложение Windows Phone), введите его название ContosoCookbook и нажмите кнопку ОК.

Рис. 5.Создание нового проекта Windows Phone

Убедитесь, что в диалоговом окне выбора версии указана Windows Phone OS 8.0. Затем нажмите кнопку ОК.

Рис. 6.Выбор нужной версии

Рис. 7.Изменение манифеста приложения

Рис. 8.Создание папки нового проекта

C# (приложения Windows Store)

C# (приложения Windows Phone)

Примечание. Другой метод IValueConverter — ConvertBack — имеет те же различия.

<local:LocalizedStrings xmlns:local="clr-namespace:ContosoCookbook" x:Key="LocalizedStrings"/><sys:String x:Key="AppName">Contoso Cookbook</sys:String> <sys:Double x:Key="LogoImageWidth">150</sys:Double> <common:SizeToResolutionConverter x:Key="SizeToResolutionConverter"/> <common:StringImageSourceConverter x:Key="ToImageConverter"/> <common:ImageSourceToStringConverter x:Key="ToStringConverter"/> <common:BooleanToVisibilityConverter x:Key="VisibilityConverter"/> <common:BooleanNegationConverter x:Key="BooleanNegation"/> <common:UserImagesDisplayConverter x:Key="ImagesDisplayConverter"/>

Затем добавьте два пространства имен XML в элемент Application:

Теперь мы подготовили приложение к изменению пользовательского интерфейса.

Задание 2. Перенос главной страницы

Откройте главную страницу приложения Windows Store Contoso Cookbook (файл GroupedItemsPage.xaml). При переносе этой страницы обратите внимание на различия между платформами.

  • Корневые элементы XAML-кода двух страниц отличаются. Корневой элемент приложения Windows Store — это LayoutAwarePage (производный от класса Page), а корневой элемент приложения Windows Phone — это PhoneApplicationPage.
  • XAML-код приложения Windows Store содержит двухстрочный элемент управления Grid, являющийся его корневым объектом: одна строка для заголовка и кнопки Back (Назад), другая — для содержимого страницы. Ниже представлена первая строка данной сетки:

При создании нового проекта Windows Phone в Visual Studio автоматически создается шаблон структуры MainPage.xaml, см. ниже:

Шаблон по умолчанию состоит из двухстрочного элемента управления Grid. Первая строка предназначена для заголовка: названий приложения и страницы. На второй строке располагается второй элемент управления Grid для содержимого страницы.

  1. Сравним главные страницы приложения Windows Phone 8 и приложения Windows Store, а затем внесем в заголовок сетки два изменения:
    • Ориентация. Приложение Windows Phone обычно имеет книжную ориентацию, и в нем сложно отобразить несколько столбцов. Замените сетку из двух столбцов элементом StackPanel.
    • Кнопка Back (Назад). На телефоне имеется аппаратная кнопка Back, поэтому не нужно размещать аналогичную экранную кнопку Back в приложении Windows Phone.

Руководствуясь вышесказанным, изменим XAML-код заголовка следующим образом:

Завершив работу над заголовком, перейдем к содержимому страницы. В приложении Windows Store используется новый элемент управления Semantic Zoom (Контекстное масштабирование), недоступный в приложениях Windows Phone.

Примечание. Контекстное масштабирование — это сенсорная техника, используемая в приложениях Windows 8 для отображения больших наборов связанных данных или содержимого (фотоальбом, список приложений или адресная книга) в одном представлении, а также для навигации по этим данным или содержимому. Дополнительные сведения о контекстном масштабировании см. в документации Windows 8 на сайте:http://msdn.microsoft.com/en-us/library/windows/apps/hh465319.aspx

В разделе содержимого приложения Windows Store имеется тег XAML-кода элемента управления SemanticZoom. Он определяет два разных представления, обеспечивающих, соответственно, увеличение и уменьшение. Windows Phone не поддерживает функцию контекстного масштабирования, то есть переносить состояние Zoomed In (Увеличено) в приложение Windows Phone придется вручную. Ниже представлено состояние Zoomed In для приложения Windows Store:

Представленный выше код XAML — это стандартный шаблон элемента управления GridView в приложении Windows Store со следующими модификациями.

  • Элемент ItemsPanel по умолчанию заменен элементом управления VirtualizingStackPanel.
  • Добавлен элемент GroupStyle с шаблонами HeaderTemplate и ItemsPanelTemplate.

Элемент управления GridView подходит для экранов с альбомной ориентацией; мы заменим его в приложении Windows Phone элементом ListBox, который лучше работает с книжной ориентацией. Кроме того, мы заменим элемент ItemsPanel из элемента ListBox на элемент VirtualizingStackPanel: последний гораздо лучше подходит для работы с большим количеством объектов.

Для начала создадим новый шаблон, чтобы отобразить в приложении Windows Phone группы рецептов. Добавьте следующий код в сетку ContentPanel:

Теперь внесем небольшие изменения в корневой элемент страницы приложения Windows Phone. Изменим свойство SystemTray.IsVisible элемента PhoneApplicationPage на False (значение по умолчанию — True):

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

Наконец, мы реализуем обработчик событий SelectionChanged в ListBox, как определено в коде XAML. Откройте файл MainPage.xaml.cs и добавьте в класс MainPage следующий код:

На главную страницу приложения Windows Phone внесены все необходимые изменения XAML-кода.

Примечание. Файл GroupedItemsPage.xaml содержит также вспомогательный код для прикрепленного представления Windows 8. Прикрепленное представление не поддерживается в Windows Phone, поэтому данную часть кода можно проигнорировать.

Задание 3. Перенос страницы сведений о группе

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

Рис.12. Страница со сведениями о группе

Для переноса этой страницы в Windows Phone потребуется поддерживаемый телефоном метод управления представлением, состоящим из двух столбцов (первый столбец — сведения о группе, второй — рецепты группы). Поскольку приложения Windows Phone имеют книжную ориентацию, воспользуемся элементом управления Pivot. Он служит для быстрой навигации по представлениям приложения. Его можно использовать в качестве интерфейса навигации для фильтрации больших наборов данных или переключения между представлениями и страницами. На первой странице Pivot отображаются сведения о группе, на другой — рецепты данной группы.

    Добавьте в приложение новую страницу с книжной ориентацией. В обозревателе решений Visual Studio щелкните правой кнопкой мыши название проекта, выберите Add (Добавить), а затем щелкните New Item (Новый элемент).

Рис. 13.Добавление в проект нового элемента

Рис. 14.Добавление новой страницы книжной ориентации

Кроме того, мы изменим значение свойства SystemTray.IsVisible на False:

Теперь найдите элемент Grid с именем LayoutRoot и измените его свойство Background:

Замените содержимое элемента управления LayoutRootGrid новым элементом управления Pivot:

Данный код объявляет логотип приложения в качестве названия элемента управления Pivot.

7. Затем добавьте первый элемент PivotItem со сведениями о группе национальных кухонь. Добавьте в элемент Pivot следующий код, разместив его после объявления Pivot.Title:

8. Затем добавьте второй элемент PivotItem: он будет содержать ListBox с рецептами текущей группы национальных кухонь. Добавьте после первого объявления PivotItem следующий код:

9. Наконец, добавьте в класс поддерживающего кода обработчик событий. Откройте файл GroupDetailPage.xaml.cs и добавьте следующий код:

Примечание. Мы создадим данный обработчик событий чуть позже.

10. Мы завершили перенос двух первых страниц; теперь можно переходить к последней странице.

Задание 4. Перенос страницы сведений о рабочем элементе

Напоследок мы перенесем страницу со сведениями о выбранном рецепте (ингредиенты, инструкции по приготовлению и т. д.).

В приложении Windows Store корневым элементом управления страницы является FlipView, внутри FlipView расположен элемент управления Grid с горизонтальной прокруткой. FlipView позволяет переходить от одного рецепта к другому.

Рис. 15. Страница со сведениями о рецепте

Windows Phone не имеет элемента управления FlipView, поэтому данную функциональность нужно заменить. Вместо исходной сетки с несколькими столбцами воспользуемся элементом управления Pivot. На исходной странице располагается сетка из трех столбцов, мы заменим их на три элемента PivotItem: сведения о рецепте (с изображением, описанием, инструкциями и временем приготовления), ингредиенты и изображения (предоставляются пользователем). Приложение Windows Phone также содержит панель приложения с несколькими кнопками, копирующими функции приложения Windows Store.

Примечание. Мы не будем переносить элемент управления Тimer, показанный на снимке экрана выше

  1. Добавьте новую страницу с именем RecipeDetailPage. Внесите изменения, описанные в предыдущем задании: измените свойство SystemTray и фон LayoutRoot, удалите содержимое LayoutRoot.
  2. Добавьте в LayoutRoot Grid следующий код, реализующий элемент управления Pivot с тремя элементами PivotItem:

3. Затем мы добавим элемент управления ApplicationBar с несколькими кнопками:

4. Наконец, мы добавим в файл кода программной части (RecipeDetailPage.xaml.cs) следующие обработчики событий:

private void btnShareShareTask_Click(object sender, EventArgs e)

📎📎📎📎📎📎📎📎📎📎