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. 示範效果：