Windows Phone 8.1中的Popup

开篇之前，照例推荐王磊老师的Windows 8.1中的Popup控件用法

链接：Windows 8.1中Popup

同时推荐老周-易之道的一篇关于自定义Popup的一篇文章

链接：新时尚Windows8开发（17）：自己也来做一做弹出对话框

以上两位的博客对学习Windows 8.1和Windows Phone 8.1都有很大的帮助，推荐大家可以看看

可以先来总结下一些具有弹出效果的控件和类吧：

a.MessageDialog类，这是最简单的弹出框了应该

b.ContentDialog类，比a弹出框复杂一些，可以自定义，非常实用

b.DatePicker控件和TimePicker控件

c.Flyout控件(这其中有几种表现方式)，可以参考关于Flyout控件的另外一篇博客

  链接：WP8.1的Flyout控件

d.ContentDialog类

e.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通知一样从左侧滑出来，很好玩：

                        

多写写代码，多试试效果，多尝试自己所想的效果，実に　おもしろい