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

Статья
07/05/2024

Адаптивные шаблоны плиток — это новая функция в Windows 10, которая позволяет разрабатывать собственное содержимое уведомления о плитках с помощью простого и гибкого языка разметки, который адаптируется к различным плотностям экрана. В этой статье рассказывается, как создать адаптивные живые плитки для вашего приложения для Windows. Полный список адаптивных элементов и атрибутов см. в схеме адаптивных плиток.

(Если вы хотите, вы по-прежнему можете использовать предустановленные шаблоны из Каталог шаблонов плиток Windows 8 при разработке уведомлений для Windows 10.)

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

Установка библиотеки уведомлений. Если вы хотите использовать C# вместо XML для создания уведомлений, установите пакет NuGet с именем Microsoft.Toolkit.Uwp.Notifications (найдите "уведомления uwp"). Примеры C#, приведенные в этой статье, используют версию 1.0.0 пакета NuGet.

Установка визуализатора уведомлений. Это бесплатное приложение Для Windows помогает создавать адаптивные динамические плитки, предоставляя мгновенный визуальный просмотр плитки при его редактировании, аналогичное представлению редактора и конструктора XAML Visual Studio. Дополнительные сведения см. в разделе "Визуализатор уведомлений" или "Визуализатор уведомлений" из Магазина.

Отправка уведомления об плитке

Ознакомьтесь с нашим кратким руководством по отправке локальных уведомлений об плитке. В приведенной ниже документации описаны все возможности визуального пользовательского интерфейса с адаптивными плитками.

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

Адаптивные шаблоны предназначены для работы с различными форм-факторами и типами уведомлений. Такие элементы, как группа и подгруппа, объединяют содержимое и не подразумевают определенное визуальное поведение самостоятельно. Окончательный внешний вид уведомления должен основываться на определенном устройстве, на котором он будет отображаться, будь то телефон, планшет или настольный компьютер или другое устройство.

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

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

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

<tile>
  <visual>
  
    <binding template="TileMedium">
      ...
    </binding>
  
    <binding template="TileWide">
      <text hint-style="subtitle">Jennifer Parker</text>
      <text hint-style="captionSubtle">Photos from our trip</text>
      <text hint-style="captionSubtle">Check out these awesome photos I took while in New Zealand!</text>
    </binding>
  
    <binding template="TileLarge">
      ...
    </binding>
  
  </visual>
</tile>

TileContent content = new TileContent()
{
    Visual = new TileVisual()
    {
        TileMedium = ...
  
        TileWide = new TileBinding()
        {
            Content = new TileBindingContentAdaptive()
            {
                Children =
                {
                    new AdaptiveText()
                    {
                        Text = "Jennifer Parker",
                        HintStyle = AdaptiveTextStyle.Subtitle
                    },
  
                    new AdaptiveText()
                    {
                        Text = "Photos from our trip",
                        HintStyle = AdaptiveTextStyle.CaptionSubtle
                    },
  
                    new AdaptiveText()
                    {
                        Text = "Check out these awesome photos I took while in New Zealand!",
                        HintStyle = AdaptiveTextStyle.CaptionSubtle
                    }
                }
            }
        },
  
        TileLarge = ...
    }
};

Результат:

краткий пример плитки

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

Содержимое для каждого размера плитки по отдельности указывается в отдельных элементах TileBinding в полезных данных XML. Выберите целевой размер, задав атрибут шаблона одному из следующих значений:

ПлиткаSmall
TileMedium
TileWide
TileLarge (только для рабочего стола)

Для полезных данных XML уведомления об одном плитке укажите <элементы привязки> для каждого размера плитки, который вы хотите поддерживать, как показано в этом примере:

<tile>
  <visual>
  
    <binding template="TileSmall">
      <text>Small</text>
    </binding>
  
    <binding template="TileMedium">
      <text>Medium</text>
    </binding>
  
    <binding template="TileWide">
      <text>Wide</text>
    </binding>
  
    <binding template="TileLarge">
      <text>Large</text>
    </binding>
  
  </visual>
</tile>

