UWP-訊息提示（仿Android）

標籤：內容   string   move   margin   增加   sealed   int   animation   事件   

原文:UWP-訊息提示（仿Android）

 在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和一些實體導覽列的手機還算正常，但是在虛擬導覽列的手機且虛擬導覽列在現即時的情況這樣彈窗就不正常了（這裡的例子就只顯示了一根線

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

抄自：http://www.cnblogs.com/helloblog/p/5225306.html

UWP-訊息提示（仿Android）