创建自适应磁贴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 10 设计通知时使用 Windows 8 磁贴模板目录中的预设模板。)(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 来生成通知,请安装名为 Microsoft.Toolkit.Uwp.Notifications 的 NuGet 程序包(搜索“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# 示例使用 NuGet 程序包的版本 1.0.0。The C# samples provided in this article use version 1.0.0 of the NuGet package.

安装通知可视化工具。Install Notifications Visualizer. 此免费 Windows 应用可帮助你设计自适应动态磁贴,方法是在对其进行编辑时,提供磁贴的即时可视化预览,这与 Visual Studio 的 XAML 编辑器/设计视图类似。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. 请参阅通知可视化工具了解详细信息,或从 Microsoft 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. 以下文档介绍了使用自适应磁贴时可能具有的所有视觉 UI。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.

<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 = ...
    }
};

结果:Result:

快速示例磁贴

磁贴大小Tile sizes

每种磁贴大小的内容在 XML 有效负载内的单独 TileBinding 元素中单独指定。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:

  • TileSmallTileSmall
  • TileMediumTileMedium
  • TileWideTileWide
  • TileLarge(仅适用于桌面)TileLarge (only for desktop)

对于单个磁贴通知 XML 负载,请为你希望支持的每种磁贴大小提供 <binding> 元素,如此示例中所示:For a single tile notification XML payload, provide <binding> elements for each tile size that you'd like to support, as shown in this example:

<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" }
                }
            }
        }
    }
};

结果:Result:

自适应磁贴大小:小、中、宽和大

品牌打造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. 你可以选择显示“无”、仅“名称”、仅“徽标”,或使用“nameAndLogo”显示两者。You can choose to display "none," only the "name," only the "logo," or both with "nameAndLogo."

注意 Windows Mobile 不支持角徽标,因此“徽标”和“nameAndLogo”在 Mobile 上默认为“名称”。Note Windows Mobile doesn't support the corner logo, so "logo" and "nameAndLogo" default to "name" on Mobile.

<visual branding="logo">
  ...
</visual>
new TileVisual()
{
    Branding = TileBranding.Logo,
    ...
}

结果: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.
<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()
        {
            ...
        }
    }
};

默认品牌结果:Default branding result:

磁贴上的默认品牌

如果你未在通知负载中指定品牌,基本磁贴的属性将决定品牌。If you don't specify the branding in your notification payload, the base tile's properties will determine the branding. 如果基本磁贴显示了显示名称,则品牌将默认为“名称”。If the base tile shows the display name, then the branding will default to "name." 否则,如果未显示显示名称,品牌将默认为“无”。Otherwise, the branding will default to "none" if the display name isn't shown.

注意 这与 Windows 8.x 不同,在该版本中默认品牌为“徽标”。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 上,如果为磁贴指定一个 ShortName,将不使用通知中提供的显示名称(将始终显示 ShortName)。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).

<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()
        {
            ...
        }
    }
};

结果:Result:

自适应磁贴显示名称

文本Text

AdaptiveText 元素用于显示文本。The AdaptiveText element is used to display text. 可使用提示来修改文本的显示方式。You can use hints to modify how text appears.

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

结果: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-minLineshint-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.

<text hint-wrap="true">This is a line of wrapping text</text>
new AdaptiveText()
{
    Text = "This is a line of wrapping text",
    HintWrap = true
};

结果: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.

<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
}

结果:Result:

自适应磁贴文本样式

注意 如果未指定提示样式,该样式将默认为描述文字。Note The style defaults to caption if hint-style isn't specified.

基本文本样式Basic text styles

<文本提示-style = " * "/><text hint-style="*" /> 字体高度Font height 字体粗细Font weight
captioncaption 12 个有效像素 (epx)12 effective pixels (epx) 常规Regular
bodybody 15 epx15 epx 常规Regular
basebase 15 epx15 epx 半粗体Semibold
副标题subtitle 20 epx20 epx 常规Regular
titletitle 24 epx24 epx 半细Semilight
副标题subheader 34 epx34 epx Light
标头的值开始缓存响应header 46 epx46 epx Light

数字文本样式变体Numeral text style variations

这些变体减少了行高度,因此上方和下方的内容距离文本更近。These variations reduce the line height so that content above and below come much closer to the text.

  • titleNumeraltitleNumeral

  • subheaderNumeralsubheaderNumeral

  • headerNumeralheaderNumeral

