建立彈性磚

彈性磚範本是 Windows 10 中的新功能,可讓您使用能夠適應不同螢幕密度的簡易靈活標記語言,設計專屬的磚通知內容。 本文會告訴您如何為 Windows 應用程式建立彈性動態磚。 如需彈性元素和屬性的完整清單,請參閱彈性磚結構描述

(設計適用於 Windows 10 的通知時,如果您想要,仍然可以使用 Windows 8 磚範本目錄中的預設範本)。

開始使用

安裝 Notifications 程式庫。 如果您想要使用 C# 而不是 XML 產生通知,請安裝名稱為 Microsoft.Toolkit.Uwp.Notifications 的 NuGet 套件 (搜尋 "notifications uwp")。 本文中所提供的 C# 範例使用該 NuGet 套件 1.0.0 版本。

安裝通知視覺化工具。 這個免費的Windows應用程式可協助您設計彈性動態磚,方法是在編輯磚時提供即時視覺效果預覽,類似于Visual Studio的 XAML 編輯器/設計檢視。 如需詳細資訊,請參閱通知視覺化工具從 Microsoft Store 下載通知視覺化工具

如何傳送磚通知

請閱讀我們的傳送本機磚通知的快速入門。 下列文件說明彈性磚可使用之所有視覺 UI 的可能性。

用法指導方針

彈性範本的設計可跨不同的尺寸規格和通知類型運作。 諸如群組和子群組之類的元素會將內容連結在一起,而且並不代表自己的特定視覺行為。 無論是手機、平板電腦、傳統型裝置或其他裝置,通知的最終外觀應該以將會顯示在其上的特定裝置為基礎。

提示是選用的屬性,可以新增至元素以達到特定的視覺行為。 提示可以是針對裝置或針對通知。

基本範例

此範例示範彈性磚範本可以產生的內容。

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

結果︰

quick sample tile

磚大小

每個磚大小的內容是分別在 XML 承載內的不同 TileBinding 元素中指定。 將範本屬性設定為下列其中一個值,以選擇目標大小:

  • TileSmall
  • TileMedium
  • TileWide
  • TileLarge (僅適用於桌上型電腦)

對於單一磚通知 XML 承載,為您想要支援的每個磚大小提供 <binding> 元素,如此範例中所示:

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

結果︰

adaptive tile sizes: small, medium, wide, and large

商標

您可以使用通知承載的商標屬性,控制動態磚底部的商標 (顯示名稱和角標誌)。 您可以選擇顯示 "none"、僅顯示 "name"、僅顯示 "logo",或使用 "nameAndLogo" 來顯示兩者。

注意Windows Mobile 不支援角落標誌,因此行動裝置上的 「logo」 和 「nameAndLogo」 預設為 「name」。

 

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

結果︰

adaptive tiles, name and logo

可以針對特定磚大小,以下列其中一種方式套用商標:

  1. 透過在 TileBinding 元素上套用屬性
  2. 透過在 TileVisual 元素上套用屬性,這會影響整個通知承載。如果您沒有指定繫結的商標,它將會使用 visual 元素上提供的商標。
<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 on tiles

如果您沒有指定通知承載中的品牌,基底磚的屬性將決定品牌。 如果基底圖顯示顯示名稱,則商標會預設為 「名稱」。否則,如果未顯示顯示名稱,則商標會預設為 「無」。

注意這是來自 Windows 8.x 的變更,其中預設商標為「標誌」。

 

顯示名稱

您可以使用 displayName 屬性來輸入您所選擇的文字字串,來覆寫通知的顯示名稱。 和商標一樣,您可以在 TileVisual 元素上指定此顯示名稱,這會影響整個通知承載,您也可以在 TileBinding 元素上指定此顯示名稱,這將只會影響個別的磚。

已知問題在 Windows Mobile 上,如果您為 Tile 指定 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()
        {
            ...
        }
    }
};

結果︰

adaptive tiles display name

Text

AdaptiveText 元素用來顯示文字。 您可以使用此提示修改文字的顯示方式。

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

結果︰

adaptive tile text

文字換行

根據預設,文字不會換行,而且將會繼續超出磚的邊緣。 使用 hint-wrap 屬性在文字元素上設定文字換行。 您也可以使用 hint-minLineshint-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
};

結果︰

adaptive tile with text wrapping

文字樣式

樣式可控制文字元素的字型大小、色彩及粗細。 有許多可用的樣式,包括每個可將不透明度設定為 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
}

結果︰

adaptive tiles text styles

注意 如果未指定 hint-style,樣式預設為標題。

 

基本文字樣式

<text hint-style=「*」 /> 字型高度 字型寬度
caption 12 個有效像素 (epx) 定期
body 15 epx 定期
base 15 epx 半粗體
subtitle 20 epx 定期
title 24 epx Semilight
subheader 34 epx 淺色
header 46 epx 淺色

 

數字的文字樣式變化

這些變化會減少行高,讓上方和下方的內容會更接近文字。

  • titleNumeral

  • subheaderNumeral

  • headerNumeral

 

細微的文字樣式變化

每個樣式都有可提供文字 60% 不透明度的細微變化,這通常會使文字色彩變成淺灰色網底。

  • captionSubtle

  • bodySubtle

  • baseSubtle

  • subtitleSubtle

  • titleSubtle

  • titleNumeralSubtle

  • subheaderSubtle

  • subheaderNumeralSubtle

  • headerSubtle

  • headerNumeralSubtle

 

文字對齊方式

文字可以水平靠左對齊、置中對齊或靠右對齊。 對於由左到右的語言 (如英文),文字預設為靠左對齊。 對於由右到左的語言 (如阿拉伯文),文字預設為靠右對齊。 您可以對元素使用 hint-align 屬性,來手動設定對齊方式。

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

