Упражнение 3. Добавление плиток со значками

В этом упражнении мы добавим в приложение Contoso Cookbook поддержку плиток со значками.

Задание 1. Изменение манифеста

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

1. Откройте файл WMAppManifest.xml.
2. Перейдите на вкладку Application UI (Пользовательский интерфейс приложения) и прокрутите ее до конца. В поле со списком Tile Template (Шаблон плитки) выберите TemplateIconic:

   

   Рис. 16.
   Выбор шаблона плитки в манифесте приложения

3. Введите в текстовое поле Tile Title (Заголовок плитки) текст «Contoso Cookbook».
4. Нажмите кнопку «…» изображения маленькой плитки и выберите файл Assets\SmallLogo.png:

   

   Рис. 17.
   Добавление изображения маленькой плитки в манифест приложения

5. Нажмите кнопку «…» изображения средней плитки и выберите файл Assets\MediumLogo.png:

   

   Рис. 18.
   Добавление изображения средней плитки в манифест приложения

6. Теперь на начальном экране приложение будет отображать настраиваемые плитки со значками.

Задание 2. Добавление поддержки плиток со значками

1. Приложение Contoso Cookbook будет использовать основную плитку приложения со значком, на которой отображается краткая информация о последних просмотренных рецептах. На плитке со значком отображается числовое поле, значок (в режиме средней и широкой плиток) и до трех строк текста (в режиме широкой плитки). Чтобы закрепить основную плитку приложения на начальном экране: пролистайте начальный экран влево, чтобы вывести список установленных приложений. Найдите приложение Contoso Cookbook, нажмите на него и удерживайте, а затем выберите в меню опцию Pin To Start (Закрепить на начальном экране).

   

   Рис. 19.
   Закрепление приложения на начальном экране

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

2. Откройте файл Features.cs.
3. Найдите класс Tile.
4. В начало файла добавьте директиву using:

using System.Windows.Media; public static void UpdateMainTile(RecipeDataGroup group) { //Get application's main tile var mainTile = ShellTile.ActiveTiles.FirstOrDefault(); if (null != mainTile) { IconicTileData tileData = new IconicTileData() { Count = group.RecipesCount, BackgroundColor = Color.FromArgb(255, 195, 61, 39), Title = "Contoso Cookbook", IconImage = new Uri("/Assets/MediumLogo.png", UriKind.RelativeOrAbsolute), SmallIconImage = new Uri("/Assets/SmallLogo.png", UriKind.RelativeOrAbsolute), WideContent1 = "Recent activity:", WideContent2 = "Browsed " + group.Title + " group", WideContent3 = "which contains " + group.RecipesCount + " recipes" }; mainTile.Update(tileData); } }

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

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

6. Откройте файл GroupDetailPage.xaml.cs.

7. Найдите метод OnNavigatedTo и замените последнюю строку (вызов метода base.OnNavigatedTo) следующим кодом:

//Update main tile with recently visited group Features.Tile.UpdateMainTile(group); base.OnNavigatedTo(e);

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

Задание 3. Тестирование поддержки плиток со значками

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

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

   

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

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

   

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

3. Нажмите кнопку «Домой». Основная плитка приложения изменилась: теперь на ней отображается информация о последней просмотренной группе рецептов.

   

   Рис. 22.
   Изменение плитки со значками на начальном экране

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

   

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

   

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

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