注:本文由BeyondVincent(破船)原创首发
转载请注明出处:BeyondVincent(破船)@DevDiv.com
更多内容请查看下面的帖子
[DevDiv原创]Windows 8 开发Step by Step
小引
在上一篇文章中,我利用Popup和UserControl自定义了MessageDialog。那么这篇文章我接着自定义Popup。这次的效果是在画面内弹出一个对话框,对话框会以不同的方式弹出。当点击对话框以外的位置时,对话框会自动消失。
自定义Popup的关键技术点
利用UserControl控件,在里面添加Popup,然后对外界暴露一个是否显示对话框的接口。
准备好Popup是用到的图片资源,如下两个图:
制作步骤
1、新建空白工程,名称为BV_CustomPopup
2、在项目工程上单击右键,选择添加->新建项->选择用户控件->输入名称BV_CustomPopup.xaml,然后确定
3、在
BV_CustomPopup.xaml中输入如下内容:
<UserControl
x:Class="BV_WindowsRuntimeComponent.UI.BV_CustomPopup"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:BV_WindowsRuntimeComponent.UI"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Height="200" Width="300">
<Popup x:Name="popup" IsLightDismissEnabled="True" >
<Popup.ChildTransitions>
<TransitionCollection>
<!--<PaneThemeTransition Edge="Bottom" />-->
<!--<AddDeleteThemeTransition/>-->
<!--<ContentThemeTransition/>-->
<!--<EntranceThemeTransition/>-->
<!--<EdgeUIThemeTransition Edge="Bottom"/>-->
<PopupThemeTransition/>
<!--<ReorderThemeTransition/>-->
<!--<RepositionThemeTransition/>-->
</TransitionCollection>
</Popup.ChildTransitions>
<Grid Width="300" Height="200" >
<Grid.Background>
<ImageBrush ImageSource="../picture/PopupBackground.png"></ImageBrush>
</Grid.Background>
<Image HorizontalAlignment="Left" Height="57" Margin="220,116,0,0" VerticalAlignment="Top" Width="59" Source="ms-appx:///BV_WindowsRuntimeComponent/picture/1.jpg"/>
<TextBlock FontSize="30" HorizontalAlignment="Center" Height="47" Margin="38,64,0,0" TextWrapping="Wrap" Text="世界破船最大" VerticalAlignment="Top" Width="180"/>
</Grid>
</Popup>
</UserControl>
大家注意,上面代码中,我们可以给Popup添加如下一些动画效果:
<PaneThemeTransition Edge="Bottom" />
<AddDeleteThemeTransition/>
<ContentThemeTransition/>
<EntranceThemeTransition/>
<EdgeUIThemeTransition Edge="Bottom"/>
<PopupThemeTransition/>
<ReorderThemeTransition/>
<RepositionThemeTransition/>
4、在 BV_CustomPopup.xaml.cs文件中,添加如下代码:
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
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 http://go.microsoft.com/fwlink/?LinkId=234236
namespace BV_WindowsRuntimeComponent.UI
{
public sealed partial class BV_CustomPopup : UserControl
{
public BV_CustomPopup()
{
this.InitializeComponent();
}
public bool IsOpen
{
get { return popup.IsOpen; }
set { popup.IsOpen = value; }
}
}
}
5、在MainPage.xaml.cs文件中,添加如下代码:
private void btn1_Copy2_Click(object sender, RoutedEventArgs e)
{
BV_WindowsRuntimeComponent.UI.BV_CustomPopup popup = new BV_WindowsRuntimeComponent.UI.BV_CustomPopup();
grid.Children.Add(popup);
popup.IsOpen = true;
}
6、运行效果如下: