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:
|
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:
|
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:
〉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
〉Using live tiles with different app types (Windows Runtime apps)
〉Using the notification queue (Windows Runtime apps)