TileContent content = new TileContent()
{
    Visual = new TileVisual()
    {
        TileSmall = new TileBinding()
        {
            Content = new TileBindingContentAdaptive()
            {
                Children =
                {
                    new AdaptiveText() { Text = "Small" }
                }
            }
        },
  
        TileMedium = new TileBinding()
        {
            Content = new TileBindingContentAdaptive()
            {
                Children =
                {
                    new AdaptiveText() { Text = "Medium" }
                }
            }
        },
  
        TileWide = new TileBinding()
        {
            Content = new TileBindingContentAdaptive()
            {
                Children =
                {
                    new AdaptiveText() { Text = "Wide" }
                }
            }
        },
  
        TileLarge = new TileBinding()
        {
            Content = new TileBindingContentAdaptive()
            {
                Children =
                {
                    new AdaptiveText() { Text = "Large" }
                }
            }
        }
    }
};

Результат:

адаптивные размеры плиток: небольшие, средние, широкие и большие

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

Вы можете управлять фирменной символикой в нижней части динамической плитки (отображаемое имя и логотип угла) с помощью атрибута фирменной символики в полезных данных уведомления. Вы можете отобразить "none", только "имя", только логотип или оба с именемAndLogo.

Обратите внимание, что Windows Mobile не поддерживает логотип угла, поэтому "логотип" и "nameAndLogo" по умолчанию имеет значение "name" в Mobile.

<visual branding="logo">
  ...
</visual>

new TileVisual()
{
    Branding = TileBranding.Logo,
    ...
}

Результат:

адаптивные плитки, имя и логотип

Фирменная символика может применяться для определенных размеров плиток одним из двух способов:

Применение атрибута к элементу TileBinding
Применив атрибут к элементу TileVisual , который влияет на всю полезные данные уведомления, если для привязки не указана фирменная символика, она будет использовать фирменную символику, указанную в визуальном элементе.

<tile>
  <visual branding="nameAndLogo">
 
    <binding template="TileMedium" branding="logo">
      ...
    </binding>
 
    <!--Inherits branding from visual-->
    <binding template="TileWide">
      ...
    </binding>
 
  </visual>
</tile>

TileContent content = new TileContent()
{
    Visual = new TileVisual()
    {
        Branding = TileBranding.NameAndLogo,

        TileMedium = new TileBinding()
        {
            Branding = TileBranding.Logo,
            ...
        },

        // Inherits branding from Visual
        TileWide = new TileBinding()
        {
            ...
        }
    }
};

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

Фирменная символика по умолчанию на плитках

Если вы не указываете фирменную символику в полезных данных уведомления, свойства базовой плитки определяют фирменную символику. Если на базовой плитке отображается отображаемое имя, по умолчанию фирменная символика будет называться "name". В противном случае фирменная символика по умолчанию будет "нет", если отображаемое имя не отображается.

Обратите внимание , что это изменение с Windows 8.x, в котором фирменная символика по умолчанию была логотипом.

Показать имя

Вы можете переопределить отображаемое имя уведомления, введя текстовую строку выбранного атрибута displayName . Как и в случае с фирменной символикой, можно указать это на элемент TileVisual , который влияет на всю полезные данные уведомления или элемент TileBinding , который влияет только на отдельные плитки.

Известная проблема в Windows Mobile, если указать shortName для плитки, отображаемое имя, указанное в уведомлении, не будет использоваться (ShortName всегда будет отображаться).

<tile>
  <visual branding="nameAndLogo" displayName="Wednesday 22">
 
    <binding template="TileMedium" displayName="Wed. 22">
      ...
    </binding>
 
    <!--Inherits displayName from visual-->
    <binding template="TileWide">
      ...
    </binding>
 
  </visual>
</tile>

TileContent content = new TileContent()
{
    Visual = new TileVisual()
    {
        Branding = TileBranding.NameAndLogo,
        DisplayName = "Wednesday 22",

        TileMedium = new TileBinding()
        {
            DisplayName = "Wed. 22",
            ...
        },

        // Inherits DisplayName from Visual
        TileWide = new TileBinding()
        {
            ...
        }
    }
};

Результат:

отображаемое имя адаптивных плиток

Текст

Элемент AdaptiveText используется для отображения текста. С помощью подсказок можно изменить способ отображения текста.

<text>This is a line of text</text>

new AdaptiveText()
{
    Text = "This is a line of text"
};

Результат:

адаптивный текст плитки

Упаковка текста

По умолчанию текст не упаковывается и будет продолжаться от края плитки. Используйте атрибут оболочки подсказки для задания упаковки текста в текстовом элементе. Вы также можете контролировать минимальное и максимальное количество строк с помощью подсказок minLines и hint-maxLines, оба из которых принимают положительные целые числа.

