开篇之前,照例推荐王磊老师的Windows 8.1中的Popup控件用法
同时推荐老周-易之道的一篇关于自定义Popup的一篇文章
链接:新时尚Windows8开发(17):自己也来做一做弹出对话框
以上两位的博客对学习Windows 8.1和Windows Phone 8.1都有很大的帮助,推荐大家可以看看
可以先来总结下一些具有弹出效果的控件和类吧:
a.MessageDialog类,这是最简单的弹出框了应该
b.DatePicker控件和TimePicker控件
c.Flyout控件(这其中有几种表现方式),可以参考关于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通知一样从左侧滑出来,很好玩:
多写写代码,多试试效果,多尝试自己所想的效果,実に おもしろい