結果︰

adaptive tiles text alignment

群組與子群組

群組可以讓您從語意宣告群組內的內容相關,而且必須以內容的完整性顯示,才會具有意義。 例如,您可能會有兩個文字元素、一個標頭和一個子標頭,如果只顯示標頭,將不具任何意義。 為子群組內的這些元素分組,將會顯示所有元素 (如果可以容納),或完全不顯示任何元素 (因為無法容納)。

若要在裝置和螢幕上提供最佳體驗,請提供多個群組。 擁有多個群組可讓您的磚配合較大的螢幕。

注意 群組的唯一有效子系是子群組。

 

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

結果︰

adaptive tiles groups and subgroups

子群組 (欄)

子群組也可讓您在群組中,將資料分成多個語意式區段。 對於動態磚,這在視覺上會翻譯成欄。

hint-weight 屬性可讓您控制欄寬。 hint-weight 的值會表示為可用空間的加權比例,這與 GridUnitType.Star 行為相同。 對於等寬的欄,將每個加權指派為 1。

hint-weight 寬度百分比
1 25%
1 25%
1 25%
1 25%
總加權:4

 

subgroups, even columns

若要讓一欄是另一欄兩倍的大小,為較小的欄指派加權 1,並為較大的欄指派加權 2。

hint-weight 寬度百分比
1 33.3%
2 66.7%
總加權:3

 

subgroups, one column twice the size of the other

如果您希望您的第一欄最多佔 20% 的總寬度,且第二欄最多佔 80% 的總寬度,請將第一個加權指派為 20,並將第二個加權指派為 80。 如果您的總加權等於 100,它們就會成為百分比。

hint-weight 寬度百分比
20 20%
80 80%
總加權:100

 

subgroups, with weights totalling 100

注意 資料行之間會自動新增 8 圖元邊界。

 

當您有超過兩個子群組時,應該指定 hint-weight,這只會接受正整數。 如果您沒有為第一個子群組指定 hint-weight,則會將加權指派為 50。 對於沒有指定的 hint-weight 的下一個子群組,其獲指派的加權將等於 100 減去之前加權的加總,如果結果為零,則獲指派的加權將等於 1。 置於沒有指定的 hint-weight 的其餘子群組,其獲指派的加權為 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
            }
        }
    };
}

結果︰

example of a weather tile

影像

<image> 元素用來顯示磚通知上的影像。 影像可以內嵌於磚內容內 (預設值)、當做內容後方的背景影像,或當做以動畫方式從通知上方進入的預覽影像。

注意

您可以使用 App 套件、App 本機存放區或網頁中的影像。 從 Fall Creators Update 開始,一般連線的網頁影像可以高達 3 MB,而計量付費連線可以高達 1 MB。 在尚未執行 Fall Creators Update 的裝置上,網頁影像不得超過 200 KB。

 

未指定任何額外的行為時,影像將會統一壓縮或延伸以填滿可用的寬度。 此範例顯示使用兩欄與內嵌影像的磚。 內嵌影像會伸展以填滿欄寬。

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

結果︰

image example

放置在 <binding> 根目錄或第一個群組中的影像也會伸展以填滿可用的高度。

影像對齊方式

您可以使用 hint-align 屬性,將影像設為靠左對齊、置中對齊或靠右對齊。 這也會使影像以原始解析度顯示,而不會自動伸展以填滿寬度。

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

結果︰

image alignment example (left, center, right)

影像邊界

根據預設,內嵌影像在影像上方或下方的任何內容之間有 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
            }
        }
    };
}

hint remove margin example

影像裁剪

使用 hint-crop 屬性可將影像裁剪成圓形,此屬性目前僅支援 "none" (預設) 或 "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
            }
        }
    }
}

結果︰

image cropping example

背景影像

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

結果︰

background image example

預覽影像

您可以指定從磚的上方「預覽」的影像。 預覽影像使用動畫,從磚的上方向下/向上滑動以進入檢視,之後再向後滑出,以在磚上顯示主要內容。 若要設定預覽影像,將 image 元素放在 <binding> 的根目錄中,並將 placement 屬性設定為 "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
            }
        }
    }
}

examples of peeking images

預覽和背景影像的圓形裁剪

在預覽和背景影像上使用 hint-crop 屬性以進行圓形裁剪:

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

結果如下所示:

circle crop for peek and background image

同時使用預覽和背景影像

若要在磚通知上同時使用預覽和背景影像,請在您的通知承載中指定預覽影像和背景影像。

結果如下所示:

peek and background image used together

預覽和背景影像重疊

您可以使用 hint-overlay 在背景和預覽影像上加上黑色重疊,它接受 0 至 100 的整數,0 代表沒有重疊,而 100 代表全黑的重疊。 您可以使用重疊來協助確保磚上文字的可讀性。

在背景影像上使用 hint-overlay

只要承載中有部分文字元素,背景影像的預設值就會是 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
        },

        ...
    }
}

hint-overlay 的結果:

example of an image hint overlay

在預覽影像上使用 hint-overlay

在 Windows 10 版本 1511 中,也支援預覽影像的重疊,就和背景影像一樣。 以 0 至 100 的整數指定預覽影像元素上的 hint-overlay。 預覽影像預設的重疊為 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-overlay on a peek image

垂直對齊方式 (文字堆疊)

您也可以使用 TileBinding 元素和 AdaptiveSubgroup 元素上的 hint-textStacking 屬性,控制內容在您的磚上的垂直對齊方式。 根據預設,所有內容都會垂直靠上對齊,但是您也可以將內容靠下對齊或置中對齊。

binding 元素上的文字堆疊

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

text stacking on binding element

子群組元素上的文字堆疊

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