<text hint-wrap="true">This is a line of wrapping text</text>

new AdaptiveText()
{
    Text = "This is a line of wrapping text",
    HintWrap = true
};

Результат:

адаптивная плитка с оболочкой текста

Стили текста

Стили определяют размер шрифта, цвет и вес текстовых элементов. Существует ряд доступных стилей, включая "тонкий" вариант каждого стиля, который задает непрозрачность 60%, что обычно делает цвет текста оттенком светло-серого.

<text hint-style="base">Header content</text>
<text hint-style="captionSubtle">Subheader content</text>

new AdaptiveText()
{
    Text = "Header content",
    HintStyle = AdaptiveTextStyle.Base
},

new AdaptiveText()
{
    Text = "Subheader content",
    HintStyle = AdaptiveTextStyle.CaptionSubtle
}

Результат:

стили текста адаптивных плиток

Обратите внимание , что стиль по умолчанию используется для заголовка, если стиль подсказки не указан.

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

<text hint-style="*" />	Высота шрифта	Насыщенность шрифта
caption	12 эффективных пикселей (epx)	Обычное
текст	15 epx	Обычное
base	15 epx	Полужирный
подзаголовок	20 epx	Обычное
title	24 epx	Полусвет
подзаголовок	34 epx	Светлый
авторизации	46 epx	Светлый

Варианты стиля числовых текстов

Эти вариации снижают высоту строки, чтобы содержимое выше и ниже приблизилось к тексту.

titleNumeral
subheaderNumeral
headerNumeral

Варианты стиля тонкого текста

Каждый стиль имеет тонкий вариант, который дает тексту 60 % непрозрачности, что обычно делает текст цветом светло-серый.

captionSubtle
bodySubtle
baseSubtle
подзаголовок
titleSubtle
titleNumeralSubtle
subheaderSubtle
subheaderNumeralSubtle
headerSubtle
headerNumeralSubtle

Text alignment

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

<text hint-align="center">Hello</text>

new AdaptiveText()
{
    Text = "Hello",
    HintAlign = AdaptiveTextAlign.Center
};

Результат:

выравнивание текста адаптивных плиток

Группы и подгруппы

Группы позволяют семантике объявлять, что содержимое внутри группы связано и должно отображаться в полном объеме, чтобы содержимое имело смысл. Например, у вас может быть два текстовых элемента, заголовок и подзаголовок, и это не имеет смысла только для отображения заголовка. Группируя эти элементы внутри подгруппы, все элементы будут отображаться (если они могут соответствовать) или не отображаться вообще (так как они не могут соответствовать).

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

Обратите внимание , что единственным допустимым дочерним элементом группы является подгруппа.

<binding template="TileWide" branding="nameAndLogo">
  <group>
    <subgroup>
      <text hint-style="subtitle">Jennifer Parker</text>
      <text hint-style="captionSubtle">Photos from our trip</text>
      <text hint-style="captionSubtle">Check out these awesome photos I took while in New Zealand!</text>
    </subgroup>
  </group>
 
  <text />
 
  <group>
    <subgroup>
      <text hint-style="subtitle">Steve Bosniak</text>
      <text hint-style="captionSubtle">Build 2015 Dinner</text>
      <text hint-style="captionSubtle">Want to go out for dinner after Build tonight?</text>
    </subgroup>
  </group>
</binding>

TileWide = new TileBinding()
{
    Branding = TileBranding.NameAndLogo,
    Content = new TileBindingContentAdaptive()
    {
        Children =
        {
            CreateGroup(
                from: "Jennifer Parker",
                subject: "Photos from our trip",
                body: "Check out these awesome photos I took while in New Zealand!"),

            // For spacing
            new AdaptiveText(),

            CreateGroup(
                from: "Steve Bosniak",
                subject: "Build 2015 Dinner",
                body: "Want to go out for dinner after Build tonight?")
        }
    }
}

...

