Windows10自適應和交互式toast通知[1]

閱讀目錄:

1. 概述
2. toast通知的結構
3. 視覺區域(Visual)
4. 行為(Actions)
5. 特定場景下的Toast通知
6. 帶多內容的通知
7. 帶行為的通知(例子1)
8. 帶行為的通知(例子2)
9. 帶文本輸入框和行為的通知(例子1)
10. 帶文本輸入框和行為的通知(例子2)
11. 帶下拉框輸入和行為的通知
12. 提醒通知
13. 前后台激活的例子
14. <visual>和<audio>的Schema
15. <actions>的Schema
16. 系統行為的附加行為

Windows10的自適應和交互式toast通知是一個新特性。它可以讓你：

創建靈活的toast通知，包括內嵌圖片及更多的內容，不在局限於之前Windows 8.1和Windows Phone 8.1提供的toast模板。

關於Windows 8.1和Windows Phone 8.1遺留的模板介紹，請看toast template catalog。

概述

在Windows10中，有以下幾個方面，可以自定義已經存在的toast模板。

• 移動一個限制的模板模型到一個靈活的自適應模板。
• 有能力在payload中，增加自定義行為和系統行為。
• 為主要的toast通知提供三個不同的激活類型。
• 有能力為特殊場景創建通知，包括鬧鍾、日歷、來電。

上面提到的內容本文都會介紹到。

toast通知的結構

在windows10中，開發者使用xml構造一個toast通知，它包含以下幾個關鍵節點。

XML表示用戶在界面上能看到的視覺內容，包括文本和圖片，同樣包含開發者想在通知內增加的自定義交互行為。

下面是個簡單例子：

<toast launch="app-defined-string">
  <visual>
    <binding template="ToastGeneric">
      <text>Sample</text>
      <text>This is a simple toast notification example</text>
      <image placement="AppLogoOverride" src="oneAlarm.png" />
    </binding>
  </visual>
  <actions>
    <action content="check" arguments="check" imageUri="check.png" />
    <action content="cancel" arguments="cancel" />
  </actions>
  <audio src="ms-winsoundevent:Notification.Reminder"/>
</toast>

視覺區域(Visual)

在visual節點內部，要求有一個binding節點，它包含visual模板信息和toast的視覺內容。

它不同於tile通知，可以在不同的tile大小上支持多個模板。Windows10中UWP應用的toast通知只有一個模板名稱“ToastGeneric”。 相比之前遺留下的限制性模板，它有以下幾個優勢:

• 靈活性：開發者可以改變toast的內容，比如添加一個文本行、添加一個圖片或者改變應用icon顯示的縮略圖等等。不用擔心由於模板名稱不匹配，而改變整個模板或者創建一個無效的payload。
• 自適應：開發者可以為toast通知使用同樣的代碼去構造同樣的payload，其目標是實現各種windows設備類型統一，比如手機、平板、桌面PC、甚至Xbox，這些不同的設備都將允許這個通知，在用戶自己的UI策略上顯示適當的視覺區域和互動模型。

所有這些屬性都會在visual部分和它的子節點中被支持。
關於更多的例子，請看下面Samples部分。

行為(Actions)

在Windows10 UWP應用中，開發者可以添加自定義交互行為到toast通知里，它允許用戶在app外做更多的事情。開發者能指定2個類型的節點：

• <action> 通過此節點開發者能在toast通知內部指定3個自定義或系統行為。
• <input> 開發者使用戶能夠在toast通知內輸入信息，比如在toast通知內直接輸入信息進行內容回復。

提示： <action>和<input>在windows設備族里面是自適應的。比如，在windows移動和桌面上， <action>展示給用戶的是一個觸摸或點擊，一個文本標記< input>展示的是一個輸入框，用戶可以通過鍵盤或虛擬鍵盤進行輸入。 可能在不久后未來的設備上，行為是通過聲音來觸發的，文本框是通過用戶語言識別來輸入的。 toast通知內部的交互是能夠適配這樣的互動模式，消息內容顯示能在設備上進行自適應的可視范圍調整。

當一個行為被用戶觸發時，開發者能在<action>內activationType屬性上選擇下面的某一種方式去做對應處理：

• 激活App在前台顯示。 通過行為觸發時指定的參數來判斷並導航到對應的頁面或內容。
• 激活App的后台任務去處理，不會在前台影響用戶。
• 通過協議(protocol)激活另外一個App。
• 執行一個指定的系統行為。 UWP當前可用的系統行為是關閉和取消鬧鍾或日歷計划，這會在下面的章節進一步講解。

所有上面提到的屬性都會在<actions>部分和它的子節點上支持。

關於toast內部的交互，請看后面的例子。

聲音(Audio)

在windows10 UWP應用中，其<audio>節點內容和WP8.1版本保持不變。

