UWP Popup 彈出提示框

一：需求

做一個類似於安卓的彈出消息框，如圖。當用戶點擊下載或者選擇時，能夠從底部彈出一個提示框，用於提示用戶。

 

二：Popup 類

不需要我們自己額外去寫一個彈窗類，微軟自己有一個Popup 彈窗類。當彈窗打開時，會自動放在當前應用頁面的最頂層。

//獲取或設置要在彈出項中承載的內容。
public UIElement Child { get; set; }

Popup類里有一個Child屬性，用來存彈窗中的內容。

child的類型是UIElement。

UIElement 是具有可視外觀並可以處理基本輸入的大多數對象的基類。

因此child屬性可以存grid stackpannel 這些......

 

//獲取或設置彈出項當前是否顯示在屏幕上。
//如果當前顯示了彈出項，則為 **true**；否則為 **false**。 默認值為 **false**。
public bool IsOpen { get; set; }

Popup類還有一個IsOpen屬性，當會true的時候，彈窗是打開的。false則相反。

 

三：ps。。。

當創建一個popup的對象，並且將它的IsOpen屬性設置為true的時候，代表將會有一個彈窗 顯示在當前應用的最頂層。

像上面圖中的做法，看上去只有一小塊是彈窗，其實我的做法是，最頂層的popup的child屬性里放的是一個grid，在grid里才是我顯示出來的那一小塊提示框，因為grid如果沒有背景顏色的話，底下一層是會顯示的，所以沒有什么問題。不會因為蓋了一層grid，底下的內容會被蓋住。

 

 

四：直接上代碼

創建一個用戶控件

<UserControl
    x:Class="One.UC.PopupNotice"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:One.UC"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <UserControl.Resources>

        <Storyboard x:Name="PopupIn">
            <DoubleAnimation From="0"
                             To="1"
                             Duration="00:00:00.5"
                             Storyboard.TargetName="PopupContainer"
                             Storyboard.TargetProperty="Opacity"
                             >
                <DoubleAnimation.EasingFunction>
                    <PowerEase EasingMode="EaseOut"></PowerEase>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation From="-10"
                             To="-100"
                             Duration="00:00:00.5"
                             Storyboard.TargetName="PopupContainer"
                             Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
                             >
                <DoubleAnimation.EasingFunction>
                    <PowerEase EasingMode="EaseOut"></PowerEase>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>

        <Storyboard x:Name="PopupOut">
            <DoubleAnimation From="1"
                             To="0"
                             Duration="00:00:00.5"
                             Storyboard.TargetName="PopupContainer"
                             Storyboard.TargetProperty="Opacity"
                             >
                <DoubleAnimation.EasingFunction>
                    <PowerEase EasingMode="EaseOut"></PowerEase>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation From="-100"
                             To="-10"
                             Duration="00:00:00.5"
                             Storyboard.TargetName="PopupContainer"
                             Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
                             >
                <DoubleAnimation.EasingFunction>
                    <PowerEase EasingMode="EaseOut"></PowerEase>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>

    </UserControl.Resources>

    <Grid>
        
        <StackPanel Background="#18C3D8"
                    Padding="10"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Bottom"
                    Name="PopupContainer"
                    Opacity="0">
            
            <!--改變Y軸和透明底-->
            <StackPanel.RenderTransform>
                <TranslateTransform Y="-10"></TranslateTransform>
            </StackPanel.RenderTransform>
            
            <TextBlock Name="PopupContent"></TextBlock>
            
        </StackPanel>
        
        
    </Grid>
    
    
</UserControl>

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using System.Threading.Tasks;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The User Control item template is documented at https://go.microsoft.com/fwlink/?LinkId=234236

namespace One.UC
{
    public sealed partial class PopupNotice : UserControl
    {
        //存放彈出框中的信息
        private string _popupContent;

        //創建一個popup對象
        private Popup _popup = null;


        public PopupNotice()
        {
            this.InitializeComponent();

            //將當前的長和框 賦值給控件
            this.Width = Window.Current.Bounds.Width;
            this.Height = Window.Current.Bounds.Height;

            //將當前的控價賦值給彈窗的Child屬性  Child屬性是彈窗需要顯示的內容 當前的this是一個Grid控件。
            _popup = new Popup();
            _popup.Child = this;

            //給當前的grid添加一個loaded事件，當使用了ShowAPopup()的時候，也就是彈窗顯示了，這個彈窗的內容就是我們的grid，所以我們需要將動畫打開了。
            this.Loaded += PopupNoticeLoaded;

        }

        /// <summary>
        /// 重載
        /// </summary>
        /// <param name="popupContentString">彈出框中的內容</param>
        public PopupNotice(string popupContentString):this()
        {
            _popupContent = popupContentString;
        }

        /// <summary>
        /// 顯示一個popup彈窗 當需要顯示一個彈窗時，執行此方法
        /// </summary>
        public void ShowAPopup()
        {
            _popup.IsOpen = true;
        }


        /// <summary>
        /// 彈窗加載好了
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        public void PopupNoticeLoaded(object sender, RoutedEventArgs e)
        {
            PopupContent.Text = _popupContent;

            //打開動畫
            this.PopupIn.Begin();
            //當進入動畫執行之后，代表着彈窗已經到指定位置了，再指定位置等一秒 就可以消失回去了
            this.PopupIn.Completed += PopupInCompleted;
        }


        /// <summary>
        /// 當進入動畫完成后 到此
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        public async void PopupInCompleted(object sender, object e)
        {
            //在原地續一秒
            await Task.Delay(1000);

            //將消失動畫打開
            this.PopupOut.Begin();
            //popout 動畫完成后 觸發
            this.PopupOut.Completed += PopupOutCompleted;
        }


        //彈窗退出動畫結束 代表整個過程結束 將彈窗關閉
        public void PopupOutCompleted(object sender, object e)
        {
            _popup.IsOpen = false;
        }


       


    }
}

 

 

在要顯示一個彈窗的代碼里調用ShowAPopup()

 PopupNotice popupNotice = new PopupNotice("正在后台下載......");
 popupNotice.ShowAPopup();

 

最終效果：

 

 

 

 

--------some words----------

1.Popup  彈出

2.UIElement  ui元素

----------the   end------------