private static AdaptiveGroup CreateGroup(string from, string subject, string body)
{
    return new AdaptiveGroup()
    {
        Children =
        {
            new AdaptiveSubgroup()
            {
                Children =
                {
                    new AdaptiveText()
                    {
                        Text = from,
                        HintStyle = AdaptiveTextStyle.Subtitle
                    },
                    new AdaptiveText()
                    {
                        Text = subject,
                        HintStyle = AdaptiveTextStyle.CaptionSubtle
                    },
                    new AdaptiveText()
                    {
                        Text = body,
                        HintStyle = AdaptiveTextStyle.CaptionSubtle
                    }
                }
            }
        }
    };
}

Результат:

адаптивные группы плиток и подгруппы

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

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

Атрибут подсказки позволяет контролировать ширину столбцов. Значение намека на вес выражается как взвешенное количество доступного пространства, идентичное поведению GridUnitType.Star . Для столбцов равной ширины присвойте каждому весу 1.

hint-weight	Процент ширины
1	25%
1	25%
1	25%
1	25%
Общий вес: 4

подгруппы, даже столбцы

Чтобы сделать один столбец в два раза больше, чем другой столбец, назначьте меньший столбец весом 1 и большее значение 2.

hint-weight	Процент ширины
1	33,3 %
2	66,7 %
Общий вес: 3

подгруппы, один столбец в два раза больше другого

Если вы хотите, чтобы первый столбец составил 20 % от общей ширины, а второй столбец составил 80 % от общей ширины, назначьте первый вес 20 и второй вес 80. Если общий вес равен 100, они будут действовать в качестве процентных значений.

hint-weight	Процент ширины
20	20%
80	80%
Общий вес: 100

подгруппы с весами 100

Обратите внимание, что поле 8 пикселей автоматически добавляется между столбцами.

Если у вас более двух подгрупп, следует указать вес подсказки, который принимает только положительные целые числа. Если для первой подгруппы не указана подсказка, она будет назначена 50. Следующая подгруппа, у которой нет указанного веса подсказки, будет назначена вес, равный 100 минус сумма предыдущих весов или 1, если результат равен нулю. Остальные подгруппы, у которых нет указанных подсказок, будут назначены вес 1.

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

<binding template="TileWide" displayName="Seattle" branding="name">
  <group>
    <subgroup hint-weight="1">
      <text hint-align="center">Mon</text>
      <image src="Assets\Weather\Mostly Cloudy.png" hint-removeMargin="true"/>
      <text hint-align="center">63°</text>
      <text hint-align="center" hint-style="captionsubtle">42°</text>
    </subgroup>
    <subgroup hint-weight="1">
      <text hint-align="center">Tue</text>
      <image src="Assets\Weather\Cloudy.png" hint-removeMargin="true"/>
      <text hint-align="center">57°</text>
      <text hint-align="center" hint-style="captionsubtle">38°</text>
    </subgroup>
    <subgroup hint-weight="1">
      <text hint-align="center">Wed</text>
      <image src="Assets\Weather\Sunny.png" hint-removeMargin="true"/>
      <text hint-align="center">59°</text>
      <text hint-align="center" hint-style="captionsubtle">43°</text>
    </subgroup>
    <subgroup hint-weight="1">
      <text hint-align="center">Thu</text>
      <image src="Assets\Weather\Sunny.png" hint-removeMargin="true"/>
      <text hint-align="center">62°</text>
      <text hint-align="center" hint-style="captionsubtle">42°</text>
    </subgroup>
    <subgroup hint-weight="1">
      <text hint-align="center">Fri</text>
      <image src="Assets\Weather\Sunny.png" hint-removeMargin="true"/>
      <text hint-align="center">71°</text>
      <text hint-align="center" hint-style="captionsubtle">66°</text>
    </subgroup>
  </group>
</binding>

TileWide = new TileBinding()
{
    DisplayName = "Seattle",
    Branding = TileBranding.Name,
    Content = new TileBindingContentAdaptive()
    {
        Children =
        {
            new AdaptiveGroup()
            {
                Children =
                {
                    CreateSubgroup("Mon", "Mostly Cloudy.png", "63°", "42°"),
                    CreateSubgroup("Tue", "Cloudy.png", "57°", "38°"),
                    CreateSubgroup("Wed", "Sunny.png", "59°", "43°"),
                    CreateSubgroup("Thu", "Sunny.png", "62°", "42°"),
                    CreateSubgroup("Fri", "Sunny.png", "71°", "66°")
                }
            }
        }
    }
}

...

