Universal App - Schema of the Tile templates

Universal App - Schema of the Tile templates

<Universal App - 操作 Tiles>介紹操作 Tile templates 更新 default tile,該篇針對 Tile template 的 schema 加以說明。

為什麼會需要介紹這篇呢?

上一篇只是簡易地介紹要更新時操作的元素與對象,這篇將仔細介紹其他設定功能讓 Tile 的更新加上更多用途與內容。

 

根據<Tile schema>往下開始說明:

Tile schema 定義了 Tile update 的 template 與 layout,例如:指定 image、text 的數量、language information…等。

〉藉由 TileUpdateManager.getTemplateContent 取得預設的 default tile template 來加以修改給予內容。

     (可利用 NotificationsExtensions 藉由物件化操作 template 的內容。)

〉藉由 TileNotification.content 取得已存在的 tile content,搭配修改好的 template 來更新。

 

Tile schema 由下方幾個重要元素來組合:

Element Description
binding 指定 tile template。每一個 notification 應該至少包含一個 binding element 為每一種不同 size 的 tile。
image 在 tile template 中使用 image。指定 image 需支持 tile template 指定的 size 、shape 需求以符合 template。
text 在 tile template 中使用 text。
tile 基本 tile element,裡面只能有一個 visual element。
visual 可包含多個 binding elements,每一個分別定義對應的 tile template。

例如:

<tile>
  <visual version="2">
    <!-- 可擁有多種不同 size 的 binding elements -->
    <binding template="TileSquare150x150Block" fallback="TileSquareBlock">
      <text id="1">Text Field 1 (block text)</text>
      <text id="2">Text Field 2</text>
    </binding>  
    <binding template="TileWide310x150ImageCollection" fallback="TileWideImageCollection">
      <image id="1" src="image1.png" alt="larger image"/>
      <image id="2" src="image2.png" alt="small image, row 1, column 1"/>
      <image id="3" src="image3.png" alt="small image, row 1, column 2"/>
      <image id="4" src="image4.png" alt="small image, row 2, column 1"/>
      <image id="5" src="image5.png" alt="small image, row 2, column 2"/>
    </binding>  
  </visual>
</tile>

 

彺下分別針對五個元素說明:

 

binding

Element hierarchy:<tile> <visual><binding >。

<binding template       = tileTemplateNameV2
         fallback?      = tileTemplateNameV1
         lang?          = string
         baseUri?       = anyURI
         branding?      = "none" | "logo" | "name"
         addImageQuery? = boolean
         contentId?     = string >
 
  <!-- Child elements -->
  ( image
  | text
  )*
 
</binding>

(?   optional (zero or one) ;*   optional (zero or more))

屬性說明如下:

Attribute Description Data type Required Default value
addImageQuery

Set to true to allow Windows to append a query string to the image URI supplied in the tile notification. Use this attribute if your server hosts images and can handle query strings, either by retrieving an image variant based on the query strings or by ignoring the query string and returning the image as specified without the query string. This query string specifies scale, contrast setting, and language; for instance, a value of

"www.website.com/images/hello.png"

included in the notification becomes

"www.website.com/images/hello.png?ms-scale=100&ms-contrast=standard&ms-lang=en-us"

boolean No false
baseUri A default base URI that is combined with relative URIs in image source attributes. any URI No ms-appx:///
branding The form that the tile should use to display the app's brand.

This attribute can have one of the following values:

  • none
  • logo
  • name
No logo
contentId Set to a sender-defined string that uniquely identifies the content of the notification. This prevents duplicates in the situation where a large tile template is displaying the last three wide tile notifications. string No  
fallback A template to use if the primary template name is not recognized by the recipient, for use with Windows 8 compatibility. This value is the Windows 8 name of the value in thetemplate attribute. New templates introduced after Windows 8 do not have a fallback. tileTemplateNameV1 No None
lang The target locale of the XML payload, specified as a BCP-47 language tags such as "en-US" or "fr-FR".
The locale specified here overrides any other specified locale, such as that in binding or visual. If this value is a literal string, this attribute defaults to the user's UI language. If this value is a string reference, this attribute defaults to the locale chosen by Windows Runtime in resolving the string.

〉literal string:
     for instance, <text id="1">Hello world!</text>.
 
〉string reference:
     <text id="1"> ms-resource:hello</text>.
     When using the "ms-resource" prefix, the string identifier is referenced in the app's 
     Resources.resjson (Windows Store app using JavaScript) or Resources.resw file (C#/C++).
     <Globalizing your tile: localization, scaling, and accessibility.>
string No None
template One of the provided templates on which to base the tile. Typically, a developer should supply both a square and a wide format, each as a separate binding element. Valid entries are members of the tileTemplateType enumeration. tileTemplateNameV2 Yes None

template element 裡使用 tileTemplateNameV2 的值,可參考<The tile template catalog>裡的內容,

要注意的是:V2 for Windows 8.1 (包括 Windows Phone 8.1)之後;V1 for Windows 8。

相關 tile 如何處理多語系的方式可另外參考<https://msdn.microsoft.com/en-us/library/windows/apps/br212854.aspx>中介紹的內容。

 

image

Element hierarchy:<tile> <visual><binding ><image>。

<image id             = integer
       src            = string
       alt            = string
       addImageQuery? = boolean />

屬性說明如下:

Attribute Description Data type Required Default value
addImageQuery

Set to true to allow Windows to append a query string to the image URI supplied in the tile notification. Use this attribute if your server hosts images and can handle query strings, either by retrieving an image variant based on the query strings or by ignoring the query string and returning the image as specified without the query string. This query string specifies scale, contrast setting, and language; for instance, a value of

"www.website.com/images/hello.png"

included in the notification becomes

"www.website.com/images/hello.png?ms-scale=100&ms-contrast=standard&ms-lang=en-us"

Boolean No false
alt A description of the image, for users of assistive technologies. string No None
id The image element in the tile template that this image is intended for. If a template has only one image, then this value is 1. The number of available image positions is based on the template definition. integer Yes None
src

The URI of the image source, one of these protocol handlers:

  • http:// or https://

    A web-based image.

  • ms-appx:///

    An image included in the app package.

  • ms-appdata:///local/

    An image saved to local storage.

  • file:///

    A local image. (Supported only for desktop apps. This protocol cannot be used by Windows Store apps.)

string Yes None

 

 

text

Element hierarchy:<tile> <visual><binding ><text>。

<text id    = integer
      lang? = string />

屬性說明如下:

Attribute Description Data type Required Default value
id The text element in the tile template that this text is intended for. If a template has only one text element, then this value is 1. The number of available text positions is based on the template definition. integer Yes None
lang The target locale of the XML payload, specified as a BCP-47 language tags such as "en-US" or "fr-FR".
The locale specified here overrides any other specified locale, such as that in binding or visual. If this value is a literal string, this attribute defaults to the user's UI language. If this value is a string reference, this attribute defaults to the locale chosen by Windows Runtime in resolving the string.

〉literal string:
     for instance, <text id="1">Hello world!</text>.
 
〉string reference:
     <text id="1"> ms-resource:hello</text>.
     When using the "ms-resource" prefix, the string identifier is referenced in the app's 
     Resources.resjson (Windows Store app using JavaScript) or Resources.resw file (C#/C++).
     <Globalizing your tile: localization, scaling, and accessibility.>
string No None

 

 

tile

Element hierarchy:<tile> 。

<tile>
 
  <!-- Child elements -->
  visual
 
</tile>

namespace:http://schemas.microsoft.com/notifications/2012/tile.xsd,parent element 包含了唯一一個 <visual />  elment。

 

 

visual

Element hierarchy:<tile> <visual>。

<visual version?       = integer
        lang?          = string
        baseUri?       = anyURI
        branding?      = "none" | "logo" | "name"
        addImageQuery? = boolean
        contentId?     = string >
 
  <!-- Child elements -->
  binding+
 
</visual>

可包含多個 <binding /> elements 的元素。

重要屬性說明如下:

Attribute Description Data type Required Default value
addImageQuery

Set to true to allow Windows to append a query string to the image URI supplied in the tile notification. Use this attribute if your server hosts images and can handle query strings, either by retrieving an image variant based on the query strings or by ignoring the query string and returning the image as specified without the query string. This query string specifies scale, contrast setting, and language; for instance, a value of

"www.website.com/images/hello.png"

included in the notification becomes

"www.website.com/images/hello.png?ms-scale=100&ms-contrast=standard&ms-lang=en-us"

Boolean No false
baseUri A default base URI that is combined with relative URIs in image source attributes. any URI No ms-appx:///
branding The form that the tile should use to display the app's brand.

‧none

‧logo

‧name

No None
contentId Set to a sender-defined string that uniquely identifies the content of the notification. This prevents duplicates in the situation where a large tile template is displaying the last three wide tile notifications.   No None
lang The target locale of the XML payload, specified as a BCP-47 language tags such as "en-US" or "fr-FR". This locale is overridden by any locale specified in binding or text. If this value is a literal string, this attribute defaults to the user's UI language. If this value is a string reference, this attribute defaults to the locale chosen by Windows Runtime in resolving the string. See Remarks for when this value isn't specified. string No None
version The version of the tile XML schema this particular payload was developed for. It can have two values, 1 or 2. Version 1 requires a valid payload under the Windows 8 schema. Version 2 recognizes the new large tile templates, the new Windows 8.1 template names for existing templates, and the fallback attribute of the binding element. integer No 1

詳細可另外參考<https://msdn.microsoft.com/en-us/library/windows/apps/br212857.aspx>中的 tile localized language 處理說明。

 

======

該篇介紹的內容其實我是把它做為工具文件來看,由於學習 Tile update 時常忘記一些特殊的設定,

造成需要 UI/UX 重新去考量 Tile update 的用途與定義。所以可以花一些時間來注意一些小細節還不錯。

希望對大家有所幫助,謝謝。

 

References:

Tile schema

The tile template catalog (Windows Runtime apps)

Quickstart: Sending a tile update (XAML)

Tile and tile notification overview (Windows Runtime apps)

Guidelines for tiles and badges

Resource Management System

ResourceContext

Using live tiles with different app types (Windows Runtime apps)

Using the notification queue (Windows Runtime apps)

 

Dotblogs Tags: