Создание адаптивных плиток Create adaptive tiles

Шаблоны адаптивных плиток — это новая возможность в Windows 10, которая позволяет создавать собственные уведомления плиток с помощью простого и гибкого языка разметки, который адаптируется к различной плотности экрана. Adaptive tile templates are a new feature in Windows 10, allowing you to design your own tile notification content using a simple and flexible markup language that adapts to different screen densities. В этой статье рассказывается, как создать адаптивные живые плитки для вашего приложения для Windows. This article tells you how to create adaptive live tiles for your Windows app. Полный список адаптивных элементов и атрибутов см. в разделе Схема адаптивных плиток. For the complete list of adaptive elements and attributes, see the Adaptive tiles schema.

(При желании вы можете по-прежнему использовать стандартные шаблоны из каталога шаблонов плиток Windows 8 при создании уведомлений для Windows 10.) (If you’d like, you can still use the preset templates from the Windows 8 tile template catalog when designing notifications for Windows 10.)

Начало работы Getting started

Установите библиотеку уведомлений. Install Notifications library. Если вы хотите использовать C# вместо XML для создания уведомлений, установите пакет NuGet с именем Microsoft.Toolkit.Uwp.Notifications (выполните поиск по критерию «notifications uwp»). If you’d like to use C# instead of XML to generate notifications, install the NuGet package named Microsoft.Toolkit.Uwp.Notifications (search for «notifications uwp»). В примерах с C# в этой статье используется версия 1.0.0 пакета NuGet. The C# samples provided in this article use version 1.0.0 of the NuGet package.

Установите Визуализатор уведомлений. Install Notifications Visualizer. Это бесплатное приложение для Windows помогает проектировать адаптивные динамические плитки, предоставляя мгновенное визуальное представление плитки при редактировании, аналогично редактору XAML в Visual Studio или представлению конструктора. This free Windows app helps you design adaptive live tiles by providing an instant visual preview of your tile as you edit it, similar to Visual Studio’s XAML editor/design view. Смотрите в разделе Визуализатор уведомлений дополнительные сведения или загрузите Notifications Visualizer из Store. See Notifications Visualizer for more information, or download Notifications Visualizer from the Store.

Отправка уведомления на плитке How to send a tile notification

Ознакомьтесь с нашим Кратким руководством по отправке локальных уведомлений на плитке. Please read our Quickstart on sending local tile notifications. В документации, приведенной ниже, описываются все визуальные возможности пользовательского интерфейса адаптивных плиток. The documentation below explains all the visual UI possibilities you have with adaptive tiles.

Руководство по использованию Usage guidance

Адаптивные шаблоны предназначены для работы с различными форм-факторами устройств и типами уведомлений. Adaptive templates are designed to work across different form factors and notification types. Такие элементы, как группы и подгруппы, связывают содержимое и не подразумевают определенного самостоятельного визуального поведения. Elements such as group and subgroup link together content and don’t imply a particular visual behavior on their own. Окончательный вид уведомления должен зависеть от конкретного устройства, на котором оно появляется, будь то телефон, планшет, настольный компьютер или другое устройство. The final appearance of a notification should be based on the specific device on which it will appear, whether it’s phone, tablet, or desktop, or another device.

Подсказки — это дополнительные атрибуты, которые можно добавлять к элементам, чтобы добиться определенного визуального поведения. Hints are optional attributes that can be added to elements in order to achieve a specific visual behavior. Подсказки могут зависеть от устройства или уведомления. Hints can be device-specific or notification-specific.

Базовый пример A basic example

В этом примере показано, чего можно добиться с помощью шаблонов адаптивных плиток. This example demonstrates what the adaptive tile templates can produce.

Результат: Result:

Размеры плиток Tile sizes

Содержимое плитки каждого размера индивидуально задается в отдельных элементах TileBinding полезной XML-нагрузки. Content for each tile size is individually specified in separate TileBinding elements within the XML payload. Выберите целевой размер, задав для атрибута шаблона одно из следующих значений: Choose the target size by setting the template attribute to one of the following values:

• TileSmall TileSmall
• TileMedium TileMedium
• TileWide TileWide
• TileLarge (только для настольных компьютеров) TileLarge (only for desktop)

Для полезных данных XML уведомления одной плитки предоставьте элементы для каждого размера плитки, который вы хотите поддерживать, как показано в следующем примере. For a single tile notification XML payload, provide elements for each tile size that you’d like to support, as shown in this example:

Результат: Result:

Фирменная символика Branding

Вы можете контролировать фирменную символику в нижней части живой плитки (отображаемое имя и угловой логотип) с помощью атрибута branding в полезных данных уведомления. You can control the branding on the bottom of a live tile (the display name and corner logo) by using the branding attribute on the notification payload. Доступные значения: none (нет), name (только имя), logo (только логотип) или nameAndLogo (имя и логотип). You can choose to display «none,» only the «name,» only the «logo,» or both with «nameAndLogo.»

Примечание . Windows Mobile не поддерживает угловой логотип, поэтому по умолчанию для «logo» и «nameAndLogo» используется значение name. Note Windows Mobile doesn’t support the corner logo, so «logo» and «nameAndLogo» default to «name» on Mobile.

Результат: Result:

Фирменная символика может применяться к определенным размерам плиток одним из двух способов: Branding can be applied for specific tile sizes one of two ways:

1. указанием атрибута в элементе TileBinding; By applying the attribute on the TileBinding element
2. указанием атрибута в элементе TileVisual, который влияет на все полезные данные уведомления, если не задать фирменную символику для привязки, то будет использоваться фирменный стиль, заданный для визуального элемента. By applying the attribute on the TileVisual element, which affects the entire notification payload If you don’t specify branding for a binding, it will use the branding that’s provided on the visual element.

Результат фирменной символики по умолчанию: Default branding result:

Если не указать фирменную символику в полезных данных уведомления, она определяется свойствами базовой плитки. If you don’t specify the branding in your notification payload, the base tile’s properties will determine the branding. Если базовая плитка показывает отображаемое имя, по умолчанию используется значение name. If the base tile shows the display name, then the branding will default to «name.» В противном случае применяется значение none, если отображаемое имя не показано. Otherwise, the branding will default to «none» if the display name isn’t shown.

Примечание . В Windows 8.x в по умолчанию использовалось значение «logo». Note This is a change from Windows 8.x, in which the default branding was «logo.»

Отображаемое имя Display name

Вы можете переопределить отображаемое имя уведомления, введя собственную текстовую строку в атрибуте displayName . You can override the display name of a notification by entering the text string of your choice with the displayName attribute. Как и с фирменной символикой, вы можете задать атрибут в элементе TileVisual, который влияет на все полезные данные уведомления, или в элементе TileBinding, который применяется к отдельным плиткам. As with branding, you can specify this on the TileVisual element, which affects the entire notification payload, or on the TileBinding element, which only affects individual tiles.

Известная проблема . Если в Windows Mobile указать короткое имя плитки, отображаемое имя, указанное в уведомлении, не будут использоваться (всегда отображается короткое имя). Known Issue On Windows Mobile, if you specify a ShortName for your Tile, the display name provided in your notification will not be used (the ShortName will always be displayed).

Результат: Result:

Текст Text

Для отображения текста используется элемент AdaptiveText. The AdaptiveText element is used to display text. Можно использовать подсказки, чтобы изменить способ отображения текста. You can use hints to modify how text appears.

Результат: Result:

Обтекание текстом Text wrapping

По умолчанию текст не переносится и продолжается после края плитки. By default, text doesn’t wrap and will continue off the edge of the tile. Используйте hint-wrap для настройки обтекания текстом для текстового элемента. Use the hint-wrap attribute to set text wrapping on a text element. Вы также можете задать минимальное и максимальное число строк с помощью атрибутов hint-minLines и hint-maxLines , которые принимают положительные целые числа. You can also control the minimum and maximum number of lines by using hint-minLines and hint-maxLines , both of which accept positive integers.

Результат: Result:

Стили текста Text styles

Стили определяют размер и цвет шрифта, а также насыщенность текстовых элементов. Styles control the font size, color, and weight of text elements. Доступно несколько стилей, включая «утонченную» версию каждого стиля с прозрачностью 60 %, отчего цвет текста обычно становится светло-серым. There are a number of available styles, including a «subtle» variation of each style that sets the opacity to 60%, which usually makes the text color a shade of light gray.

Результат: Result:

Примечание . Если hint-style не указан, по умолчанию используется стиль caption. Note The style defaults to caption if hint-style isn’t specified.

Базовые стили текста Basic text styles

