特殊磚範本Special tile templates

特殊的磚範本是獨特的範本,它們可能具有動畫效果,或只是能讓您執行使用彈性磚無法達成的工作。Special tile templates are unique templates that are either animated, or just allow you to do things that aren't possible with adaptive tiles. 除了圖示磚範本 (針對 Windows 10 更新的傳統型特殊範本) 以外,每一個特殊的磚範本都是特別針對 Windows 10 建置的。Each special tile template was specifically built for Windows 10, except for the iconic tile template, a classic special template that has been updated for Windows 10. 本文涵蓋三個特殊的磚範本: 圖示、相片和連絡人。This article covers three special tile templates: Iconic, Photos, and People.

圖示磚範本Iconic tile template

圖示範本 (也稱為「IconWithBadge」範本) 可讓您在磚的中心顯示一個小型影像。The iconic template (also known as the "IconWithBadge" template) lets you display a small image in the center of the tile. Windows 10 支援手機和平板電腦/桌上型電腦上的範本Windows 10 supports the template on both phone and tablet/desktop.

小型和中型郵件磚

如何建立圖示磚How to create an iconic tile

下列步驟說明建立適用於 Windows 10 的圖示磚必須知道的所有事。The following steps cover everything you need to know to create an iconic tile for Windows 10. 就高層級而言,您需要您的圖示影像資產,然後使用圖示範本將通知傳送到磚,最後傳送提供要在磚上顯示的數字的徽章通知。At a high level, you need your iconic image asset, then you send a notification to the tile using the iconic template, and finally you send a badge notification that provides the number to be displayed on the tile.

圖示磚的開發人員流程

步驟 1:以 PNG 格式建立您的影像資產Step 1: Create your image assets in PNG format

為您的磚建立圖示資產,並將它們與您的其他資產一起放在專案資源中。Create the icon assets for your tile and place those in your project resources with your other assets. 建立一個最低限度為 200 x 200 像素的圖示,這適用於手機和桌上型電腦上的小型和中型磚。At a bare minimum, create a 200x200 pixel icon, which works for both small and medium tiles on phone and desktop. 若要提供最佳的使用者體驗,請為每個大小建立一個圖示。To provide the best user experience, create an icon for each size. 不需要在這些資產上填補。No padding is needed on these assets. 請參閱下方影像中的調整大小詳細資訊。See sizing details in the below image.

以 PNG 格式儲存具有透明度的圖示資產。Save icon assets in PNG format and with transparency. 在 Windows Phone 上,每個非透明的像素會顯示成白色 (RGB 255, 255, 255)。On Windows Phone, every non-transparent pixel is displayed as white (RGB 255, 255, 255). 為求簡單一致,也請針對桌面圖示使用白色。For consistency and simplicity, use white for desktop icons as well.

平板電腦、膝上型電腦和桌上型電腦上的 Windows 10 僅支援正方形圖示資產。Windows 10 on tablet, laptop, and desktop only supports square icon assets. Phone 支援正方形的資產和高度大於寬度的資產 (最多為 2:3 的寬度:高度比率),這對於手機圖示等的影像很有用。Phone supports both square assets and assets that are taller than they are wide, up to a 2:3 width:height ratio, which is useful for images such as a phone icon.

手機和桌上型電腦上小型和中型磚的圖示大小調整

含/不含徽章的資產大小調整

對於正方形資產,會自動於容器內置中:For square assets, automatic centering within the container occurs:

含/不含徽章的正方形資產大小調整

對於非正方形資產,會自動水平/垂直置中並貼齊至容器寬度/高度:For non-square assets, automatic horizontal/vertical centering and snapping to the width/height of the container occurs:

顯示自動置中水準非方形資產調整大小的螢幕擷取畫面,包含和不含徽章。

顯示自動置中垂直非方形資產調整大小的螢幕擷取畫面,包含和不含徽章。

步驟 2:建立基本的磚Step 2: Create your base tile

您可以在主要和次要磚上使用圖示範本。You can use the iconic template on both primary and secondary tiles. 如果您正在次要磚上使用它,您必須先建立次要磚或使用已釘選次要磚。If you're using it on a secondary tile, you'll first have to create the secondary tile or use an already-pinned secondary tile. 主要磚以隱含方式釘選,且一律會傳送通知。Primary tiles are implicitly pinned and can always be sent notifications.

步驟 3:將通知傳送到您的磚Step 3: Send a notification to your tile

雖然此步驟可能會因為通知在本機傳送或透過伺服器推播而不同,但您傳送的 XML 承載仍相同。Although this step can vary based on whether the notification is sent locally or via server push, the XML payload that you send remains the same. 若要傳送本機磚通知,請為您的磚 (主要或次要磚) 建立 TileUpdater,然後將通知傳送到使用圖示磚範本的磚,如下所示。To send a local tile notification, create a TileUpdater for your tile (either primary or secondary tile), then send a notification to the tile that uses the iconic tile template as seen below. 在理想的情況下,您也應該使用彈性磚範本包含寬形和大型磚大小的繫結。Ideally, you should also include bindings for wide and large tile sizes using adaptive tile templates.

以下是 XML 承載的範例程式碼:Here's sample code for the XML payload:

<tile>
  <visual>

    <binding template="TileSquare150x150IconWithBadge">
      <image id="1" src="Iconic.png" alt="alt text"/>
    </binding>
    
    <binding template="TileSquare71x71IconWithBadge">
      <image id="1" src="Iconic.png" alt="alt text"/>
    </binding>

  </visual>
</tile>

這個圖示範本的 XML 承載會使用指向您在步驟 1 中建立的影像的影像元素。This iconic tile template XML payload uses an image element that points to the image that you created in Step 1. 現在您的磚已準備好在您的圖示旁顯示徽章,只剩下傳送徽章通知。Now your tile is ready to display the badge next to your icon; all that's left is sending badge notifications.

步驟 4:將徽章通知傳送到您的磚Step 4: Send a badge notification to your tile

和步驟 3 一樣,此步驟可能會因為通知在本機傳送或透過伺服器推播而不同,但您傳送的 XML 承載仍相同。As with step 3, this step can vary based on whether the notification is sent locally or via server push, yet the XML payload that you send remains the same. 若要傳送本機徽章通知,請為您的磚 (主要或次要磚) 建立 BadgeUpdater,然後傳送包含您所需的值的徽章通知 (或清除徽章)。To send a local badge notification, create a BadgeUpdater for your tile (either primary or secondary tile), then send a badge notification with your desired value (or clear the badge).

以下是 XML 承載的範例程式碼:Here's sample code for the XML payload:

<badge value="2"/>

磚的徽章會適當地更新。The tile's badge will update accordingly.

步驟 5:總結Step 5: Putting it all together

下列影像說明各種 API 與承載如何與圖示磚範本的每個層面相關聯。The following image illustrates how the various APIs and payloads are associated with each aspect of the iconic tile template. 磚通知 (包含這些 <binding元素) 是用來指定圖示範本和影像資產;>徽章通知指定數值;磚屬性控制磚的顯示名稱及色彩等。A tile notification (which contains those <binding> elements) is used to specify the iconic template and the image asset; a badge notification specifies the numerical value; tile properties control your tile's display name, color, and more.

與圖示磚範本相關聯的 API 與承載

相片磚範本Photos tile template

相片磚範本可讓您在動態磚上顯示相片的幻燈片秀。The photos tile template lets you display a slideshow of photos on your live tile. 範本適用於所有磚大小 (包括小型),而且在每個磚大小上的行為都相同。The template is supported on all tile sizes, including small, and behaves the same on each tile size. 下列範例示範使用相片範本的中型磚的五個畫面格。The below example shows five frames of a medium tile that uses the photos template. 範本包含縮放和淡入與淡出動畫,而且會循環顯示所選相片並無限循環。The template has a zoom and cross-fade animation that cycles through selected photos and loops indefinitely.

使用相片磚範本的影像幻燈片秀

如何使用相片範本How to use the photos template

如果您安裝了 Notification 程式庫,使用相片範本就很輕鬆。Using the photos template is easy if you've installed the Notifications library. 雖然您可以使用原始 XML,但強烈建議您使用程式庫,這樣您就不需要為產生有效的 XML 或 XML 逸出內容操心。Although you can use raw XML, we highly recommend using the library so you don't have to worry about generating valid XML or XML-escaping content.

Windows Phone 在一個幻燈片秀中最多顯示 9 張相片;平板電腦、膝上型電腦和桌上型電腦最多顯示 12 張。Windows Phone displays up to 9 photos in a slideshow; tablet, laptop, and desktop display up to 12.

如需傳送磚通知的詳細資訊,請參閱傳送通知一文For information about sending the tile notification, see the Send notifications article.

<!--
 
To use the Photos template...
 
 - On any adaptive tile binding (like TileMedium or TileWide)
   - Set the hint-presentation attribute to "photos"
   - Add up to 12 images as children of the binding.
    
-->
 
<tile>
  <visual>
     
    <binding template="TileMedium" hint-presentation="photos">
       
      <image src="Assets/1.jpg" />
      <image src="ms-appdata:///local/Images/2.jpg"/>
      <image src="http://msn.com/images/3.jpg"/>
       
      <!--TODO: Can have 12 images total-->
       
    </binding>
     
    <!--TODO: Add bindings for other tile sizes-->
     
  </visual>
</tile>
/*
 
To use the Photos template...
 
 - On any TileBinding object
   - Set Content property to new instance of TileBindingContentPhotos
   - Add up to 12 images to Images property of TileBindingContentPhotos.
 
*/
 
TileContent content = new TileContent()
{
    Visual = new TileVisual()
    {
        TileMedium = new TileBinding()
        {
            Content = new TileBindingContentPhotos()
            {
                Images =
                {
                    new TileBasicImage() { Source = "Assets/1.jpg" },
                    new TileBasicImage() { Source = "ms-appdata:///local/Images/2.jpg" },
                    new TileBasicImage() { Source = "http://msn.com/images/3.jpg" }
 
                    // TODO: Can have 12 images total
                }
            }
        }
 
        // TODO: Add other tile sizes
    }
};

連絡人磚範本People tile template

Windows 10 中的連絡人應用程式使用特殊的磚範本,會在磚上垂直或水平滑動的圓形中顯示影像集合。The People app in Windows 10 uses a special tile template that displays a collection of images in circles that slide around vertically or horizontally on the tile. 這個磚範本自 Windows 10 組建 10572 開始提供,我們歡迎所有人在應用程式中使用。This tile template has been available since Windows 10 Build 10572, and anyone is welcome to use it in their app.

連絡人磚範本適用於下列大小的磚:The People tile template works on tiles of these sizes:

中型磚 (TileMedium)Medium tile (TileMedium)

中型連絡人磚

 

寬形磚 (TileWide)Wide tile (TileWide)

寬形連絡人磚

 

大型磚 (僅限桌上型電腦) (TileLarge)Large tile (desktop only) (TileLarge)

大型連絡人磚

 

如果您使用 Notification 程式庫,若要使用連絡人磚範本,只需要為您的 TileBinding 內容建立一個新的 TileBindingContentPeople 物件即可。If you're using the Notifications library, all you have to do to make use of the People tile template is create a new TileBindingContentPeople object for your TileBinding content. TileBindingContentPeople 類別有一個供您新增影像的 Images 屬性。The TileBindingContentPeople class has an Images property where you add your images.

如果您使用原始的 XML,請將 hint-presentation 設定為 "people",並將您的影像新增為繫結元素的子系。If you're using raw XML, set the hint-presentation to "people" and add your images as children of the binding element.

下列 C# 程式碼範例假設您使用的是 Notification 程式庫The following C# code sample assumes that you're using the Notifications library.

TileContent content = new TileContent()
{
    Visual = new TileVisual()
    {
        TileMedium = new TileBinding()
        {
            Content = new TileBindingContentPeople()
            {
                Images =
                {
                    new TileBasicImage() { Source = "Assets/ProfilePics/1.jpg" },
                    new TileBasicImage() { Source = "Assets/ProfilePics/2.jpg" },
                    new TileBasicImage() { Source = "Assets/ProfilePics/3.jpg" },
                    new TileBasicImage() { Source = "Assets/ProfilePics/4.jpg" },
                    new TileBasicImage() { Source = "Assets/ProfilePics/5.jpg" },
                    new TileBasicImage() { Source = "Assets/ProfilePics/6.jpg" },
                    new TileBasicImage() { Source = "Assets/ProfilePics/7.jpg" },
                    new TileBasicImage() { Source = "Assets/ProfilePics/8.jpg" },
                    new TileBasicImage() { Source = "Assets/ProfilePics/9.jpg" }
                }
            }
        }
    }
};
<tile>
  <visual>
 
    <binding template="TileMedium" hint-presentation="people">
      <image src="Assets/ProfilePics/1.jpg"/>
      <image src="Assets/ProfilePics/2.jpg"/>
      <image src="Assets/ProfilePics/3.jpg"/>
      <image src="Assets/ProfilePics/4.jpg"/>
      <image src="Assets/ProfilePics/5.jpg"/>
      <image src="Assets/ProfilePics/6.jpg"/>
      <image src="Assets/ProfilePics/7.jpg"/>
      <image src="Assets/ProfilePics/8.jpg"/>
      <image src="Assets/ProfilePics/9.jpg"/>
    </binding>
 
  </visual>
</tile>

為提供最佳的使用者經驗,建議您針對每個磚大小提供下列數目的相片:For the best user experience, we recommend that you provide the following number of photos for each tile size:

  • 中型磚:9 張相片Medium tile: 9 photos
  • 寬形磚:15 張相片Wide tile: 15 photos
  • 大型磚:20 張相片Large tile: 20 photos

設定此數目的相片可以保留一些空的圓形,在視覺上磚就不會顯得過於雜亂。Having that number of photos allows for a few empty circles, which means that the tile won't be too visually busy. 您可以隨意調整相片數目,以設定最適合您的外觀。Feel free to tweak the number of photos to get the look that works best for you.

若要傳送通知,請參閱選擇通知傳遞方法To send the notification, see Choose a notification delivery method.