Message prompt box in UWP (2) and uwp message prompt box

Message prompt box in UWP (2) and uwp message prompt box

In UWP message prompt box (1), we introduced some common message prompt boxes that require user intervention. Next we will talk about some message prompt boxes that do not require user intervention. The result is a prompt box like double-click to exit.

Let's talk about this method in a simple way. It uses the system Toast Notification method (which is different from the Android Toast method, more like the Notification method in Android, no code is posted here, and it is very clear on MSDN (Quick Start: Send Toast notifications). What you need to pay attention to is used as a pop-up box for In-app message prompts, do not include sound effects (it may seem to work well if you have special requirements). However, the Toast notification will leave the notification content in the system notification center. You need to listen to the Dismissed event of the ToastNotification instance and use toasticationicationmanager. history. remove (toastTag) does not leave any trace in the system notification center after the Toast notification disappears. Another problem is that if the APP does not run in full screen mode on the PC, a prompt is displayed in the lower right corner, indicating that the APP is unfriendly or flat (and flat) run the split screen (and the current APP is on the left). A prompt is displayed in the lower right corner, prompting you to force the operation.

Speaking of Android Toast, you may wish to implement a message prompt box similar to Android Toast in UWP. Like in the previous article, I still implemented it through the Popup + UserControl method. Of course, there are also many implementation methods. For example, Wang's blog: Implementation of the Progress indicator of the modal frame

In Adnroid, most mobile phones display the prompt content in a black area with a dot transparency at the bottom of the screen, which is usually about 2 seconds of fading out. In general, this is the Toast notification in Adnroid, the description is not clear. See the figure.

 

In UWP, the layout is written in UserControl, and then a fade-out animation with a latency of 2 seconds is written. The code is roughly:

Yypopup. 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>

Yypopup. 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;        }    }

Then, place a button in the Page and click it to trigger the prompt box:

Yypopup policypopup = new NotifyPopup ("something prompted! "); Yypopup. Show ();

Final Effect

Of course, you can also add some controls in UserControl to work with the animation to get a variety of prompt boxes.

 

The common message prompt box in UWP is about to be described. Finally, let's take a look at the problem. Our careful friend will find that the width and height I have specified for UserControl is Window. current. bounds. width and Window. current. bounds. height, it seems that there is no problem, but it should be noted that if the content in the prompt box is partial, modify the above Code, let it pop up at the bottom of the APP, NotifyPopup. make the following changes to xaml:

PC and some mobile phones in the physical navigation bar are still normal, however, when the mobile phone is in the virtual Navigation Bar and the virtual navigation bar is in reality, the pop-up window is not normal (the example here only shows one line

For the adaptation of this screen, I will talk about it again next time... Move bricks

Oh, interested can download this Demo: https://github.com/kkkeyboy/UWPPopup