Высота шрифта Font height Насыщенность шрифта Font weight caption caption 12 эффективных пикселей (epx) 12 effective pixels (epx) Обычный Regular текст body 15 epx 15 epx Обычный Regular base base 15 epx 15 epx Полужирный Semibold subtitle subtitle 20 epx 20 epx Обычный Regular title title 24 epx 24 epx Полусветлый Semilight subheader subheader 34 epx 34 epx Светлая Light заголовок header 46 epx 46 epx Светлая Light

Числовые варианты стилей текста Numeral text style variations

Эти варианты уменьшают высоту строки, чтобы содержимое сверху и снизу находилось намного ближе к тексту. These variations reduce the line height so that content above and below come much closer to the text.

Утонченные варианты стилей текста Subtle text style variations

У каждого стиля есть утонченный вариант с прозрачностью текста 60 %, из-за чего цвет текста обычно становится светло-серым. Each style has a subtle variation that gives the text a 60% opacity, which usually makes the text color a shade of light gray.

Выравнивание текста Text alignment

Текст может быть выровнен по левому краю, центру или правому краю. Text can be horizontally aligned left, center, or right. В языках с написанием слева направо языках, таких как английский, по умолчанию текст выравнивается по левому краю. In left-to-right languages like English, text defaults to left-aligned. В языках с написанием справа налево, таких как арабский, по умолчанию текст выравнивается по правому краю. In right-to-left languages like Arabic, text defaults to right-aligned. Можно вручную задать выравнивание с помощью атрибута элементов hint-align . You can manually set alignment with the hint-align attribute on elements.

Результат: Result:

Группы и подгруппы Groups and subgroups

Группы позволяют семантически объявить, что содержимое в группе взаимосвязано и должно отображаться согласованно. Groups allow you to semantically declare that the content inside the group is related and must be displayed in its entirety for the content to make sense. Например, у вас может быть два текстовых элемента, заголовок и подзаголовок, поэтому не имеет смысла отображать только заголовок. For example, you might have two text elements, a header, and a subheader, and it would not make sense for only the header to be shown. Если объединить эти элементы в подгруппу, они или будут отображаться все вместе (если помещаются), или не будут отображаться вовсе (если не помещаются). By grouping those elements inside a subgroup, the elements will either all be displayed (if they can fit) or not be displayed at all (because they can’t fit).

Для оптимальной работы на разных устройствах и экранах создайте несколько групп. To provide the best experience across devices and screens, provide multiple groups. Несколько групп также позволяют плитке адаптироваться к большим экранам. Having multiple groups allows your tile to adapt to larger screens.

Примечание . Единственный допустимый дочерний элемент группы — это подгруппа. Note The only valid child of a group is a subgroup.

Результат: Result:

Подгруппы (столбцы) Subgroups (columns)

Подгруппы также позволяют разбить данные на семантические разделы в группе. Subgroups also allow you to divide data into semantic sections within a group. Для живых плиток визуально это соответствует столбцам. For live tiles, this visually translates to columns.

Атрибут hint-weight позволяет указать ширину столбцов. The hint-weight attribute lets you to control the widths of columns. Значение hint-weight выражается как взвешенная доля доступного пространства, что аналогично поведению GridUnitType.Star . The value of hint-weight is expressed as a weighted proportion of available space, which is identical to GridUnitType.Star behavior. Для столбцов равной ширины присвойте каждому из них вес 1. For equal-width columns, assign each weight to 1.

hint-weight hint-weight	Доля ширины в процентах Percentage of width
1 1	25 % 25%
1 1	25 % 25%
1 1	25 % 25%
1 1	25 % 25%
Общий вес: 4 Total weight: 4

Чтобы сделать один столбец в два раза шире другого, назначьте меньшему столбцу вес 1, а большему — вес 2. To make one column twice as large as another column, assign the smaller column a weight of 1 and the larger column a weight of 2.

hint-weight hint-weight	Доля ширины в процентах Percentage of width
1 1	33,3 % 33.3%
2 2	66,7 % 66.7%
Общий вес: 3 Total weight: 3

Чтобы первый столбец занимал 20% от общей ширины, а второй — 80% от общей ширины, назначьте первый вес равный 20, а второй вес равный 80. If you want your first column to take up 20% of the total width and your second column to take up 80% of the total width, assign the first weight to 20 and the second weight to 80. Если общий вес равен 100, то веса соответствуют процентам. If your total weights equal 100, they’ll act as percentages.

