UWP中的消息提示框(二)

  在UWP中的消息提示框(一)中介紹了一些常見的需要用戶主動去干涉的一些消息提示框，接下來打算聊聊不需要用戶主動去干涉的一些消息提示框。效果就是像雙擊退出的那種提示框。

  先說說比較簡單的吧，通過系統Toast通知方式（和Android的Toast是有區別的額，更像Android里的Notification），關於這種方式，在這里就不貼代碼了，MSDN上講的很清楚(快速入門：發送 Toast 通知)，需要注意的事作為應用內消息提示彈出框，應該不要帶音效（有特殊需求貌似也行），但是，Toast通知會在系統通知中心留下通知內容，需要監聽ToastNotification實例的Dismissed事件並通過ToastNotificationManager.History.Remove(toastTag)實現在Toast通知消失后不在系統通知中心留下痕跡。還有個問題就是這種方式在PC上如果APP並不是全屏情況運行，在右下角彈出提示個人覺得有些不太友好，或者是平板上（且是平板模式）分屏運行（且當前APP在左邊一塊）從右下角彈出個提示用戶會懵逼的。

  再來說說自定義的，既然說到Android的Toast，那就不妨再UWP里來實現類似Android Toast的消息提示框。和上篇一樣，我還是通過Popup+UserControl的方式來實現，當然 實現方式也是比較多的，比如阿迪王的博客：模態框進度指示器的實現 

  Adnroid里大多手機都是在屏幕靠下位置一塊帶點透明度的黑色區域顯示提示內容，通常為2S左右淡出消失，一般情況下這就是Adnroid里的Toast通知，描述的不大清楚，看圖吧。

 

  在UWP里實現的話，就是在UserControl里寫好布局，然后再寫一個延遲2s執行的淡出動畫。代碼大致為：

NotifyPopup.xaml:

<UserControl.Resources>
        <Storyboard x:Name="sbOut" >
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="mainGrid"
                                Storyboard.TargetProperty="Opacity"
                                BeginTime="0:0:0">
                <SplineDoubleKeyFrame  KeyTime="00:00:00.00" Value="1"/>
                <SplineDoubleKeyFrame  KeyTime="00:00:00.400" Value="0.0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="mainGrid" >
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Border Grid.Row="1" Background="#aa000000" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,50" Padding="20,15">
            <TextBlock x:Name="tbNotify" TextWrapping="Wrap" Foreground="#daffffff"/>
        </Border>
    </Grid>

NotifyPopup.xaml.cs:

 public sealed partial class NotifyPopup : UserControl
    {
        private Popup m_Popup;

        private string m_TextBlockContent;
        private TimeSpan m_ShowTime;

        private NotifyPopup()
        {
            this.InitializeComponent();
            m_Popup = new Popup();
            this.Width = Window.Current.Bounds.Width;
            this.Height = Window.Current.Bounds.Height;
            m_Popup.Child = this;
            this.Loaded += NotifyPopup_Loaded; ;
            this.Unloaded += NotifyPopup_Unloaded; ;
        }

        public NotifyPopup(string content, TimeSpan showTime) : this()
        {
            this.m_TextBlockContent = content;
            this.m_ShowTime = showTime;
        }

        public NotifyPopup(string content) : this(content, TimeSpan.FromSeconds(2))
        {
        }

        public void Show()
        {
            this.m_Popup.IsOpen = true;
        }

        private void NotifyPopup_Loaded(object sender, RoutedEventArgs e)
        {
            this.tbNotify.Text = m_TextBlockContent;
            this.sbOut.BeginTime = this.m_ShowTime;
            this.sbOut.Begin();
            this.sbOut.Completed += SbOut_Completed;
            Window.Current.SizeChanged += Current_SizeChanged; ;
        }

        private void SbOut_Completed(object sender, object e)
        {
            this.m_Popup.IsOpen = false;
        }

        private void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
        {
            this.Width = e.Size.Width;
            this.Height = e.Size.Height;
        }

        private void NotifyPopup_Unloaded(object sender, RoutedEventArgs e)
        {
            Window.Current.SizeChanged -= Current_SizeChanged;
        }
    }

然后在Page里放個按鈕，點擊來觸發彈出該提示框：

NotifyPopup notifyPopup = new NotifyPopup("提示點東西吧!");
            notifyPopup.Show();

最終效果如圖：

  當然還可以在UserControl里增加些控件，配合寫動畫弄出格式各樣的提示框。

 

   UWP中的常見消息提示框差不多介紹完，最后來個問題，細心的小伙伴會發現，我這邊給UserControl指定的寬高是Window.Current.Bounds.Width和Window.Current.Bounds.Height，這樣看似沒什么問題，但需要注意的是如果提示框里內容偏下，就修改下上面的代碼，讓其在APP最下方彈出，NotifyPopup.xaml做如下改動：

 PC和一些實體導航欄的手機還算正常，但是在虛擬導航欄的手機且虛擬導航欄在現實時的情況這樣彈窗就不正常了（這里的例子就只顯示了一根線

關於這種屏幕的適配，下次再聊。。。滾去搬磚咯

哦，感興趣的可以這邊下載該Demo: https://github.com/kkkeyboy/UWPPopup