背水一戰 Windows 10 (104) - 通知（Toast）: 純文本 toast, 短時 toast, 長時 toast, 圖文 toast

時間 2019-11-05

標籤背水一戰 windows 通知 toast 文本長時圖文欄目 Windows 简体版

原文原文鏈接

做者：webabcd

介紹
背水一戰 Windows 10 之通知（Toast）html5

純文本 toast
短時 toast
長時 toast
圖文 toast

示例
一、本例用於演示如何彈出純文本 toast，以及如何控制 toast 的顯示時長（短時和長時兩種）
Notification/Toast/Text.xamlc++

<Page
    x:Class="Windows10.Notification.Toast.Text"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Notification.Toast"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <Button Name="buttonShowToast1" Content="顯示 toast（短時通知）" Click="buttonShowToast1_Click" Margin="5" />

            <Button Name="buttonShowToast2" Content="顯示 toast（長時通知）" Click="buttonShowToast2_Click" Margin="5" />

        </StackPanel>
    </Grid>
</Page>

Notification/Toast/Text.xaml.csweb

/*
 * 本例用於演示如何彈出純文本 toast，以及如何控制 toast 的顯示時長（短時和長時兩種）
 * 單擊 toast 激活 app 後（前臺方式激活），如何獲取相關信息請參見 Demo.xaml.cs 中的代碼
 * 
 * 
 * 本例 xml 說明：
 * activationType - 經過點擊 toast 激活 app 時的激活方式，foreground 表明前臺方式激活
 * launch - 經過點擊 toast 激活 app 時，傳遞給 app 的參數（經過按鈕激活時，此參數無效）
 * duration - short 短時通知（默認值）；long 長時通知
 * template - 在 uwp 中就 ToastGeneric 一種模板
 * text - 每個新的 text 會另起一行，一行顯示不下會自動換行，第一個 text 會高亮顯示，最多顯示 5 行文本
 */

using Windows.Data.Xml.Dom;
using Windows.UI.Notifications;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows10.Notification.Toast
{
    public sealed partial class Text : Page
    {
        public Text()
        {
            this.InitializeComponent();
        }

        // 彈出 toast 通知（短時通知）
        private void buttonShowToast1_Click(object sender, RoutedEventArgs e)
        {
            // 清除本 app 的以前的所有 toast 通知
            // ToastNotificationManager.History.Clear();

            string toastXml = @"
                <toast activationType='foreground' launch='Notification-Toast-Text-Arguments 1'>
                    <visual>
                        <binding template='ToastGeneric'>
                            <text>toast - title</text>
                            <text>toast - content</text>
                            <text>""Hololens""引領技術革命浪潮傳統的人機交互，主要是經過鍵盤和觸摸，包括並不能被精確識別的語音等。""Hololens""的出現，則給新一代體驗更好的人機交互指明道路，並現實了設備的小型化和便攜化。</text>
                        </binding>
                    </visual>
                </toast>";

            XmlDocument toastDoc = new XmlDocument();
            toastDoc.LoadXml(toastXml);

            ToastNotification toast = new ToastNotification(toastDoc);
            ToastNotificationManager.CreateToastNotifier().Show(toast);
        }

        // 彈出 toast 通知（長時通知）
        private void buttonShowToast2_Click(object sender, RoutedEventArgs e)
        {
            // 清除本 app 的以前的所有 toast 通知
            // ToastNotificationManager.History.Clear();

            string toastXml = @"
                <toast activationType='foreground' duration='long' launch='Notification-Toast-Text-Arguments 2'>
                    <visual>
                        <binding template='ToastGeneric'>
                            <text>toast - title</text>
                            <text>""Hololens""引領技術革命浪潮傳統的人機交互，主要是經過鍵盤和觸摸，包括並不能被精確識別的語音等。""Hololens""的出現，則給新一代體驗更好的人機交互指明道路，並現實了設備的小型化和便攜化。</text>
                        </binding>
                    </visual>
                </toast>";

            XmlDocument toastDoc = new XmlDocument();
            toastDoc.LoadXml(toastXml);

            ToastNotification toast = new ToastNotification(toastDoc);
            ToastNotificationManager.CreateToastNotifier().Show(toast);
        }
    }
}

二、本例用於演示如何彈出圖文 toast
Notification/Toast/TextAndImage.xamlexpress

<Page
    x:Class="Windows10.Notification.Toast.TextAndImage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Notification.Toast"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <Button Name="buttonShowToastImageFromAppPackage" Content="顯示 toast（圖片來自 AppPackage）" Click="buttonShowToastImageFromAppPackage_Click" Margin="5" />

            <Button Name="buttonShowToastImageFromAppData" Content="彈出 toast 通知（圖片來自 AppData，image 的 hint-crop 爲 circle）" Click="buttonShowToastImageFromAppData_Click" Margin="5" />

            <Button Name="buttonShowToastImageFromHttp" Content="彈出 toast 通知（圖片來自 http，image 的 placement 爲 appLogoOverride，image 的 addImageQuery 爲 true）" Click="buttonShowToastImageFromHttp_Click" Margin="5" />

        </StackPanel>
    </Grid>
</Page>

Notification/Toast/TextAndImage.xaml.cswindows

