建立彈性磚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

安裝 Notifications 程式庫。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. 您可以選擇顯示 "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.

<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 元素上套用屬性,這會影響整個通知承載。如果您沒有指定繫結的商標,它將會使用 visual 元素上提供的商標。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. 如果基底磚顯示顯示名稱,則品牌將會預設為 "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 上,如果您為磚指定了 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:

彈性磚顯示名稱

TextText

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:

彈性磚文字樣式

注意: 如果沒有指定 hint-style,則樣式預設為 caption。Note The style defaults to caption if hint-style isn't specified.

基本文字樣式Basic text styles

<text 提示-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
subtitlesubtitle 20 epx20 epx 標準Regular
titletitle 24 epx24 epx SemilightSemilight
subheadersubheader 34 epx34 epx 輕量型Light
headerheader 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-weighthint-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-weighthint-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-weighthint-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. 如果您沒有為第一個子群組指定 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:

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

注意

您可以使用 App 套件、App 本機存放區或網頁中的影像。Images can be used from the app's package, the app's local storage, or from the web. 從 Fall Creators Update 開始,一般連線的網頁影像可以高達 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 的裝置上,網頁影像不得超過 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
            }
        }
    };
}

hint remove margin 範例

影像裁剪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

若要設定背景影像,將 image 元素放在 <binding> 的根目錄中,並將 placement 屬性設定為 "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. 若要設定預覽影像,將 image 元素放在 <binding> 的根目錄中,並將 placement 屬性設定為 "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

在預覽和背景影像上使用 hint-crop 屬性以進行圓形裁剪: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.

在背景影像上使用 hint-overlayUse 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 的結果:hint-overlay Result:

影像 hint overlay 的範例

在預覽影像上使用 hint-overlayUse 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 的整數指定預覽影像元素上的 hint-overlay。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):

預覽影像上的 hint-overlay

垂直對齊方式 (文字堆疊)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.

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.

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

binding 元素上的文字堆疊

子群組元素上的文字堆疊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
                            }
                        }
                    }
                }
            }
        }
    }
}