private static AdaptiveSubgroup CreateSubgroup(string day, string image, string highTemp, string lowTemp)
{
    return new AdaptiveSubgroup()
    {
        HintWeight = 1,
        Children =
        {
            new AdaptiveText()
            {
                Text = day,
                HintAlign = AdaptiveTextAlign.Center
            },
            new AdaptiveImage()
            {
                Source = "Assets/Weather/" + image,
                HintRemoveMargin = true
            },
            new AdaptiveText()
            {
                Text = highTemp,
                HintAlign = AdaptiveTextAlign.Center
            },
            new AdaptiveText()
            {
                Text = lowTemp,
                HintAlign = AdaptiveTextAlign.Center,
                HintStyle = AdaptiveTextStyle.CaptionSubtle
            }
        }
    };
}

Результат:

Пример плитки погоды

Изображения

Элемент <изображения> используется для отображения изображений на уведомлении плитки. Изображения можно разместить в виде встроенного изображения в содержимом плитки (по умолчанию), в качестве фонового изображения за содержимым или в виде изображения, которое анимирует в верхней части уведомления.

Примечание.

Изображения можно использовать из пакета приложения, локального хранилища приложения или из Интернета. По состоянию на Fall Creators Update веб-образы могут составлять до 3 МБ в обычных подключениях и 1 МБ на лимитных подключениях. На устройствах, не работающих в Fall Creators Update, веб-образы не должны превышать 200 КБ.

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

<binding template="TileMedium" displayName="Seattle" branding="name">
  <group>
    <subgroup>
      <text hint-align="center">Mon</text>
      <image src="Assets\Apps\Weather\Mostly Cloudy.png" hint-removeMargin="true"/>
      <text hint-align="center">63°</text>
      <text hint-style="captionsubtle" hint-align="center">42°</text>
    </subgroup>
    <subgroup>
      <text hint-align="center">Tue</text>
      <image src="Assets\Apps\Weather\Cloudy.png" hint-removeMargin="true"/>
      <text hint-align="center">57°</text>
      <text hint-style="captionSubtle" hint-align="center">38°</text>
    </subgroup>
  </group>
</binding>

TileMedium = new TileBinding()
{
    DisplayName = "Seattle",
    Branding = TileBranding.Name,
    Content = new TileBindingContentAdaptive()
    {
        Children =
        {
            new AdaptiveGroup()
            {
                Children =
                {
                    CreateSubgroup("Mon", "Mostly Cloudy.png", "63°", "42°"),
                    CreateSubgroup("Tue", "Cloudy.png", "57°", "38°")
                }
            }
        }
    }
}
...
private static AdaptiveSubgroup CreateSubgroup(string day, string image, string highTemp, string lowTemp)
{
    return new AdaptiveSubgroup()
    {
        Children =
        {
            new AdaptiveText()
            {
                Text = day,
                HintAlign = AdaptiveTextAlign.Center
            },
            new AdaptiveImage()
            {
                Source = "Assets/Weather/" + image,
                HintRemoveMargin = true
            },
            new AdaptiveText()
            {
                Text = highTemp,
                HintAlign = AdaptiveTextAlign.Center
            },
            new AdaptiveText()
            {
                Text = lowTemp,
                HintAlign = AdaptiveTextAlign.Center,
                HintStyle = AdaptiveTextStyle.CaptionSubtle
            }
        }
    };
}

Результат:

Пример изображения

Изображения, размещенные в корне привязки <> или в первой группе, также будут растягиваться, чтобы соответствовать доступной высоте.

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

Изображения можно задать для выравнивания по левому краю, центру или правому краю с помощью атрибута выравнивания подсказок. Это также приведет к отображению изображений в собственном разрешении вместо растяжения для заливки ширины.

<binding template="TileLarge">
  <image src="Assets/fable.jpg" hint-align="center"/>
</binding>

TileLarge = new TileBinding()
{
    Content = new TileBindingContentAdaptive()
    {
        Children =
        {
            new AdaptiveImage()
            {
                Source = "Assets/fable.jpg",
                HintAlign = AdaptiveImageAlign.Center
            }
        }
    }
}

Результат:

Пример выравнивания изображений (слева, центр, справа)

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

По умолчанию встроенные изображения имеют 8-пиксельное поле между любым содержимым выше или ниже изображения. Это поле можно удалить с помощью атрибута hint-removeMargin на изображении. Однако изображения всегда сохраняют 8-пиксельное поле от края плитки, а подгруппы (столбцы) всегда сохраняют 8-пиксельное заполнение между столбцами.

