Windows Phone 8.1中的Popup

標籤：windows phone 8.1   wp中總結具有彈出效果的控制項和類   popup彈出控制項   類toast通知的自訂popup的實現   childtransition-tran   

開篇之前，照例推薦王磊老師的Windows 8.1中的Popup控制項用法

連結：Windows 8.1中Popup

同時推薦老周-易之道的一篇關於自訂Popup的一篇文章

連結：新時尚Windows8開發（17）：自己也來做一做彈出對話方塊

以上兩位的部落格對學習Windows 8.1和Windows Phone 8.1都有很大的協助，推薦大家可以看看

可以先來總結下一些具有彈出效果的控制項和類吧：

a.MessageDialog類，這是最簡單的彈出框了應該

b.DatePicker控制項和TimePicker控制項

c.Flyout控制項(這其中有幾種表現方式)，可以參考關於Flyout控制項的另外一篇部落格

  連結：WP8.1的Flyout控制項

d.Popup控制項

那麼Popup控制項在Windows Phone 8.1中是怎麼表現的呢?

首先它的重要的屬性和方法有哪些呢

a.Child屬性   -----   Popup的內容

b.HorizontalOffset屬性   -----   水平方向上的位移量

c.VerticalOffset屬性   -----   垂直方向上的位移量

d.IsLightDismissEnabled屬性   -----    點擊非Popup地區是否也可以關閉Popup,預設是false

e.ChildTransitions屬性   -----    顯示彈出框是，內容的過渡效果

  這個屬性很有用也很好玩，特別是後面做類似Toast效果的彈出框的時候很像那麼回事

f.IsOpen屬性   -----    Popup是否處於開啟狀態

g.Opened事件    -----    Popup開啟時觸發的事件

h.Closed事件     -----    Popup關閉時觸發的事件

在貼代碼之前，列舉一下我的認識和收穫：

a.在.cs中設定前台標籤的背景或者其他涉及到顏色的屬性的時候，純色的話必須要用到SolidColorBrush畫刷類

  例如：Border border = new Border();   border.Background = new SolidColorBrush(Colors.Green)

b.在一個容器控制項中新增內容Child，可以有兩種方法(這邊Border是父容器，TextBlock是內容)

  其一先是執行個體內容對象，然後對這個對象添加各種各樣的屬性和方法，最後再添加到父類容器控制項中

  其二是直接添加到父類容器控制項中，在添加的同時進行內容對象的建構函式的執行個體化

  例如：

  其一：Border border = new Border();

        TextBlock textBlock = new TextBlock();

        textBlock.Text = "Border裡的內容";

        border.Child = textBlock;

  其二：Border border = new Border();

        border.Child = new TextBlock(){Text="Border裡的內容"};

  以上兩種實際上是一樣的，但是很顯然第二種更加省事。

c.如果不將Popup添加到某個容器內，則Popup的預設顯示位置在螢幕的左上方

d.類似Toast通知的彈出Popup效果，主要用到了ChildTransition屬性，具體如下：

  ChildTransition->TransitionCollection->PaneThemeTransition的屬性Edge

  (Edge = EdgeTransitionLocation.Left)

下面貼代碼，其實代碼和王磊老師的Windows 8.1中的代碼差不多，我只不過移植到WP8.1中看是否依舊適用而已

前台XAML:

<Page    x:Class="TestUnion.PopupDemo"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:TestUnion"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d"    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">    <Grid>        <StackPanel>            <StackPanel>                <Button x:Name="btnOpen" Content="彈出" Click="btnOpen_Click" />                <CheckBox x:Name="checkBox" IsChecked="True" Content="IsLightDismissEnabled" />            </StackPanel>            <Popup x:Name="popup" IsLightDismissEnabled="{Binding Path=IsChecked,ElementName=checkBox,Mode=OneWay}">                <Popup.Child>                    <Border BorderBrush="Red" BorderThickness="1" Background="Blue" Width="200" Height="200">                        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">                            <TextBlock Text="我是Popup" FontSize="25" HorizontalAlignment="Center"/>                            <Button x:Name="btnClose" Content="關閉" Click="btnClose_Click" HorizontalAlignment="Center"/>                        </StackPanel>                    </Border>                </Popup.Child>                <Popup.ChildTransitions>                    <TransitionCollection>                        <PopupThemeTransition />                    </TransitionCollection>                </Popup.ChildTransitions>            </Popup>            <Button x:Name="openLikePopup" Content="彈出仿製Popup" Click="openLikePopup_Click" />            <Button x:Name="closeLikePopup" Content="關閉仿製Popup" Click="closeLikePopup_Click"/>        </StackPanel>    </Grid></Page>

後台.cs：

using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Runtime.InteropServices.WindowsRuntime;using Windows.Foundation;using Windows.Foundation.Collections;using Windows.UI;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.Media.Animation;using Windows.UI.Xaml.Navigation;// “空白頁”項目範本在 http://go.microsoft.com/fwlink/?LinkID=390556 上有介紹namespace TestUnion{    /// <summary>    /// 可用於自身或導航至 Frame 內部的空白頁。    /// </summary>    public sealed partial class PopupDemo : Page    {        //仿製toast的Popup        private Popup _popupToast = new Popup();         public PopupDemo()        {            this.InitializeComponent();        }        /// <summary>        /// 在此頁將要在 Frame 中顯示時進行調用。        /// </summary>        /// <param name="e">描述如何訪問此頁的事件數目據。        /// 此參數通常用於配置頁。</param>        protected override void OnNavigatedTo(NavigationEventArgs e)        {        }        private void btnOpen_Click(object sender, RoutedEventArgs e)        {            if(!popup.IsOpen)            {                popup.IsOpen = true;            }        }        private void btnClose_Click(object sender, RoutedEventArgs e)        {            if(popup.IsOpen)            {                popup.IsOpen = false;            }        }        private void openLikePopup_Click(object sender, RoutedEventArgs e)        {            //設定Popup中的內容            Border border = new Border();            border.BorderBrush = new SolidColorBrush(Colors.Green);            border.BorderThickness = new Thickness(1);            border.Background = new SolidColorBrush(Colors.Coral);            border.Width = 300;            border.Height = 100;            border.Child = new TextBlock() { Text="我是Popup",FontSize=25,HorizontalAlignment=HorizontalAlignment.Center,VerticalAlignment=VerticalAlignment.Center};            //設定Popup的相關屬性            _popupToast.IsLightDismissEnabled = true;            _popupToast.Child = border;            //通過HorizontalOffset和VerticalOffset指定Popup的顯示位置            //如果不將Popup添加到某個容器內，則Popup的預設顯示位置在螢幕左上方            _popupToast.VerticalOffset = 100d;            _popupToast.ChildTransitions = new TransitionCollection            {                new PaneThemeTransition(){Edge = EdgeTransitionLocation.Left}            };            _popupToast.IsOpen = true;        }        private void closeLikePopup_Click(object sender, RoutedEventArgs e)        {            if(_popupToast.IsOpen)            {                _popupToast.IsOpen = false;            }        }    }}

運行：

初始介面：

點擊退出鍵：

(Popup就會彈出來，然後不管點擊關閉按鈕或是在非Popup控制項地區，Popup就會關閉)

(如果把CheckBox鉤取消，那麼點擊非Popup地區，Popup不會關閉)

點擊彈出仿製Popup按鈕會發現Popup回想Toast通知一樣從左側滑出來，很好玩：

                        

多寫寫代碼，多試試效果，多嘗試自己所想的效果，実に　おもしろい

Windows Phone 8.1中的Popup