Windows Store apps开发[50]自定义Popup

注：本文由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、运行效果如下：