首页 > 代码库 > Windows Phone 8.1中的Popup
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.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