使用 Toast 通知示例

使用 Toast 通知示例

前面我們使用了 MessageDialog 來作為彈窗，這里來介紹一個更加高大上的 Toast 通知。

Toast 通知本質(zhì)上動力是由XML來提供的，一開始我還不相信不知道XML原來有這么大的威力?，F(xiàn)在就來看看和 Toast 相關(guān)的知識。

1）實例化 ToastNotification 類。

ToastNotification toast1 = new ToastNotification(xdoc);            

2）使用 ToastNotificationManager 來管理 Toast 通知，包括添加、展示、移除、獲取通知等等。

ToastNotificationManager.CreateToastNotifier().Show(toast1);

3）在第一步中的 xdoc 就是一段 XML 數(shù)據(jù)，它從何而來呢？

XmlDocument xdoc = new XmlDocument();

4）上一步代碼實例化了一個 XML，但是它沒有數(shù)據(jù)呀，數(shù)據(jù)從哪來呢？

xdoc.LoadXml(txtXML.Text);

5）這段代碼就將一段 Text 導入了 XML 中。而 Text 數(shù)據(jù)有很多種獲取方式。在下文中自然會提到。

Toast 的 XML 模板有許多，我們可以直接來獲取它們。用枚舉和強大的 var 即可。

var items = Enum.GetNames(typeof(ToastTemplateType));

那么就正式開工了，因為重復的屬性太多了我就大概設(shè)置了 2 個 Style 資源。

    <Page.Resources>
        <Style TargetType="TextBlock" x:Key="StyleHeaderTextBlock">
            <Setter Property="FontSize" Value="40"/>
            <Setter Property="FontFamily"  Value="華文琥珀"/>
            <Setter Property="Foreground" Value="HotPink"/>
            <Setter Property="Margin" Value="12"/>
        </Style>       
        <Style TargetType="Button" x:Key="StyleToastButton">
            <Setter Property="Width" Value="180"/>
            <Setter Property="Height" Value="50"/>
            <Setter Property="Background" Value="Aqua"/>
            <Setter Property="FontSize" Value="21"/>
            <Setter Property="Margin" Value="12"/>
            <Setter Property="Content" Value="顯示Toast通知" />
        </Style>
    </Page.Resources>

下面是第一部分用于生成 Toast 通知。

<StackPanel Orientation="Vertical" Grid.Column="0" Margin="12">
<TextBlock Text="生成Toast通知" Style="{StaticResource StyleHeaderTextBlock}"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<TextBlock FontSize="24" Foreground="Wheat" Text="請選擇一個模板：" VerticalAlignment="Center"/>
<ComboBox Name="comboBoxToast" Foreground="Green"  Width="275" 
  SelectionChanged="comboBoxToast_SelectionChanged"/>
</StackPanel>
<TextBox Foreground="Green" x:Name="txtXML" HorizontalAlignment="Left" Width="500"  
Height="400" Header="模板XML：" TextWrapping="Wrap" FontSize="24"/>
<Button Name="btnShowToast1" Click="btnShowToast1_Click"  Style="{StaticResource StyleToastButton}"/>
</StackPanel>

后臺代碼也蠻容易的，利用上面講的就好了。

public MainPage()
  {
    this.InitializeComponent();   
    var items = Enum.GetNames(typeof(ToastTemplateType));
    this.comboBoxToast.ItemsSource = items;
  }
private void comboBoxToast_SelectionChanged(object sender, SelectionChangedEventArgs e)
  {
    string tempt = ((ComboBox)sender).SelectedItem as string;
    if (!string.IsNullOrEmpty(tempt))
      {   
        ToastTemplateType template = (ToastTemplateType)Enum.Parse(typeof(ToastTemplateType), tempt);
        XmlDocument xdoc = ToastNotificationManager.GetTemplateContent(template);
        txtXML.Text = xdoc.GetXml();
       }
  }
private void btnShowToast1_Click(object sender, RoutedEventArgs e)
  {
    if (txtXML.Text == "")   
    return;  
    XmlDocument xdoc = new XmlDocument();
    xdoc.LoadXml(txtXML.Text);  
    ToastNotification toast1 = new ToastNotification(xdoc);
    ToastNotificationManager.CreateToastNotifier().Show(toast1); 
  }

模板是這樣用的……

在 src 中填入圖片的路徑也可以在 Toast 中顯示圖像哦，趕緊試試吧……

接下來是第二段啦，和前面的很是類似……

    <StackPanel Orientation="Vertical" Grid.Column="1">
            <TextBlock Text="更改Toast通知的提示音" Style="{StaticResource StyleHeaderTextBlock}"/>
            <TextBlock Margin="12" Text="請輸入Toast消息內(nèi)容：" FontSize="24"/>
            <TextBox Margin="12" Height="50" x:Name="txtMesaage"/>
            <TextBlock  Margin="12" FontSize="24" Text="請選擇一種提示聲音："/>
            <ComboBox Margin="12" Height="50" x:Name="comboBoxAudio" Width="400" HorizontalAlignment="Left">
                <ComboBoxItem IsSelected="True">ms-winsoundevent:Notification.Default</ComboBoxItem>
                <ComboBoxItem>ms-winsoundevent:Notification.IM</ComboBoxItem>
                <ComboBoxItem>ms-winsoundevent:Notification.Mail</ComboBoxItem>
                <ComboBoxItem>ms-winsoundevent:Notification.Reminder</ComboBoxItem>
                <ComboBoxItem>ms-winsoundevent:Notification.Looping.Alarm</ComboBoxItem>
                <ComboBoxItem>ms-winsoundevent:Notification.Looping.Call</ComboBoxItem>
            </ComboBox>
            <StackPanel Orientation="Horizontal">
                <CheckBox x:Name="checkBoxLoop" Margin="12" Content="循環(huán)播放"/>
                <CheckBox x:Name="checkBoxSilent" Margin="12" Content="靜音"/>
            </StackPanel>           
            <Button Name="btnShowToast2" Click="btnShowToast2_Click"  Style="{StaticResource StyleToastButton}"/>
        </StackPanel>