<binding template="TileMedium" branding="none">
  <group>
    <subgroup>
      <text hint-align="center">Mon</text>
      <image src="Assets\Numbers\4.jpg" hint-removeMargin="true"/>
      <text hint-align="center">63°</text>
      <text hint-style="captionsubtle" hint-align="center">42°</text>
    </subgroup>
    <subgroup>
      <text hint-align="center">Tue</text>
      <image src="Assets\Numbers\3.jpg" hint-removeMargin="true"/>
      <text hint-align="center">57°</text>
      <text hint-style="captionsubtle" hint-align="center">38°</text>
    </subgroup>
  </group>
</binding>

TileMedium = new TileBinding()
{
    Branding = TileBranding.None,
    Content = new TileBindingContentAdaptive()
    {
        Children =
        {
            new AdaptiveGroup()
            {
                Children =
                {
                    CreateSubgroup("Mon", "4.jpg", "63°", "42°"),
                    CreateSubgroup("Tue", "3.jpg", "57°", "38°")
                }
            }
        }
    }
}

...

private static AdaptiveSubgroup CreateSubgroup(string day, string image, string highTemp, string lowTemp)
{
    return new AdaptiveSubgroup()
    {
        HintWeight = 1,
        Children =
        {
            new AdaptiveText()
            {
                Text = day,
                HintAlign = AdaptiveTextAlign.Center
            },
            new AdaptiveImage()
            {
                Source = "Assets/Numbers/" + image,
                HintRemoveMargin = true
            },
            new AdaptiveText()
            {
                Text = highTemp,
                HintAlign = AdaptiveTextAlign.Center
            },
            new AdaptiveText()
            {
                Text = lowTemp,
                HintAlign = AdaptiveTextAlign.Center,
                HintStyle = AdaptiveTextStyle.CaptionSubtle
            }
        }
    };
}

Пример удаления поля с указанием

Обрезка изображения

Изображения можно обрезать в круг с помощью атрибута обрезки подсказки , который в настоящее время поддерживает только значения "none" (по умолчанию) или "круг".

<binding template="TileLarge" hint-textStacking="center">
  <group>
    <subgroup hint-weight="1"/>
    <subgroup hint-weight="2">
      <image src="Assets/Apps/Hipstame/hipster.jpg" hint-crop="circle"/>
    </subgroup>
    <subgroup hint-weight="1"/>
  </group>
 
  <text hint-style="title" hint-align="center">Hi,</text>
  <text hint-style="subtitleSubtle" hint-align="center">MasterHip</text>
</binding>

TileLarge = new TileBinding()
{
    Content = new TileBindingContentAdaptive()
    {
        TextStacking = TileTextStacking.Center,
        Children =
        {
            new AdaptiveGroup()
            {
                Children =
                {
                    new AdaptiveSubgroup() { HintWeight = 1 },
                    new AdaptiveSubgroup()
                    {
                        HintWeight = 2,
                        Children =
                        {
                            new AdaptiveImage()
                            {
                                Source = "Assets/Apps/Hipstame/hipster.jpg",
                                HintCrop = AdaptiveImageCrop.Circle
                            }
                        }
                    },
                    new AdaptiveSubgroup() { HintWeight = 1 }
                }
            },
            new AdaptiveText()
            {
                Text = "Hi,",
                HintStyle = AdaptiveTextStyle.Title,
                HintAlign = AdaptiveTextAlign.Center
            },
            new AdaptiveText()
            {
                Text = "MasterHip",
                HintStyle = AdaptiveTextStyle.SubtitleSubtle,
                HintAlign = AdaptiveTextAlign.Center
            }
        }
    }
}

Результат:

Пример обрезки изображения

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

Чтобы задать фоновое изображение, поместите элемент изображения в корень <привязки> и задайте для атрибута размещения значение "фон".

<binding template="TileWide">
  <image src="Assets\Mostly Cloudy-Background.jpg" placement="background"/>
  <group>
    <subgroup hint-weight="1">
      <text hint-align="center">Mon</text>
      <image src="Assets\Weather\Mostly Cloudy.png" hint-removeMargin="true"/>
      <text hint-align="center">63°</text>
      <text hint-align="center" hint-style="captionsubtle">42°</text>
    </subgroup>
    ...
  </group>
