windows8开发-metro应用之Popup窗口

Popup窗口的实现过程较为简单。首先可以自定义一个用户控件，在该用户控件中添加Popup控件；然后便可以之间在外面的页面中调用。

一个需要注意的设计规范是，当用户点击了Popup窗口的非内容版面，即Popup以外的区域，该Popup窗口应该消失。

如果是另有用途，比如游戏的关卡弹框，用户必须有所选择才能继续时，可以强制保留该窗口。要么就用别的方式实现这种窗口。

下面一个简单的示例:

1. xaml

<UserControl
    x:Class="Controls.LoginPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Name="RootControl">

    <Grid>
        <Popup x:Name="LoginPopup" IsLightDismissEnabled="True">
            <Border Height="{Binding ElementName=RootControl, Path=Height}" Width="{Binding ElementName=RootControl, Path=Width}"
                    Tapped="OnPopupBorderTapped">
                <Border.Background>
                    <SolidColorBrush Color="Black" Opacity="0.5"/>
                </Border.Background>
                <StackPanel x:Name="PopupContainer" Orientation="Horizontal" VerticalAlignment="Center" Tapped="OnPanelTapped">
                    <StackPanel.Background>
                        <SolidColorBrush Color="Green" Opacity="0.8"/>
                    </StackPanel.Background>

                    <StackPanel Width="300" VerticalAlignment="Center">
                        <Image Source="/Assets/test.jpg" Stretch="None" HorizontalAlignment="Center"/>
                        <TextBlock Text="Winter" FontSize="36" HorizontalAlignment="Center"/>                       
                    </StackPanel>
                    
                    <Border BorderBrush="DeepPink" BorderThickness="1"/>
                    
                    <StackPanel Width="700" Orientation="Horizontal">
                        <StackPanel.Background>
                            <SolidColorBrush Color="Green" Opacity="0.8"/>
                        </StackPanel.Background>

                        <Image Source="/Assets/test2.jpg" Height="100" Stretch="Fill"  Margin="150 30 30 0" VerticalAlignment="Top"/>
                        <Grid VerticalAlignment="Center">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="70"/>
                                <RowDefinition Height="70"/>
                                <RowDefinition Height="70"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <TextBlock Text="账号:" Foreground="White" FontSize="36" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            <TextBox Grid.Column="1" Width="250" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center"/>

                            <TextBlock Grid.Row="1" Text="密码:" Foreground="White" FontSize="36"  HorizontalAlignment="Center" VerticalAlignment="Center" />
                            <TextBox Grid.Row="1" Grid.Column="1" Width="250" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        
                            <CheckBox Grid.Row="2" Grid.Column="1" Content="显示密码"/>

                            <StackPanel Grid.Row="3" Grid.Column="1"  Orientation="Horizontal">
                                <Button BorderThickness="1" Content="注册" Height="60" FontSize="36" FontWeight="Normal"/>
                                <Button BorderThickness="1" Content="登陆" Height="60" FontSize="36" FontWeight="Normal" Margin="40 0 0 0"/>
                            </StackPanel>
                        </Grid>
                    </StackPanel>
                </StackPanel>
            </Border>
        </Popup>
    </Grid>
</UserControl>

2. 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;

// “用户控件”项模板在 http://go.microsoft.com/fwlink/?LinkId=234236 上提供

namespace Controls
{
    public sealed partial class LoginPage : UserControl
    {
        #region Data Members

        // 标志点击区域是否在PopupContainer之内
        private bool m_IsPopupContainerTapped;

        #endregion

        #region Constructor

        public LoginPage()
        {
            this.InitializeComponent();
            m_IsPopupContainerTapped = false;

            Height = Window.Current.Bounds.Height;
            Width = Window.Current.Bounds.Width;

            PopupContainer.Height = Height / 3;
            PopupContainer.Width = Width;
        }

        #endregion

        #region Public Methods

        public void Show()
        {
            if (!LoginPopup.IsOpen)
            {
                LoginPopup.IsOpen = true;
            }
        }

        public void Hide()
        {
            if (LoginPopup.IsOpen)
            {
                LoginPopup.IsOpen = false;
            }
        }

        #endregion

        #region Event Handler

        private void OnPopupBorderTapped(object sender, TappedRoutedEventArgs e)
        {
            if (!m_IsPopupContainerTapped)
            {
                LoginPopup.IsOpen = false;
            }
            else
            {
                m_IsPopupContainerTapped = false;
            }
        }

        private void OnPanelTapped(object sender, TappedRoutedEventArgs e)
        {
            m_IsPopupContainerTapped = true;
        }

        #endregion
    }
}

3. 在页面中使用该popup：

            LoginPage lp = new LoginPage();
            lp.Show();

4. 演示效果：