hint-weight hint-weight	Доля ширины в процентах Percentage of width
20 20	20 % 20%
80 80	80 % 80%
Общий вес: 100 Total weight: 100

Примечание . Между столбцами автоматически добавляется поле в 8 пикселей. Note An 8-pixel margin is automatically added between the columns.

Если подгрупп больше двух, следует указать атрибут hint-weight , который принимает только целые положительные числа. When you have more than two subgroups, you should specify the hint-weight , which only accepts positive integers. Если не указать атрибут hint-weight для первой подгруппы, ей будет назначен вес 50. If you don’t specify hint-weight for the first subgroup, it will be assigned a weight of 50. Следующей подгруппе, для которой не задан атрибут hint-weight, будет назначен вес, равный 100 минус сумма предшествующих весов или 1, если результат равен нулю. The next subgroup that doesn’t have a specified hint-weight will be assigned a weight equal to 100 minus the sum of the preceding weights, or to 1 if the result is zero. Оставшимся подгруппам, для которых не заданы атрибуты hint-weight, будет назначен вес 1. The remaining subgroups that don’t have specified hint-weights will be assigned a weight of 1.

Вот пример кода для плитки погоды, в котором показано, как получить плитку с пятью одинаковыми столбцами. Here’s sample code for a weather tile that shows how you can achieve a tile with five columns of equal width:

Результат: Result:

изображения; Images

Элемент используется для показа изображений на уведомлении плитки. The element is used to display images on the tile notification. Изображения можно разместить вместе с содержимым плитки (по умолчанию), как фоновое изображение за содержимым или как всплывающее изображение, которое анимируется в верхней части уведомления. Images can be placed inline within the tile content (default), as a background image behind your content, or as a peek image that animates in from the top of the notification.

В уведомлении можно использовать изображения из пакета приложения, локального хранилища приложения или из Интернета. Images can be used from the app’s package, the app’s local storage, or from the web. Начиная с обновления Fall Creators Update размер веб-изображений может быть до 3 МБ для обычных подключений и до 1 МБ для лимитных подключений. As of the Fall Creators Update, web images can be up to 3 MB on normal connections and 1 MB on metered connections. На устройствах без Fall Creators Update размер веб-изображений не должен превышать 200 КБ. On devices not yet running the Fall Creators Update, web images must be no larger than 200 KB.

Если дополнительные аспекты поведения не определены, изображения будут равномерно сжиматься или увеличиваться для заполнения доступной ширины. With no extra behaviors specified, images will uniformly shrink or expand to fill the available width. В этом примере показана плитка с двумя столбцами и встроенными изображениями. This example shows a tile using two columns and inline images. Встроенные изображения растягиваются, заполняя всю ширину столбца. The inline images stretch to fill the width of the column.

Результат: Result:

Изображения, размещенные в корневом элементе или в первой группе, также растягиваются по всей доступной высоте. Images placed in the root, or in the first group, will also stretch to fit the available height.

Выравнивание изображений Image alignment

Изображения можно выравнивать по левому краю, центру или правому краю с помощью атрибута hint-align . Images can be set to align left, center, or right using the hint-align attribute. Также при этом изображения будут показываться в исходном разрешении, а не растягиваться на всю ширину. This will also cause images to display at their native resolution instead of stretching to fill width.

Результат: Result:

Поля изображений Image margins

По умолчанию для встроенных изображений применяется поле в 8 пикселей между любым содержимым над или под изображением. By default, inline images have an 8-pixel margin between any content above or below the image. Это поле можно удалить с помощью атрибута изображения hint-removeMargin . This margin can be removed by using the hint-removeMargin attribute on the image. Однако для изображений всегда сохраняется 8-пиксельное поле от края плитки, а для подгрупп (столбцов) всегда сохраняется 8-пиксельная отбивка между столбцами. However, images always retain the 8-pixel margin from the edge of the tile, and subgroups (columns) always retain the 8-pixel padding between columns.

Кадрирование изображений Image cropping

Изображения можно обрезать в форме круга с помощью атрибута hint-crop , который в настоящий момент поддерживает только значения «none» (по умолчанию) или «circle». Images can be cropped into a circle using the hint-crop attribute, which currently only supports the values «none» (default) or «circle.»

Результат: Result:

Фоновое изображение Background image

Чтобы задать фоновое изображение, разместите элемент изображения в корневом элементе и задайте для атрибута placement значение background. To set a background image, place an image element in the root of the and set the placement attribute to «background.»

