1. 程式人生 > >UWP-消息提示(仿Android)

UWP-消息提示(仿Android)

pad src gif tar margin ren ring href move

原文: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)