Эта статья посвящена Дню № 9 из 31-й серии Windows 8 . Каждая из статей этой серии будет опубликована как для HTML5 / JS, так и для XAML / C # . Вы можете найти дополнительные ресурсы, загрузки и исходный код на нашем сайте .
Сегодня мы освещаем очень важную тему: живые плитки. Как мы упоминали в предыдущих статьях, ваша плитка является одной из самых важных частей успеха вашего приложения, и она является одной из самых игнорируемых.
Ваша плитка представляет ваши отношения с вашим пользователем. Они заботливо прикрепляют его к своему стартовому экрану, упорядочивают с помощью похожих приложений, даже решают, хотят они его быть большими или маленькими. Ваша работа состоит в том, чтобы сделать его максимально удобным и отвечающим их потребностям. Мы делаем это, передавая полезные обновления плитки. Вот несколько примеров из моих любимых приложений:
Как я упоминал ранее, я большой поклонник Jetpack Joyride, но их плитка тоже превосходна. Вот четыре из пяти состояний, через которые он вращается, напоминая мне о моем высоком балле, а также о достижениях, которые я еще не достиг. Эти обновления потянули меня назад не раз.
Приложение погоды, с другой стороны, не переворачивается вообще. Но мне также не нужно ничего больше, чем то, что может обеспечить одна статическая плитка, когда речь идет о погоде. Я получаю сегодняшние максимумы и минимумы, а также текущую температуру. Пятидневный прогноз всегда на расстоянии одного клика.
Наконец, я думаю, что приложение Photos может быть моим любимым. Я не выяснил, как часто он обновляет набор повернутых фотографий или даже какие библиотеки он использует, но всегда кажется, что на плитке всегда есть отличная старая фотография, которая заставляет меня вспомнить это событие. Вот пара снимков экрана:
У меня есть тысячи и тысячи старых фотографий, хранящихся в моих фотобиблиотеках (да, они резервируются в Интернете, большое спасибо), и получать от прошлого удовольствие из жизни — это здорово.
Когда мы работаем над нашими приложениями, я обнаружил, что есть несколько правил, которые мы должны знать:
- Сначала прочитайте, а затем перечитайте Рекомендации для живых плиток . Они обширны, но интересны.
- Вы должны ВСЕГДА иметь небольшую плитку. Широкие плитки желательно иметь, но вы ДОЛЖНЫ разместить небольшую плитку.
Маленькие плитки не всегда так интересны, как их старшие братья, но их все же можно передавать, чтобы показать интересную информацию. Вот маленькие плитки из трех приложений, которые я показал ранее:
Возможно, из-за нехватки места плитка Jetpack вообще не обновляется. Однако приложения «Погода» и «Фотографии» дают мне те же данные, что и на больших плитках, только в меньшем пакете.
Поскольку я изучал все возможные варианты отображения плитки, я беспокоился о том, что эта статья будет СУПЕР-длинной после того, как будет показан пример каждого возможного шаблона плитки. Как оказалось, однако, Microsoft предоставила удивительную страницу, которая показывает каждый шаблон плитки, все сорок пять из них. Убедитесь, что вы проверите эту страницу. Это определенно поможет вам выбрать подходящий для вас шаблон плитки, а также предоставит разметку XML, которая вам также понадобится.
ОБЯЗАТЕЛЬНО ПРОЧИТАЙТЕ: Каталог шаблонов плитки
Так, как мы заставляем нашу плитку танцевать? Давайте начнем.
По умолчанию в вашем приложении есть значок, который выглядит следующим образом:
(Я добавил немного серого фона к этому, чтобы вы могли видеть его на белом фоне, ваш, скорее всего, прозрачный.) Если вам нужна только статическая плитка, которая использует ваше собственное изображение размером 150 x 150 пикселей, вы можете сделать это одним из двух пути:
- Замените изображение, которое в настоящее время находится в Assets / Logo.png в вашем проекте.
- Обновите файл Package.appxmanifest и измените значение логотипа на другое изображение в вашем проекте, например:
Хорошо, достаточно скучных вещей. Давайте напишем некоторый код!
Давайте начнем с отправки уведомления о маленьких плитках, так как большие плитки будут немного сложнее. Во-первых, как мы уже говорили ранее, вам нужно решить, какой шаблон вы хотите использовать из каталога. ( Я даже создал статическую PDF-версию этого документа для вас, вот как это будет важно! )
В этом примере я выбрал TileSquareText04, который выглядит следующим образом:
И представлен этим XML (вы бы знали это, если бы открыли страницу каталога):
<tile>
<visual>
<binding template="TileSquareText04">
<text id="1">Text Field 1</text>
</binding>
</visual>
</tile>
Так что теперь нам просто нужно создать новое обновление плитки на основе этого XML и отправить его в TileUpdateManager . Вот как это работает для TileSquareText04:
//First, we grab the specific template we want to use.
XmlDocument tileData = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText04);
//Then we grab a reference to the node we want to update.
XmlNodeList textData = tileData.GetElementsByTagName("text");
//Then we set the value of that node.
textData[0].InnerText = "31 Days of Windows 8";
//Then we create a TileNotification object with that data.
TileNotification notification = new TileNotification(tileData);
//We can optionally set an expiration date on the notification.
notification.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(30);
//Finally, we push the update to the tile.
TileUpdateManager.CreateTileUpdaterForApplication().Update(notification);
Как вы можете видеть в комментариях к коду, это довольно простой процесс. Вы заметите, что мы используем обозначение массива, чтобы установить текстовое значение шаблона плитки. Это потому, что мы можем иметь более одного узла каждого типа. Если бы мы использовали TileSquareBlock вместо этого, который выглядит следующим образом:
У нас было бы два текстовых значения для обновления, которые выглядели бы так:
textData[0].InnerText = "31"; textData[1].InnerText = "Days of Windows 8";
Последнее замечание по поводу этих шаблонов заключается в том, что ваш файл SmallLogo.png, скорее всего, будет отображаться и на некоторых из этих плиток. Это отличный способ расширить ваш брендинг, но это также то, о чем нужно знать, когда вы работаете над этим. Используя шаблон TileSquareBlock, вот как на самом деле выглядит моя плитка:
Это еще одна причина, как я отмечал в первый день , для вас, чтобы вы использовали пользовательские образы для своего приложения при изучении разработки Windows 8. Без этого фиолетового изображения мне пришлось бы угадывать, какое из них использовалось, или, что еще хуже, не понимать, что оно вообще было доступно. Вы увидите, что есть много свойств, которые можно редактировать для вашей плитки в файле Package.appxmanifest вашего проекта. Мы можем не только поменять изображение логотипа, но и установить свойства фона, файл малого логотипа и другие значения текста и цвета.
Важной частью этого раздела является раскрывающийся список «Показать имя».
Я кратко упомянул об этом ранее, но я хочу убедиться, что вы понимаете, где эти изображения и значения установлены. Кроме того, просто определив в этом манифесте файл с широким логотипом, вы сразу же поддержите размер большой плитки. Фактически, это ЕДИНСТВЕННЫЙ способ поддержки широкой плитки. Ваше приложение даже не предложит размер в качестве опции, пока вы не укажете это значение. Попробуйте. Теперь давайте посмотрим, как мы отправляем обновления на большой лист.
На этот раз мы выберем шаблон Large Tile, но мы также добавим изображение, чтобы вы могли увидеть и его синтаксис.
Важный урок: помните, что пользователь контролирует здесь. Если они решили сделать вашу плитку большой или маленькой, вы не можете решить это. Однако вы можете решить, хотите ли вы поддерживать «уведомления» в обоих размерах. Я рекомендую это, потому что это дает возможность вашему пользователю обратить внимание на ваше приложение на начальном экране.
Из-за этого, когда мы отправляем обновления, мы можем создать два. Один для маленькой плитки, а другой для большой. Затем, используя магию XML, мы объединим их и отправим в виде одного уведомления. Вот как может выглядеть ваш код:
//Create the Large Tile exactly the same way.
XmlDocument largeTileData = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWidePeekImage01);
XmlNodeList largeTextData = largeTileData.GetElementsByTagName("text");
XmlNodeList imageData = largeTileData.GetElementsByTagName("image");
largeTextData[0].InnerText = "Funny cat";
largeTextData[1].InnerText = "This cat looks like it's trying to eat your face.";
((XmlElement)imageData[0]).SetAttribute("src", "ms-appx:///Assets/9-XAML-CatImage.png");
//((XmlElement)imageData[0]).SetAttribute("src", "http://jeffblankenburg.com/downloads/9-XAML-CatImage.png");
//Create a Small Tile notification also (not required, but recommended.)
XmlDocument smallTileData = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquarePeekImageAndText02);
XmlNodeList smallTileText = smallTileData.GetElementsByTagName("text");
XmlNodeList smallTileImage = smallTileData.GetElementsByTagName("image");
smallTileText[0].InnerText = "Funny cat";
smallTileText[1].InnerText = "This cat looks like it's trying to eat your face.";
((XmlElement)smallTileImage[0]).SetAttribute("src", "ms-appx:///Assets/9-XAML-CatImageSmall.png");
//Merge the two updates into one <visual> XML node
IXmlNode newNode = largeTileData.ImportNode(smallTileData.GetElementsByTagName("binding").Item(0), true);
largeTileData.GetElementsByTagName("visual").Item(0).AppendChild(newNode);
//Create the notification the same way.
TileNotification notification = new TileNotification(largeTileData);
notification.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(30);
//Push the update to the tile.
TileUpdateManager.CreateTileUpdaterForApplication().Update(notification);
Я оставил это там закомментированным, но вы можете видеть, что помимо извлечения изображений из вашего локального проекта, у вас также есть возможность использовать изображения, размещенные в Интернете. Они загружаются намного дольше, поэтому имейте это в виду при их использовании.
Например, я установил срок действия уведомления на 30 секунд, а к концу 30 секунд уведомление еще не произошло, потому что изображение еще не пришло для отображения. Ваш пробег может отличаться, но с использованием местных изображений уведомления появляются немедленно.
Вот короткое видео об этом обновлении Live Tile в действии на моем стартовом экране:
Также я упомянул, что мы объединяем два разных XML-файла, по одному для каждого шаблона. Вот небольшой шаблон для TileSquarePeekImageAndText02:
<tile>
<visual>
<binding template="TileSquarePeekImageAndText02">
<image id="1" src="image1" alt="alt text"/>
<text id="1">Text Header Field 1</text>
<text id="2">Text Field 2</text>
</binding>
</visual>
</tile>
А вот XML для большой плитки:
<tile>
<visual>
<binding template="TileWidePeekImage01">
<image id="1" src="image1.png" alt="alt text"/>
<text id="1">Text Header Field 1</text>
<text id="2">Text Field 2</text>
</binding>
</visual>
</tile>
Когда они объединены, они выглядят так:
<tile>
<visual>
<binding template="TileWidePeekImage01">
<image id="1" src="image1.png" alt="alt text"/>
<text id="1">Text Header Field 1</text>
<text id="2">Text Field 2</text>
</binding>
<binding template="TileSquarePeekImageAndText02">
<image id="1" src="image1" alt="alt text"/>
<text id="1">Text Header Field 1</text>
<text id="2">Text Field 2</text>
</binding>
</visual>
</tile>
Как видите, мы получаем несколько привязок в одном узле <visual>. Чтобы добавить дополнительные уведомления, вы должны пройти тот же процесс, добавив еще больше к этому же узлу.
Очистка ваших уведомлений
Также будут моменты, когда вы захотите удалить свои уведомления. Возможно, появилась новая информация или что-то изменилось до истечения срока годности, и вам нужно начать все сначала. Чтобы сделать это, это одна простая строка кода:
TileUpdateManager.CreateTileUpdaterForApplication().Clear();
Итак, мы рассмотрели маленькие и большие плитки, даже в комбинации, но что если вы хотите предоставить своему пользователю несколько плиток?
Вторичные плитки
Вторичные листы — это отличный способ выкладывать информацию, которую ваши пользователи хотят видеть непосредственно на начальном экране. Если вы приложение погоды, они могут закрепить несколько городов для быстрого ознакомления. Если вы приложение «Люди», вы позволяете мне прикреплять людей, которые важны для меня, чтобы я мог легко видеть, что они замышляют.
Изначально я намеревался написать целый раздел о том, как на самом деле прикрепить Вторичную плитку к стартовому экрану вашего пользователя, но Microsoft уже проделала феноменальную работу. Проверь это:
Быстрый старт: закрепление вторичной плитки
Они не только хотят, чтобы вы создали вторичную плитку, но также предоставляют вам весь код, чтобы вывести пользователя из панели приложений, определить, был ли он уже закреплен, и даже удалить плитку, когда она больше не нужна. Это отличный учебник, и я очень рекомендую его.
Резюме
Сегодня мы рассмотрели большое количество материалов, связанных с обновлениями Windows 8 Live Tile. От создания до обновлений вы можете видеть, что это довольно просто сделать из вашего приложения. Я не могу рекомендовать обновлять плитки вашего приложения соответствующей информацией как можно чаще. Это сделает ваше приложение более привлекательным для вашего пользователя.
Чтобы загрузить мое полное решение примера кода для этой статьи, щелкните значок ниже:
Завтра мы рассмотрим другую сторону уведомлений: сообщения за тосты. До тех пор, счастливого кодирования, и мы увидимся завтра!