Результат: Result:

Всплывающее изображение Peek image

Вы можете указать изображение, которое «выглядывает» из-за верхней границы плитки. You can specify an image that «peeks» in from the top of the tile. Такое изображение использует анимацию для скольжения вниз и вверх в верхней части плитки, отображаясь полностью и затем скрываясь, чтобы показать основное содержимое плитки. The peek image uses an animation to slide down/up from the top of the tile, peeking into view, and then later sliding back out to reveal the main content on the tile. Чтобы задать всплывающее изображение, разместите элемент изображения в корневом элементе и задайте для атрибута placement значение peek. To set a peek image, place an image element in the root of the , and set the placement attribute to «peek.»

Обрезка по кругу для обзорных и фоновых изображений Circle crop for peek and background images

Используйте атрибут hint-crop на обзорных и фоновых изображениях для выполнения обрезки по кругу: Use the hint-crop attribute on peek and background images to do a circle crop:

Результат должен выглядеть так: The result will look like this:

Использование обзорного и фонового изображения Use both peek and background image

Чтобы использовать обзорное и фоновое изображение в уведомлении на плитке, укажите обзорное и фоновое изображение в полезных данных уведомления. To use both a peek and a background image on a tile notification, specify both a peek image and a background image in your notification payload.

Результат должен выглядеть так: The result will look like this:

Наложения обзорных и фоновых изображений Peek and background image overlays

Можно включить черное наложение на фоновые и обзорные изображения с помощью атрибута hint-overlay , который принимает целые числа от 0 до 100, где 0 означает отсутствие наложения, а 100 — полное наложение черного цвета. You can set a black overlay on your background and peek images using hint-overlay , which accepts integers from 0-100, with 0 being no overlay and 100 being full black overlay. Наложение помогает обеспечить удобство чтения текста на плитке. You can use the overlay to help ensure that text on your tile is readable.

Использование наложения подсказки на фоновом изображении Use hint-overlay on a background image

Для фонового изображения по умолчанию используется наложение 20 % при условии наличия текстовых элементов в полезных данных (в противном случае используется наложение 0 %). Your background image will default to 20% overlay as long as you have some text elements in your payload (otherwise it will default to 0% overlay).

Результат hint-overlay: hint-overlay Result:

Использование наложения подсказки на обзорном изображении Use hint-overlay on a peek image

В версии 1511 Windows 10 также поддерживается наложение обзорного изображения точно так же, как фонового. In Version 1511 of Windows 10, we support an overlay for your peek image too, just like your background image. Укажите наложение подсказки на элемент обзорного изображения в виде целого числа от 0 до 100. Specify hint-overlay on the peek image element as an integer from 0-100. По умолчанию для обзорных изображений используется наложение 0 (без наложения). The default overlay for peek images is 0 (no overlay).

В этом примере показано обзорное изображение с уровнем непрозрачности 20 % (слева) и с непрозрачностью 0 % (справа): This example shows a peek image at 20% opacity (left) and at 0% opacity (right):

Вертикальное выравнивание (размещение текста) Vertical alignment (text stacking)

Контролируйте вертикальное выравнивание содержимого в плитке, используя атрибут hint-textStacking в обоих элементах TileBinding и AdaptiveSubgroup. You can control the vertical alignment of content on your tile by using the hint-textStacking attribute on both the TileBinding element and AdaptiveSubgroup element. По умолчанию все содержимое вертикально выравнивается по верхней границе, но также можно выравнивать его по нижней границе или центру. By default, everything is vertically aligned to the top, but you can also align content to the bottom or center.

Размещение текста в элементе binding Text stacking on binding element

При использовании на уровне элемента TileBinding, размещение текста задает вертикальное выравнивание содержимого уведомления в целом; выравнивание производится в доступном месте по вертикали выше области фирменной символики или эмблемы. When applied at the TileBinding level, text stacking sets the vertical alignment of the notification content as a whole, aligning in the available vertical space above the branding/badge area.

Размещение текста в элементе subgroup Text stacking on subgroup element

При использовании на уровне элемента AdaptiveSubgroup, размещение текста задает вертикальное выравнивание содержимого подгруппы (столбца); выравнивание производится в доступном месте по вертикали во всей группе. When applied at the AdaptiveSubgroup level, text stacking sets the vertical alignment of the subgroup (column) content, aligning in the available vertical space within the entire group.