• Статья

Упражнение 2. Добавление циклических плиток

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

Задание 1. Добавление поддержки циклических плиток

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

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

  1. Откройте файл Features.cs.
  2. Найдите класс Tile.
  3. Добавьте новый метод:
public static void SetGroupTile(RecipeDataGroup group, string navDataSource) { List<Uri> list = new List<Uri>(); foreach (var recipe in group.Items) list.Add(new Uri(recipe.ImagePath.LocalPath, UriKind.Relative)); CycleTileData tileData = new CycleTileData() { Title = group.Title, SmallBackgroundImage = new Uri(group.GetImageUri(), UriKind.RelativeOrAbsolute), CycleImages = list }; ShellTile.Create(new Uri(navDataSource, UriKind.Relative), tileData, true); }

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

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

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

5. Найдите и замените элемент phone:PhoneApplicationPage.ApplicationBar следующим кодом:

<phone:PhoneApplicationPage.ApplicationBar> <shell:ApplicationBar IsVisible="True" IsMenuEnabled="False" Mode="Minimized" Opacity="1.0"> <shell:ApplicationBarIconButton x:Name="btnPinToStart" IconUri="/Assets/Icons/pin.png" Click="btnPinToStart_Click" Text="Pin To Start"/> </shell:ApplicationBar> </phone:PhoneApplicationPage.ApplicationBar>

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

7. В начало файла добавьте директиву using:

using Microsoft.Phone.Shell;

8. Добавьте в класс GroupDetailPage следующие константы:

private const string RemoveFavUri = "/Assets/Icons/unpin.png"; private const string FavUri = "/Assets/Icons/pin.png";

  1. Эти константы будут использоваться для кнопок закрепления и открепления.

  2. Добавьте следующее свойство:
public ApplicationBarIconButton pinBtn { get { var appBar = (ApplicationBar)ApplicationBar; var count = appBar.Buttons.Count; for (var i = 0; i < count; i++) { ApplicationBarIconButton btn = appBar.Buttons[i] as ApplicationBarIconButton; if (btn.IconUri.OriginalString.Contains("pin")) return btn; } return null; } }

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

void SetPinBar() { var uri = NavigationService.Source.ToString(); if (Features.Tile.TileExists(uri)) { pinBtn.IconUri = new Uri(RemoveFavUri, UriKind.Relative); pinBtn.Text = "Unpin"; } else { pinBtn.IconUri = new Uri(FavUri, UriKind.Relative); pinBtn.Text = "Pin"; } }

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

SetPinBar(); base.OnNavigatedTo(e);

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

private void btnPinToStart_Click(object sender, EventArgs e) { var uri = NavigationService.Source.ToString(); if (Features.Tile.TileExists(uri)) Features.Tile.DeleteTile(uri); else Features.Tile.SetGroupTile(group, uri); SetPinBar(); }

Задание 2. Тестирование поддержки циклических плиток

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

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

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

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

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

    Коснитесь кнопки «…» в правом нижнем углу экрана. Появится кнопка Pin (Закрепить): это означает, что данная группа рецептов не закреплена на начальном экране.

    Рис. 11.
    Страница группы рецептов немецкой кухни со строкой меню приложения

  3. Коснитесь кнопки Pin (Закрепить). На начальном экране появится циклическая плитка выбранной группы рецептов. Понаблюдайте за плиткой в течение нескольких секунд и убедитесь, что изображения на плитке периодически меняются.

    Рис. 12.
    Рецепты немецкой кухни на циклической плитке, закрепленной на начальном экране

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

    Рис. 13.
    Изменение циклической плитки

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

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

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

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