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” |
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>值.
- 如果你不想用戶自己選擇一個睡眠間隔,僅僅想你的通知睡眠是一個系統定義時間間隔(通過系統保持),那就不需要構造<input>;如果你想提供一個睡眠時間選擇。: