{"id":264,"date":"2015-01-26T10:20:57","date_gmt":"2015-01-26T09:20:57","guid":{"rendered":"http:\/\/lalloue.fr\/blog\/?p=264"},"modified":"2015-03-02T18:05:49","modified_gmt":"2015-03-02T17:05:49","slug":"display-local-toast-notification-in-windows-universal-app","status":"publish","type":"post","link":"http:\/\/lalloue.fr\/blog\/display-local-toast-notification-in-windows-universal-app\/","title":{"rendered":"Display local toast notification in Windows Universal App"},"content":{"rendered":"<p><a href=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2015\/01\/notification.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-265\" src=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2015\/01\/notification-300x172.png\" alt=\" local notification\" width=\"300\" height=\"172\" srcset=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2015\/01\/notification-300x172.png 300w, http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2015\/01\/notification.png 768w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Do you\u00a0want to develop a universal app for Windows Phone 8.1 and Windows 8.1 which contains a local <strong>\u201cNotification\u201d<\/strong> as the picture above ?<\/p>\n<p>I&#8217;m going to show you how to display\u00a0all messages to the user (error, information, warnings) in a kind of toast control. Everything is done locally without going through the standard notification system.<\/p>\n<p><!--more--><\/p>\n<p>&nbsp;<\/p>\n<h3><strong>Introduction :<\/strong><\/h3>\n<p>Before universal apps, several solutions could display local notifications as :<\/p>\n<ul>\n<li>TOASTINET (<a href=\"http:\/\/www.nuget.org\/packages\/ToastinetWP\/\">http:\/\/www.nuget.org\/packages\/ToastinetWP\/<\/a>)<\/li>\n<li>CONDING4FUN toast prompt (<a href=\"https:\/\/coding4fun.codeplex.com\/wikipage?title=Toast%20Prompt&amp;referringTitle=Documentation\">https:\/\/coding4fun.codeplex.com\/wikipage?title=Toast%20Prompt&amp;referringTitle=Documentation<\/a>)<\/li>\n<\/ul>\n<p>But those solutions was only made for Windows Phone Silverlight apps and it&#8217;s not possible to add these librairies on\u00a0Windows phone 8.1 WinRT project.<\/p>\n<p>But universal applications make available a tool : ToastNotification !<\/p>\n<p>&nbsp;<\/p>\n<h3>Display local toast notifications :<\/h3>\n<p>Following the <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/windows\/apps\/xaml\/hh868254.aspx\">MSDN documentation<\/a>,\u00a0it&#8217;s possible to display\u00a0a local notification that appears when your app is running.<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\nToastTemplateType toastTemplateXml = ToastTemplateType.ToastImageAndText01;\r\nXmlDocument toastXml = ToastNotificationManager.GetTemplateContent(toastTemplateXml);\r\n<\/pre>\n<p>You&#8217;ll then need to populate the XML returned by <code><span style=\"color: #2db3e7;\">GetTemplateContent<\/span>:<\/code><\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\n&lt;toast&gt;\r\n    &lt;visual&gt;\r\n        &lt;binding template=&quot;ToastImageAndText01&quot;&gt;\r\n            &lt;image id=&quot;img&quot; src=&quot;&quot;\/&gt;\r\n            &lt;text id=&quot;txt&quot;&gt;&lt;\/text&gt;\r\n        &lt;\/binding&gt;\r\n    &lt;\/visual&gt;\r\n&lt;\/toast&gt;\r\n<\/pre>\n<p>But, how to do it ?<br \/>\nBy getting elements by tag name and supply the content of your toast in the XML DOM.<br \/>\nDon&#8217;t worry, here is an example :<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\nXmlNodeList toastImageAttributes = toastXml.GetElementsByTagName(&quot;image&quot;);\r\n((XmlElement)toastImageAttributes[0]).SetAttribute(&quot;src&quot;, &quot;ms-appx:\/\/\/Images\/myImg.png&quot;);\r\n<\/pre>\n<p>You can then create the toast notification based on the XML content you&#8217;ve specified :<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\nToastNotification toast = new ToastNotification(toastXml);\r\nToastNotificationManager.CreateToastNotifier().Show(toast);\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h3>The secret method :<\/h3>\n<p>To help you, I created a small\u00a0method to generate local notification with a text passed as parameter :<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\nprivate void ShowToastNotification(String message)\r\n{\r\n    ToastTemplateType toastTemplate = ToastTemplateType.ToastImageAndText01;\r\n    XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(toastTemplate);\r\n\r\n    \/\/ Set Text\r\n    XmlNodeList toastTextElements = toastXml.GetElementsByTagName(&quot;text&quot;);\r\n    toastTextElements[0].AppendChild(toastXml.CreateTextNode(message));\r\n\r\n    \/\/ Set image\r\n    \/\/ Images must be less than 200 KB in size and smaller than 1024 x 1024 pixels.\r\n    XmlNodeList toastImageAttributes = toastXml.GetElementsByTagName(&quot;image&quot;);\r\n    ((XmlElement)toastImageAttributes[0]).SetAttribute(&quot;src&quot;, &quot;ms-appx:\/\/\/Images\/myImg.png&quot;);\r\n    ((XmlElement)toastImageAttributes[0]).SetAttribute(&quot;alt&quot;, &quot;logo&quot;);\r\n\r\n    \/\/ toast duration\r\n    IXmlNode toastNode = toastXml.SelectSingleNode(&quot;\/toast&quot;);\r\n    ((XmlElement)toastNode).SetAttribute(&quot;duration&quot;, &quot;short&quot;);\r\n\r\n    \/\/ toast navigation\r\n    var toastNavigationUriString = &quot;#\/MainPage.xaml?param1=12345&quot;;\r\n    var toastElement = ((XmlElement)toastXml.SelectSingleNode(&quot;\/toast&quot;));\r\n    toastElement.SetAttribute(&quot;launch&quot;, toastNavigationUriString);\r\n\r\n    \/\/ Create the toast notification based on the XML content you've specified.\r\n    ToastNotification toast = new ToastNotification(toastXml);\r\n\r\n    \/\/ Send your toast notification.\r\n    ToastNotificationManager.CreateToastNotifier().Show(toast);\r\n}\r\n<\/pre>\n<p>You can change several things on this method :<\/p>\n<ul>\n<li>Default image by setting the source : <em>&#8220;ms-appx:\/\/\/Images\/myImg.png&#8221;<\/em>\n<ul>\n<li>note\u00a0: Windows Phone 8.1 does not display the image, instead replacing it with the app&#8217;s logo.<\/li>\n<\/ul>\n<\/li>\n<li>Toast duration\u00a0:\u00a0There are two values: &#8220;short&#8221; (the default) and &#8220;long&#8221;.<\/li>\n<li>Toast navigation : to define url page to open chen user click on notification<\/li>\n<\/ul>\n<p><strong>And don&#8217;t forget to edit &#8220;Package.appxmanifest&#8221; and activate notifications<\/strong>. The capability to raise toast notifications is declared in your app&#8217;s package.appxmanifest file.<br \/>\nIf you use the Microsoft Visual Studio manifest editor, simply set the Toast capable option to &#8220;Yes&#8221; in the Notification section of the Application tab.<\/p>\n<p>You can find more informations in MSDN documentation :\u00a0<a href=\"https:\/\/msdn.microsoft.com\/en-us\/library\/windows\/apps\/xaml\/hh868254.aspx\">https:\/\/msdn.microsoft.com\/en-us\/library\/windows\/apps\/xaml\/hh868254.aspx<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you\u00a0want to develop a universal app for Windows Phone 8.1 and Windows 8.1 which contains a local \u201cNotification\u201d as the picture above ? I&#8217;m going to show you how to display\u00a0all messages to the user (error, information, warnings) in a kind of toast control. Everything is done locally without going through the standard notification &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/lalloue.fr\/blog\/display-local-toast-notification-in-windows-universal-app\/\" class=\"more-link\">Continuer la lecture <span class=\"screen-reader-text\"> \u00ab\u00a0Display local toast notification in Windows Universal App\u00a0\u00bb<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[27,5,4],"tags":[30,6,7,8],"_links":{"self":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/264"}],"collection":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/comments?post=264"}],"version-history":[{"count":9,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/264\/revisions"}],"predecessor-version":[{"id":319,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/264\/revisions\/319"}],"wp:attachment":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/media?parent=264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/categories?post=264"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/tags?post=264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}