</binding>

TileWide = new TileBinding()
{
    Content = new TileBindingContentAdaptive()
    {
        BackgroundImage = new TileBackgroundImage()
        {
            Source = "Assets/Mostly Cloudy-Background.jpg"
        },

        Children =
        {
            new AdaptiveGroup()
            {
                Children =
                {
                    CreateSubgroup("Mon", "Mostly Cloudy.png", "63°", "42°")
                    ...
                }
            }
        }
    }
}

...

private static AdaptiveSubgroup CreateSubgroup(string day, string image, string highTemp, string lowTemp)
{
    return new AdaptiveSubgroup()
    {
        HintWeight = 1,
        Children =
        {
            new AdaptiveText()
            {
                Text = day,
                HintAlign = AdaptiveTextAlign.Center
            },
            new AdaptiveImage()
            {
                Source = "Assets/Weather/" + image,
                HintRemoveMargin = true
            },
            new AdaptiveText()
            {
                Text = highTemp,
                HintAlign = AdaptiveTextAlign.Center
            },
            new AdaptiveText()
            {
                Text = lowTemp,
                HintAlign = AdaptiveTextAlign.Center,
                HintStyle = AdaptiveTextStyle.CaptionSubtle
            }
        }
    };
}

Результат:

Пример фонового изображения

Просмотр изображения

Можно указать изображение, которое отображается в верхней части плитки. Изображение для просмотра использует анимацию для слайда вниз или вверх с верхней части плитки, просматривая в представление, а затем скользя обратно, чтобы показать основное содержимое на плитке. Чтобы задать изображение, поместите элемент изображения в корень <привязки> и задайте для атрибута размещения значение "Просмотреть".

<binding template="TileMedium" branding="name">
  <image placement="peek" src="Assets/Apps/Hipstame/hipster.jpg"/>
  <text>New Message</text>
  <text hint-style="captionsubtle" hint-wrap="true">Hey, have you tried Windows 10 yet?</text>
</binding>

TileWide = new TileBinding()
{
    Branding = TileBranding.Name,
    Content = new TileBindingContentAdaptive()
    {
        PeekImage = new TilePeekImage()
        {
            Source = "Assets/Apps/Hipstame/hipster.jpg"
        },
        Children =
        {
            new AdaptiveText()
            {
                Text = "New Message"
            },
            new AdaptiveText()
            {
                Text = "Hey, have you tried Windows 10 yet?",
                HintStyle = AdaptiveTextStyle.CaptionSubtle,
                HintWrap = true
            }
        }
    }
}

Примеры просмотра изображений

Обрезка круга для просмотра и фоновых изображений

Используйте атрибут обрезки подсказки для просмотра и фоновых изображений для обрезки круга:

<image placement="peek" hint-crop="circle" src="Assets/Apps/Hipstame/hipster.jpg"/>

new TilePeekImage()
{
    HintCrop = TilePeekImageCrop.Circle,
    Source = "Assets/Apps/Hipstame/hipster.jpg"
}

Результат должен выглядеть так:

обрезка круга для просмотра и фонового изображения

Использование изображения в режиме просмотра и фона

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

Результат должен выглядеть так:

просмотр и фоновый образ, используемые вместе

Просмотр и наложение фонового изображения

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

Использование наложения подсказки на фоновом изображении