上面代碼中的“ms-winsoundevent:Notification.Default”都是填到 src 中的用于設(shè)置聲音，還可以在 loop、silent 中設(shè)置是否循環(huán)以及是否靜音，那到底該怎么用呢？應(yīng)該將這些屬性全部都填入到 XML 中。

xmlContent = string.Format(
     "<toast duration='{0}'>" +
           "<visual>" +
                "<binding template='ToastText01'>" +
                      "<text id='1'>{1}</text>" +
                "</binding>" +
           "</visual>" +
           "<audio src='{2}' loop='{3}' silent='{4}'/>" +
     "</toast>",
     toastDuration, msg, audioSrc, isLoop, isSilent    
);             

上面用的 xmlContent 也要先定義出來，一開始設(shè)置為 Empty 就好。

string xmlContent = string.Empty;  

isLoop 和 isSilent 屬性都可以借助于三目運算符在 CheckBox 中獲取來。

string isLoop = checkBoxLoop.IsChecked == true ? "true" : "false";                                
string audioSrc = (comboBoxAudio.SelectedItem as ComboBoxItem).Content.ToString();          
string toastDuration = checkBoxLoop.IsChecked == true ? "long" : "short";            
string isSilent = checkBoxSilent.IsChecked == true ? "true" : "false";        

當然，考慮得更加周到些，用戶可以在還沒有輸入通知內(nèi)容就點了顯示 Toast 通知按鈕，對此用三目運算符也是極好的選擇。

string msg = txtMesaage.Text == "" ? "你還沒有輸入Toast通知的內(nèi)容呢……" : txtMesaage.Text;   

這些準備工作都寫好了以后呢就該設(shè)置 Toast 通知了，和上面的 Toast1 類似哦，大家試試。

可是這些通知都沒有時間性可言，因為有時候我們需要定在一個時間來執(zhí)行 Toast 通知。這自然也是可以實現(xiàn)的。

先作如下界面設(shè)計。

      <StackPanel Orientation="Vertical" Grid.Column="2">
            <TextBlock Text="計劃時間顯示Toast通知" Style="{StaticResource StyleHeaderTextBlock}"/>  
            <StackPanel Orientation="Horizontal" Height="60">
                <TextBlock FontSize="28" Text="計劃在"  VerticalAlignment="Center"/>
                <TextBox Name="tBoxTime" FontSize="28" Width="60" Height="45" VerticalAlignment="Center"/>
                <TextBlock FontSize="28" Text="秒后顯示Toast通知" VerticalAlignment="Center"/>
            </StackPanel>                
            <Button Name="btnShowToast3" Click="btnShowToast3_Click"  Style="{StaticResource StyleToastButton}"/>
        </StackPanel>

后臺代碼如下。

        private async void btnShowToast3_Click(object sender, RoutedEventArgs e)
        {
            int toastTime;
            try
            {                      
                toastTime = int.Parse(tBoxTime.Text.ToString());
                XmlDocument xdoc = ToastNotificationManager.GetTemplateContent(ToastTemplateType.ToastText01);                
                var txtnodes = xdoc.GetElementsByTagName("text");                
                txtnodes[0].InnerText = "你好，這是一條定時為"+toastTime.ToString()+ "秒的Toast消息。";              
                ScheduledToastNotification toast3 = new ScheduledToastNotification(xdoc,  
                DateTimeOffset.Now.AddSeconds(toastTime));  
                ToastNotificationManager.CreateToastNotifier().AddToSchedule(toast3);  
            }
            catch (Exception ex)
            {                  
                Windows.UI.Popups.MessageDialog messageDialog =    
                    new Windows.UI.Popups.MessageDialog(ex.Message);
                await messageDialog.ShowAsync();
            }             
        }   

在這個小程序中因為側(cè)重于講解定時而非 Toast 的通知樣式，因此就選用了比較簡單的 ToastText01 模板。而后找出 Text 節(jié)點，并向該節(jié)點寫入內(nèi)容。最后就是創(chuàng)建 Toast 通知了。

ScheduledToastNotification toast3 = new ScheduledToastNotification  
(xdoc,DateTimeOffset.Now.AddSeconds(toastTime));

同樣為了防止用戶沒有在 TextBox 中輸入時間或輸入了錯誤格式的時間比如“5 秒”而做了 try、catch 異常檢測。當然了，在實際產(chǎn)品中，這里可就要做得更加完美了，時間用 TextBox 來輸入并不是一件好事，而應(yīng)用我們前面介紹的 TimePicker。

給這 3 段程序來張全家福吧~