• Статья

Упражнение 1. Добавление поворотных плиток

В этом упражнении мы добавим в приложение Contoso Cookbook поддержку вспомогательных плиток, и начнем с поворотных плиток. Затем мы протестируем внесенные изменения и посмотрим, как с помощью новых плиток выполнять навигацию в самом приложении и как на этих плитках отображается важная информация из приложения.

Это упражнение посвящено поворотным плиткам; в следующих упражнениях мы рассмотрим еще два вида плиток: циклические плитки и плитки со значками.

Задание 1. Добавление новых изображений для плиток

В этом упражнении мы добавим новые изображения для плиток, используемых в нашем приложении.

  1. Откройте Visual Studio 2012
  2. Перейдите в папку EX1\Begin.
  3. Откройте решение ContosoCookbook.sln.
  4. В основном проекте найдите папку Assets.
  5. Щелкните правой кнопкой Visual Studio Solution Explorer и выберите Add > Existing item (Добавить > существующий элемент).
  6. Добавьте из папки Assets следующие файлы изображений:
    1. MediumLogo.png
    2. SmallLogo.png
  7. В основном проекте найдите папку Assets/Icons.
  8. Добавьте из папки Assets/Icons следующие файлы изображений:
    1. like.png
    2. unlike.png

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

Задание 2. Добавление поддержки поворотных плиток

Чтобы иметь возможность закреплять и откреплять плитки, мы должны заменить и расширить функции, реализуемые классом Common.Features.

  1. Откройте файл Features.cs.
  2. Найдите класс Tile.
  3. На оборотной стороне нашей поворотной плитки будет автоматически отображаться рецепт. Замените содержимое метода SetTile следующим кодом:
FlipTileData tileData = new FlipTileData() { //Front square data Title = item.Title, BackgroundImage = new Uri(item.GetImageUri(), UriKind.Relative), SmallBackgroundImage = new Uri(item.GetImageUri(), UriKind.Relative), //Back square data BackTitle = item.Title, BackContent = MakeString(item.Ingredients), BackBackgroundImage = new Uri(item.Group.GetImageUri(), UriKind.Relative), //Wide tile data WideBackgroundImage = new Uri(item.GetImageUri(), UriKind.Relative), WideBackBackgroundImage = new Uri(item.Group.GetImageUri(), UriKind.Relative), WideBackContent = item.Directions }; ShellTile.Create(new Uri(navDataSource, UriKind.Relative), tileData, true);

Ранее данный метод создавал стандартную плитку, на лицевой стороне которой отображалась картинка рецепта, а на обратной — карта страны происхождения рецепта. С помощью новой версии метода создается поворотная плитка; на ней отображаются ингредиенты (если выбран маленький и средний размер плитки) или инструкции по приготовлению блюда (если выбрана широкая плитка).

Обратите внимание на свойства WideBackgroundImage, WideBackBackgroupImage и WideBackContent. С помощью этих свойств мы выводим более подробную информацию на лицевой и обратной сторонах плитки, если для нее задан широкий размер.

4. Предыдущий метод SetTile использует метод MakeString, чтобы присвоить свойству BackContent представление рецепта текстовой строкой в режиме широкой плитки. Давайте внедрим этот метод. Добавьте в класс следующий метод:

private static string MakeString(ObservableCollection<string> ingredients) { string res = ""; foreach (var ingredient in ingredients) { res += ingredient + "\n"; } return res; }

Кроме того, в начало файла добавьте директиву using:

using System.Collections.ObjectModel;

Обратите внимание, что метод SetTile уже вызван обработчиком событий btnPinToStart_Click в RecipeDetailPage.xaml.cs, поэтому никаких изменений здесь вносить не нужно. В результате на поворотной плитке будет отображаться вспомогательная плитка для каждого рецепта, который пользователь закрепил на начальном экране.

Задание 3. Тестирование поддержки поворотных плиток

Теперь наше приложение Contoso Cookbook готово. Давайте протестируем поддержку поворотной плитки, запустив приложение.

  1. Скомпилируйте, разверните и запустите приложение.

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

  2. Коснитесь одной из группы рецептов.

    Рис. 2.
    Страница группы рецептов немецкой кухни

  3. Прокрутите элемент управления, чтобы отобразился сводный элемент Recipes (Рецепты). Если появится пустой экран с кнопкой Buy this App (Купить это приложение), нажмите эту кнопку, чтобы вывести рецепты.

    Рис. 3.
    Рецепты немецкой кухни

    Выберите рецепт.

    Рис. 4.
    Рецепт Saure Zipfel

  4. Коснитесь кнопки «…» в правом нижнем углу экрана. Появится кнопка Pin (Закрепить): это означает, что данная группа рецептов не закреплена на начальном экране.
  5. Коснитесь кнопки Pin и при появлении запроса Set as Lock Screen (Установить в качестве экрана блокировки) выберите Yes (Да). Таким образом вы разрешаете приложению стать поставщиком фона для экрана блокировки.
  6. Проверьте поворотную плитку выбранного вами рецепта, переключаясь между изображением блюда на лицевой стороне плитки и изображениями ингредиентов на обратной стороне.

  7. Дважды коснитесь кнопки Back (Назад), чтобы вернуться в группу рецептов и закрепить еще один рецепт.

    Проверьте обе поворотные плитки на начальном экране.

    Рис. 5.
    Поворотные плитки на начальном экране

    Коснитесь и удерживайте одну из плиток, пока не появятся значки изменения плитки.

    Рис. 6.
    Изменение поворотных плиток на начальном экране

  8. Коснитесь кнопки Unpin (Открепить) в правом верхнем углу экрана. Плитка должна исчезнуть.
  9. Коснитесь и удерживайте другую плитку, пока не появятся значки изменения плитки.

  10. Коснитесь значка Change size (Изменить размер) в правом нижнем углу плитки несколько раз, чтобы выбрать нужный размер (маленькая, средняя и широкая плитки).

    Рис. 7.
    Маленькая поворотная плитка на начальном экране

    Рис. 8.
    Широкая поворотная плитка на начальном экране

Предыдущая | Следующая