移動設備能通過ms-appx和ms-appdata自定義聲音，但是桌面版不行。其二者都可以使用ms-winsoundevent。 關於toast上聲音的更多信息，請看audio schema page。

特定場景下的Toast通知

在windows10上，開發者可以為鬧鍾、日歷、來電去使用toast通知。 統一標准的toast通知從視覺上來看是一致的，用一些額外的UI策略會使通知適用每一個場景。

一個提醒的toast通知可以一直停在用戶屏幕上，直到用戶觸發它的行為去忽略它或使用它。在windows移動設備上，提醒toast通知也將會同樣的顯示。

除了上面提醒的通知與行為，鬧鍾通知會自動播放聲音。

來電通知會在windows移動設備上全屏顯示。

這些可在toast通知的根節點<toast>內，通過指定“scenario”屬性來完成。

XML例子

請注意下面所有的toast通知是從windows桌面預覽版系統得到的，toast通知的移動版本有時候會發生崩潰，這在后面會進行解釋。

帶多內容的通知

你可以在toast通知上使用多行文本，一個隨意的小照片去覆蓋應用的logo，一個隨意內嵌的圖片縮略圖。

<toast launch="app-defined-string">
  <visual>
<binding template="ToastGeneric">
    <text>Photo Share</text>
      <text>Andrew sent you a picture</text>
      <text>See it in full size!</text>
      <image placement="appLogoOverride" src="A.png" />
    <image placement="inline" src="hiking.png" />
    </binding>
  </visual>
</toast>

帶行為的通知(例子1)

<toast launch="app-defined-string">
  <visual>
    <binding template="ToastGeneric">
      <text>Microsoft Company Store</text>
      <text>New Halo game is back in stock!</text>
      <image placement="appLogoOverride" src="A.png" />
    </binding>
  </visual>
  <actions>
    <action activationType="foreground" content="see more details" arguments="details" imageUri="check.png"/>
    <action activationType="background" content="remind me later" arguments="later" imageUri="cancel.png"/>
  </actions>
</toast>

帶行為的通知(例子2)

<toast launch="app-defined-string">
  <visual>
    <binding template="ToastGeneric">
      <text>Cortana</text>
      <text>We noticed that you are near Wasaki.</text>
      <text>Thomas left a 5 star rating after his last visit, do you want to try?</text>
      <image placement="appLogoOverride" src="A.png" />
    </binding>
  </visual>
  <actions>
    <action activationType="foreground" content="reviews" arguments="reviews" />
    <action activationType="protocol" content="show map" arguments="bingmaps:?q=sushi" />
  </actions>
</toast>

帶文本輸入框和行為的通知(例子1)

在這個例子中，你可以添加一個文本框，它允許用戶輸入文本。

帶文本輸入框和行為的通知(例子2)

如果允許用戶通過輸入內容來回復，你只需要關心一個場景即可，也可以使用下面的布局。 它僅僅適用於你的行為是一個指定的圖片icon。

<toast launch="developer-defined-string">
  <visual>
    <binding template="ToastGeneric">
      <text>Andrew B.</text>
      <text>Shall we meet up at 8?</text>
      <image placement="appLogoOverride" src="A.png" />
    </binding>
  </visual>
  <actions>
    <input id="message" type="text" placeholderContent="reply here" />
    <action activationType="background" content="reply" arguments="reply" imageUri="send.png" hint-inputId="message"/>
  </actions>
</toast>

帶下拉框輸入和行為的通知

在本例子中，可以添加一個下拉框列表，提供預先定義好的選項給用戶選擇。

<toast launch="developer-defined-string">
  <visual>
    <binding template="ToastGeneric">
      <text>Spicy Heaven</text>
      <text>When do you plan to come in tomorrow?</text>
      <image placement="appLogoOverride" src="A.png" />
    </binding>
  </visual>
  <actions>
    <input id="time" type="selection" defaultInput="2" >
  <selection id="1" content="Breakfast" />
  <selection id="2" content="Lunch" />
  <selection id="3" content="Dinner" />
    </input>
    <action activationType="background" content="Reserve" arguments="reserve" />
    <action activationType="background" content="Call Restaurant" arguments="call" />
  </actions>
</toast>

提醒通知

注意：在這個提醒場景下，其圖片會放大填充到整個toast通知的寬度。

<toast scenario="reminder" launch="developer-pre-defined-string">
  <visual>
    <binding template="ToastGeneric">
      <text>Adam's Hiking Camp</text>
      <text>You have an upcoming event for this Friday!</text>
      <text>RSVP before it"s too late.</text>
      <image placement="appLogoOverride" src="A.png" />
      <image placement="inline" src="hiking.png" />
    </binding>
  </visual>
  <actions>
    <action activationType="background" content="RSVP" arguments="rsvp" />
    <action activationType="background" content="Reminder me later" arguments="later" />
  </actions>
</toast>

激活的例子

如上面提到的，toast的內容和行為是有能力通過不同的方式去觸發app。下面的例子會展示並告訴你，怎么處理來自toast或toast行為的不同激活方式。

前台激活

在這個場景下，app會啟動它自身到前台，去響應toast通知內部的行為觸發。 注意:toast通知的激活過去通常會調用OnLaunched()方法。在windows10上，toast有它自己激活方式，將會調用OnActivated()方法。

async protected override void OnActivated(IActivatedEventArgs args)
{
    If (args.Kind == ActivationKind.ToastNotification)
    {
         //從事件參數中獲取預定義的數據和用戶輸入
        var toastArgs = args as ToastNotificationActivatedEventArgs;
        var arguments = toastArgs.Arguments;
        var input = toastArgs.UserInput[“1”]; 
    }
}

后台激活

在這個場景下，app會使用一個后台任務去響應來自toast通知內部的行為觸發。下面的代碼會展示怎么在manifest內定義一個后台任務去處理toast的激活。 當一個后台任務被執行時，怎么得到行為上的詳細參數和用戶輸入的內容。

<!-- 添加一個新的后台任務類型-->
<Extension Category = "windows.backgroundTasks" 
EntryPoint = "Tasks.BackgroundTaskClass" >
  <BackgroundTasks>
    <Task Type="systemEvent" />
  </BackgroundTasks>
</Extension>

namespace ToastNotificationTask
{
    public sealed class ToastNotificationBackgroundTask : IBackgroundTask
    {
        public void Run(IBackgroundTaskInstance taskInstance)
        {
        //開發者可以在這里取回預定義的數據。
        //參數和用戶輸入。
        var details = taskInstance.TriggerDetails as ToastNotificationActionTriggerDetail;
        var arguments = details.Arguments;
        var input = details.Input.Lookup(“1”);
        }        
    }
}

<visual>和<audio>的Schema

注意：以下“？”表示一個屬性是可選的。

<toast launch? duration? activationType? scenario? hint-people? >
    <visual version? lang? baseUri? addImageQuery? >
        <binding template? lang? baseUri? addImageQuery? >
            <text lang? >content</text>
            <text />
            <image src placement? alt? addImageQuery? hint-crop? />
        </binding>
    </visual>
    <audio src? loop? silent? />
    <actions>
    </actions>
</toast>

<toast>的屬性

launch?	launch? = string，可選項。 當app被toast激活時，一個字符串會被傳遞給應用。它依賴activationType的值，app會在前台時接收，后台任務內接收，或者另外一個app接收(原app通過協議啟動的)。字符串的格式和內容定義被app自己使用。當用戶觸摸或點擊這個toast時，去啟動它的相關聯APP，這個啟動字符串會提供給app，app允許展示給用戶一個相關視圖到toast內容上，而不是通過默認方式啟動它。 注意：如果因為用戶點擊行為而發生替換toast內容。開發者應取回< action>標簽上預定義的"arguments"，而不是在< toast>預定義的"launch"值。
duration?	duration? = "short|long"。默認是short。 僅適用於特定場景和appCompat，再也不需要它配置鬧鍾場景。 除了office，它可能使用這彈出一個toast完成保存文件，再沒有其他會使用這個屬性了，如果你確實有一個真實場景需要它，請聯系我們。
activationType?	activationType? = "foreground|background|protocol"，可選屬性，默認值是“foreground“。
scenario?	scenario? = "default|alarm|reminder|incomngCall"，一個可選屬性，默認值是“default“。 你不需要更改屬性，除非你的場景是彈出一個鬧鍾、日歷、或來電。不要使用這個屬性去保持你的通知始終在屏幕上。
hint-people?	hint-people? = string 這個是為聯系信息的可選屬性。 系統支持這個屬性，但目前還沒場景去使用這個值。

<visual>的屬性

version?	version? = nonNegativeInteger 暫不需要，
lang?	請看 MSDN 。
baseUri?	請看 MSDN。
addImageQuery?	請看 MSDN 。

 <binding>的屬性

template?	[重要] template? = "ToastGeneric"。 如果你使用任何新的自適應和交互功能，請確保你用ToastGeneric模板去替代遺留的模板。
lang?	請看 MSDN 。
baseUri?	請看 MSDN 。
addImageQuery?	請看MSDN。

 <text>的屬性

lang?	Please see MSDN for details on these existing optional attributes.
<text />	當你想在2個文本節點中間添加一個空行時，可以使用它。

 <image>的屬性

src	請看 MSDN
placement?	placement? = "inline|appLogoOverride"可選的。 它指定圖片將要顯示在哪里。“inline”表示在toast內部文本的下面。“appLogoOverride” 意思是替換應用logo(它會現在toast的左上角部分)。每個placement值最多有一個圖片。
alt?	請看 MSDN.
addImageQuery?	請看 MSDN.
hint-crop?	hint-crop? = "none" | "circle" ，可選的。 “none”是默認值，表示不裁剪。 “circle”表示會把這個圖片裁剪成圓形，用它做聯系人的頭像、人的照片等等。作為metro2.0設計指南的一部分。

 <audio>的屬性

src?	請看 MSDN.
loop?	請看 MSDN.
silent?	請看 MSDN.

<actions>的schema

<toast>
    <visual>
    </visual>
    <audio />
    <actions>
        <input id type title? placeHolderContent? defaultInput? >
            <selection id content />
        </input>
        <action content arguments activationType? imageUri? hint-inputId />
    </actions>
</toast>

<input>的屬性

id	id = string 這個id屬性是必須的，一旦app被前台或后台激活，開發者可以通過它獲取用戶輸入的內容。
type	type = "text|selection" 這個type屬性是必須的。 它被用來指定是一個文本輸入框或者預定義下拉列表輸入框。 在移動或桌面，它指定你是想要一個textbox輸入還是一個listbox輸入。
title?	title? = string，可選的。 在輸入框功能不能用時，它為開發者指定輸入框的標題。 在移動和桌面上，這個標題會顯示在輸入框的上方。
placeHolderContent?	placeHolderContent? = string，可選的。 當類型為text時，輸入框不可見時會被顯示。 當類型不是text時，它會被忽略。
defaultInput?	defaultInput? = string，可選的。 提供一個默認的文本框的值。 當類型為text，它作為一個純文本顯示。 當類型為selection時，它成為input內部可用選項的id。

 <action>的屬性

content	content = string，必須的。 設置button的文本顯示。
arguments	arguments = string 這個參數屬性是app定義的數據，當app被用戶行為激活時能獲取到參數內容。
activationType?	activationType? = "foreground|background|protocol"，可選的，默認“foreground” 表示用戶行為激活app的方式，是前台、后台任務、或者通過協議啟動。
imageUri?	imageUri? = string，可選的。 它為顯示的button內提供一個圖片icon
hint-inputId	hint-inputId = string，使用在快速回復場景。.

 系統行為的附加行為

除了上述選擇外，在windows10中，如果app不想在后台任務內去處理通知的睡眠/忽略，UWP也提供系統處理行為去睡眠或忽略通知。這些行為能被結合使用或單個指定使用，但是不推薦任何人在沒有忽略行為時去實現一個睡眠行為。

結合系統命令

<toast>
    <visual>
    </visual>
    <audio />
    <actions hint-systemCommands? = "SnoozeAndDismiss" />
</toast>

<actions>的屬性

hint-systemCommands

如果你要發布一個移動app，目前不要使用。hint-systemCommands在移動上是損壞的，移動設備不需要用戶選擇睡眠時間。 僅適用於你發布desktop上使用。如果你二者平台都要發布，推薦使用下面的“個人處理行為”。

個人系統處理行為

<toast>
    <visual>
    </visual>
    <audio />
<actions>
<input id="snoozeTime" type="selection" defaultInput="10">
  <selection id="5" content="5 minutes" />
  <selection id="10" content="10 minutes" />
  <selection id="20" content="20 minutes" />
  <selection id="30" content="30 minutes" />
  <selection id="60" content="1 hour" />
</input>
<action activationType="system" arguments="snooze" hint-inputId="snoozeTime" content=""/>
<action activationType="system" arguments="dismiss" content=""/>
</actions>
</toast>

構建個人睡眠和忽略行為，你需要做下面的事情。

• 指定activationType = “system”.
• 指定arguments = “snooze” | “dismiss”
• 指定內容:
  • 如果你app想區域化顯示“snooze” 和“dismiss”字符串到行為上, 那可以指定空字符串在<action content = “”/>上。
  • 如果你想自定義字符串, 設置它的值即可<action content=”Remind me later” />.
• 指定輸入:
  • 如果你不想用戶自己選擇一個睡眠間隔，僅僅想你的通知睡眠是一個系統定義時間間隔(通過系統保持)，那就不需要構造<input>;
  如果你想提供一個睡眠時間選擇。:
  • 指定hint-inputId在睡眠行為上;
  • 確保你input的id和睡眠行為的hint-inputId 相匹配，<input id=”snoozeTime”></input><action hint-inputId=”snoozeTime”/>。
  • 指定選項的id為非負整數，它表示睡眠間隔以分鍾為單位，<selection id=”240” /> 表示4個小時。
  • 確保<input>中defaultInput的值和<selection>的子節點中的一個di相匹配。
  • 最多提供5個<selection>值.

 

今天入職，吼吼。

譯自Adaptive and interactive toast notifications for Windows 10。