/*
 * 本例用於演示如何彈出圖文 toast
 * 單擊 toast 激活 app 後（前臺方式激活），如何獲取相關信息請參見 Demo.xaml.cs 中的代碼
 * 
 * 
 * 本例 xml 說明：
 * activationType - 經過點擊 toast 激活 app 時的激活方式，foreground 表明前臺方式激活
 * launch - 經過點擊 toast 激活 app 時，傳遞給 app 的參數（經過按鈕激活時，此參數無效）
 * template - 在 uwp 中就 ToastGeneric 一種模板
 * text - 每個新的 text 會另起一行，一行顯示不下會自動換行，第一個 text 會高亮顯示，最多顯示 5 行文本
 * image - 圖片，最多顯示一張圖片
 *     hint-crop
 *         none - 圖片不剪裁（默認值）
 *         circle - 圖片剪裁成圓形
 *     placement
 *         inline - 圖片顯示在 toast 的文本的下面（默認值）
 *         appLogoOverride - 圖片顯示在 toast 的左上角
 *     addImageQuery
 *         是否將當前的部分環境信息以 url 參數的方式附加到圖片地址中（一個 bool 值，默認值爲 false）
 *         除了在 image 節點設置外，也能夠在 visual 節點或 binding 節點設置
 *         
 *         
 * 注：圖片不能大於 1024x1024 像素，不能大於 200 KB，類型必須爲 .png .jpg .jpeg .gif
 */

using System;
using Windows.Data.Xml.Dom;
using Windows.Storage;
using Windows.UI.Notifications;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows10.Notification.Toast
{
    public sealed partial class TextAndImage : Page
    {
        public TextAndImage()
        {
            this.InitializeComponent();
        }

        // 彈出 toast 通知（圖片來自 AppPackage）
        private void buttonShowToastImageFromAppPackage_Click(object sender, RoutedEventArgs e)
        {
            // 清除本 app 的以前的所有 toast 通知
            // ToastNotificationManager.History.Clear();

            string toastXml = @"
                <toast activationType='foreground' launch='Notification-Toast-TextAndImage-Arguments 1'>
                    <visual>
                        <binding template='ToastGeneric'>
                            <text>toast - title</text>
                            <text>""Hololens""引領技術革命浪潮傳統的人機交互，主要是經過鍵盤和觸摸，包括並不能被精確識別的語音等。""Hololens""的出現，則給新一代體驗更好的人機交互指明道路，並現實了設備的小型化和便攜化。</text>
                            <image src='ms-appx:///Assets/hololens.jpg' />
                        </binding>
                    </visual>
                </toast>";

            XmlDocument toastDoc = new XmlDocument();
            toastDoc.LoadXml(toastXml);

            ToastNotification toast = new ToastNotification(toastDoc);
            ToastNotificationManager.CreateToastNotifier().Show(toast);
        }

        // 彈出 toast 通知（圖片來自 AppData，image 的 hint-crop 爲 circle）
        private async void buttonShowToastImageFromAppData_Click(object sender, RoutedEventArgs e)
        {
            // 清除本 app 的以前的所有 toast 通知
            // ToastNotificationManager.History.Clear();

            StorageFolder localFolder = await ApplicationData.Current.LocalFolder.CreateFolderAsync("webabcdTest", CreationCollisionOption.OpenIfExists);
            StorageFile packageFile = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/hololens.jpg"));
            await packageFile.CopyAsync(localFolder, "hololens.jpg", NameCollisionOption.ReplaceExisting);

            string toastXml = @"
                <toast activationType='foreground' launch='Notification-Toast-TextAndImage-Arguments 2'>
                    <visual>
                        <binding template='ToastGeneric'>
                            <text>toast - title</text>
                            <text>""Hololens""引領技術革命浪潮傳統的人機交互，主要是經過鍵盤和觸摸，包括並不能被精確識別的語音等。""Hololens""的出現，則給新一代體驗更好的人機交互指明道路，並現實了設備的小型化和便攜化。</text>
                            <image src='ms-appdata:///local/webabcdTest/hololens.jpg' hint-crop='circle' />
                        </binding>
                    </visual>
                </toast>";

            XmlDocument toastDoc = new XmlDocument();
            toastDoc.LoadXml(toastXml);

            ToastNotification toast = new ToastNotification(toastDoc);
            ToastNotificationManager.CreateToastNotifier().Show(toast);
        }

        // 彈出 toast 通知（圖片來自 http，image 的 placement 爲 appLogoOverride，image 的 addImageQuery 爲 true）
        private void buttonShowToastImageFromHttp_Click(object sender, RoutedEventArgs e)
        {
            // 清除本 app 的以前的所有 toast 通知
            // ToastNotificationManager.History.Clear();

            /*
             * 本例中的 addImageQuery 被指定爲 true
             * 因此以本例來講圖片的實際請求地址爲 http://images.cnblogs.com/mvpteam.gif?ms-scale=100&ms-contrast=standard 
             * 若是不指定 addImageQuery 或者將其設置爲 false 則本例的圖片的實際請求地址與 src 設置的一致，就是 http://images.cnblogs.com/mvpteam.gif
             */

            string toastXml = @"
                <toast activationType='foreground' launch='Notification-Toast-TextAndImage-Arguments 3'>
                    <visual addImageQuery='true'>
                        <binding template='ToastGeneric'>
                            <text>toast - title</text>
                            <text>""Hololens""引領技術革命浪潮傳統的人機交互，主要是經過鍵盤和觸摸，包括並不能被精確識別的語音等。""Hololens""的出現，則給新一代體驗更好的人機交互指明道路，並現實了設備的小型化和便攜化。</text>
                            <image src='http://images.cnblogs.com/mvpteam.gif3' placement='appLogoOverride' />
                        </binding>
                    </visual>
                </toast>";

            XmlDocument toastDoc = new XmlDocument();
            toastDoc.LoadXml(toastXml);

            ToastNotification toast = new ToastNotification(toastDoc);
            ToastNotificationManager.CreateToastNotifier().Show(toast);
        }
    }
}

OK
[源碼下載]app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。