Фоновое изображение по умолчанию будет наложено на 20 %, если в полезных данных есть некоторые текстовые элементы (в противном случае оно по умолчанию будет наложено на 0 %.

<binding template="TileWide">
  <image placement="background" hint-overlay="60" src="Assets\Mostly Cloudy-Background.jpg"/>
  ...
</binding>

TileWide = new TileBinding()
{
    Content = new TileBindingContentAdaptive()
    {
        BackgroundImage = new TileBackgroundImage()
        {
            Source = "Assets/Mostly Cloudy-Background.jpg",
            HintOverlay = 60
        },

        ...
    }
}

Результат намека наложения:

Пример наложения подсказки изображения

Использование подсказки наложение на изображение

В Windows 10 версии 151 мы также поддерживаем наложение на изображение, как и фоновый образ. Укажите наложение подсказки на элемент изображения в виде целого числа от 0 до 100. По умолчанию для просмотра изображений используется значение 0 (без наложения).

<binding template="TileMedium">
  <image hint-overlay="20" src="Assets\Map.jpg" placement="peek"/>
  ...
</binding>

TileMedium = new TileBinding()
{
    Content = new TileBindingContentAdaptive()
    {
        PeekImage = new TilePeekImage()
        {
            Source = "Assets/Map.jpg",
            HintOverlay = 20
        },
        ...
    }
}

В этом примере показано изображение с 20 % непрозрачности (слева) и с 0 % непрозрачности (справа):

указание наложение на изображение

Вертикальное выравнивание (стек текста)

Вы можете управлять вертикальным выравниванием содержимого на плитке с помощью атрибута hint-textStacking в элементе TileBinding и элементе AdaptiveSubgroup. По умолчанию все по вертикали выровнены поверх верхней части, но вы также можете выровнять содержимое внизу или центру.

Стек текста в элементе привязки

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

<binding template="TileMedium" hint-textStacking="center" branding="logo">
  <text hint-style="base" hint-align="center">Hi,</text>
  <text hint-style="captionSubtle" hint-align="center">MasterHip</text>
</binding>

TileMedium = new TileBinding()
{
    Branding = TileBranding.Logo,
    Content = new TileBindingContentAdaptive()
    {
        TextStacking = TileTextStacking.Center,
        Children =
        {
            new AdaptiveText()
            {
                Text = "Hi,",
                HintStyle = AdaptiveTextStyle.Base,
                HintAlign = AdaptiveTextAlign.Center
            },

            new AdaptiveText()
            {
                Text = "MasterHip",
                HintStyle = AdaptiveTextStyle.CaptionSubtle,
                HintAlign = AdaptiveTextAlign.Center
            }
        }
    }
}

стек текста в элементе привязки

Стек текста в элементе подгруппы

При применении на уровне AdaptiveSubgroup текстовый стек задает вертикальное выравнивание содержимого подгруппы (столбца), выравнивая доступное вертикальное пространство в пределах всей группы.

<binding template="TileWide" branding="nameAndLogo">
  <group>
    <subgroup hint-weight="33">
      <image src="Assets/Apps/Hipstame/hipster.jpg" hint-crop="circle"/>
    </subgroup>
    <subgroup hint-textStacking="center">
      <text hint-style="subtitle">Hi,</text>
      <text hint-style="bodySubtle">MasterHip</text>
    </subgroup>
  </group>
</binding>

TileWide = new TileBinding()
{
    Branding = TileBranding.NameAndLogo,
    Content = new TileBindingContentAdaptive()
    {
        Children =
        {
            new AdaptiveGroup()
            {
                Children =
                {
                    // Image column
                    new AdaptiveSubgroup()
                    {
                        HintWeight = 33,
                        Children =
                        {
                            new AdaptiveImage()
                            {
                                Source = "Assets/Apps/Hipstame/hipster.jpg",
                                HintCrop = AdaptiveImageCrop.Circle
                            }
                        }
                    },

                    // Text column
                    new AdaptiveSubgroup()
                    {
                        // Vertical align its contents
                        TextStacking = TileTextStacking.Center,
                        Children =
                        {
                            new AdaptiveText()
                            {
                                Text = "Hi,",
                                HintStyle = AdaptiveTextStyle.Subtitle
                            },

                            new AdaptiveText()
                            {
                                Text = "MasterHip",
                                HintStyle = AdaptiveTextStyle.BodySubtle
                            }
                        }
                    }
                }
            }
        }
    }
}

Поделиться через

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

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

Отправка уведомления об плитке

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

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

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

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

Показать имя

Текст

Упаковка текста

Стили текста

Text alignment

Группы и подгруппы

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

Изображения

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

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

Обрезка изображения

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

Просмотр изображения

Просмотр и наложение фонового изображения

Вертикальное выравнивание (стек текста)

Стек текста в элементе привязки

Стек текста в элементе подгруппы

Обратная связь

Дополнительные ресурсы

Поделиться через

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

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

Отправка уведомления об плитке

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

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

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

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

Показать имя

Текст

Упаковка текста

Стили текста

Text alignment

Группы и подгруппы

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

Изображения

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

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

Обрезка изображения

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

Просмотр изображения

Просмотр и наложение фонового изображения

Вертикальное выравнивание (стек текста)

Стек текста в элементе привязки

Стек текста в элементе подгруппы

См. также

Обратная связь

Дополнительные ресурсы