标题文本样式变体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.

  • captionSubtlecaptionSubtle

  • bodySubtlebodySubtle

  • baseSubtlebaseSubtle

  • subtitleSubtlesubtitleSubtle

  • titleSubtletitleSubtle

  • titleNumeralSubtletitleNumeralSubtle

  • subheaderSubtlesubheaderSubtle

  • subheaderNumeralSubtlesubheaderNumeralSubtle

  • headerSubtleheaderSubtle

  • headerNumeralSubtleheaderNumeralSubtle

文本对齐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.

<text hint-align="center">Hello</text>
new AdaptiveText()
{
    Text = "Hello",
    HintAlign = AdaptiveTextAlign.Center
};

结果: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.

<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
                    }
                }
            }
        }
    };
}

结果: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 宽度百分比Percentage of width
11 25%25%
11 25%25%
11 25%25%
11 25%25%
总权重:4Total 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 宽度百分比Percentage of width
11 33.3%33.3%
22 66.7%66.7%
总权重:3Total 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 宽度百分比Percentage of width
2020 20%20%
8080 80%80%
总权重:100Total weight: 100

子组,总权重为 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. 如果你未为第一个子组指定提示权重,将为其分配的权重为 50。If you don't specify hint-weight for the first subgroup, it will be assigned a weight of 50. 将为下一个没有特定提示权重的子组分配的权重等于 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. 将为剩余没有指定提示权重的子组分配的权重为 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:

<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
            }
        }
    };
}

结果:Result:

天气磁贴的示例

图像Images

<image> 元素用于在磁贴通知上显示图像。The <image> 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.

备注

图像可来自于应用包、应用的本地存储或来自 Web。Images can be used from the app's package, the app's local storage, or from the web. 自 Fall Creators Update 起,正常连接上的 Web 图像的大小限制提升至 3 MB,按流量计费的连接上的限制提升至 1 MB。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 的设备上,Web 图像的大小不得超过 200 KB。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.

<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
            }
        }
    };
}

结果:Result:

图像示例

放置在 <binding> 根或第一个组中的图像还可拉伸以适应可用的高度。Images placed in the <binding> 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.

<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
            }
        }
    }
}

结果: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.

<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
            }
        }
    };
}

提示删除边距示例

图像裁剪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."

<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
            }
        }
    }
}

结果:Result:

图像裁剪示例

背景图像Background image

若要设置背景图像,请将图像元素放置在 <binding> 的根中,并将放置属性设置为“background”。To set a background image, place an image element in the root of the <binding> and set the placement attribute to "background."

<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
            }
        }
    };
}

结果: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. 若要设置速览图像,请将图像元素放置在 <binding> 的根中,并将放置属性设置为“peek”。To set a peek image, place an image element in the root of the <binding>, and set the placement attribute to "peek."

<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
            }
        }
    }
}

速览图像的示例

用于速览和背景图像的圆裁剪Circle crop for peek and background images

将提示裁剪属性用于速览和背景图像,以执行圆裁剪:Use the hint-crop attribute on peek and background images to do a circle crop:

<image placement="peek" hint-crop="circle" src="Assets/Apps/Hipstame/hipster.jpg"/>
new TilePeekImage()
{
    HintCrop = TilePeekImageCrop.Circle,
    Source = "Assets/Apps/Hipstame/hipster.jpg"
}

结果将如下所示: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).

<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
        },

        ...
    }
}

提示覆盖结果:hint-overlay Result:

图像提示覆盖的示例

在速览图像上使用提示覆盖Use hint-overlay on a peek image

在 Windows 10 版本 1511 中,我们也支持速览图像的覆盖,就像背景图像一样。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).

<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% 不透明度(右)显示速览图像:This example shows a peek image at 20% opacity (left) and at 0% opacity (right):

速览图像上的提示覆盖

垂直对齐方式(文本堆叠)Vertical alignment (text stacking)

可控制磁贴上的内容的垂直对齐方式,方法是在 TileBinding 元素和 AdaptiveSubgroup 元素上使用 hint-textStacking 属性。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.

绑定元素上的文本堆叠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.

<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
            }
        }
    }
}

绑定元素上的文本堆叠

子组元素上的文本堆叠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.

<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
                            }
                        }
                    }
                }
            }
        }
    }
}