Metro中两种自定义样式的弹出对话框(两种覆盖方式)

Windows Store应用程序有点像Web页面，一般而言，我们只有一个窗口，不会像传统的桌面应用程序那样，使用多个子窗体。因此我们使用Popup(位于Windows.UI.Xaml.Controls.Primitives下)控件，它可以把我们想要显示的内容，显示出来。

对于每个弹出层，无论其内容是什么，都有以下共同特点：

　　1）、有一个半透明的层覆盖在现有UI上，这里我介绍两种覆盖方式，一种是完全覆盖，以阻止用户操作弹出对话框下的UI元素；另一种是部分覆盖，当用户点击其他UI控件时，弹出层就隐藏了。

　　2）、除了内容不同，弹出层的大小位置以及背景都是一个样的。

　　这样的话，我们不妨自己来写一个控件，这个控件具有内容模型，这样，在弹出框中需要什么内容，我们只需设置其Content就行了。

　　1.首先我来介绍部分覆盖，就是根据用户点击的控件的位置，而在此位置的上方显示一个弹出框，当用户点击UI上其他的控件时，弹出层会自动隐藏。

　　1）先写一个类，该类主要是确定弹出层显示在UI层的具体位置，代码如下：

        /// <summary>
        /// 确定Popup控件在UI层显示的位置
        /// </summary>
        /// <param name="popup">Popup控件</param>
        /// <param name="page">UI层Page</param>
        /// <param name="appbar">UI层BottomAppBar控件</param>
        /// <param name="button">触发显示Popup控件的按钮</param>  

      public static void ShowRelativeToAppBar(Popup popup, Page page, AppBar appbar, Button button)
        {
            Func<UIElement, UIElement, Point> getOffset = delegate(UIElement control1, UIElement control2)
            {
                return control1.TransformToVisual(control2).TransformPoint(new Point(0, 0));
            };
            Point popupOffset = getOffset(popup, page);  //获得popup控件在当前页面中的位置
            Point buttonOffset = getOffset(button, page); //获得butto控件在当前页面中的位置
            Point appbarOffset = getOffset(appbar,page); //获得appbar控件在当前页面中的位置
            //设置应用程序窗口的左边缘与弹出项的左边缘之间的距离
            popup.HorizontalOffset = buttonOffset.X - popupOffset.X - (popup.ActualWidth / 2) + (button.ActualWidth / 2);//弹出层的中心在button的正上方
            //置应用程序窗口的上边缘与弹出项的上边缘之间的距离。
            popup.VerticalOffset = appbarOffset.Y - popupOffset.Y - popup.ActualHeight;
        }

　　注意：Popup显示的位置可以根据自己项目的需要，进行定位，不一定用上面设置边距的方法

　　2）自定义需要显示的弹出层UI，添加新建项，然后选择添加一个用户控件，自定义UI界面显示的内容，如下：

<UserControl
    x:Class="Dr.eye.VersionInformation"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Dr.eye"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="480"> 
    <Popup x:Name="PopPanel" IsLightDismissEnabled="True" Height="300" Width="480">
        <Grid Background="White" Width="480" Height="300">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <TextBlock Margin="20,5,0,5" Foreground="#71AC12" Text="Dr.eye Metro Dictionary 1.0 For Samsung Pad" FontSize="20" HorizontalAlignment="Left" VerticalAlignment="Center"/>
            <TextBlock Margin="20,5,0,5" Foreground="#71AC12" Grid.Row="1" TextWrapping="Wrap" Text="本產品所有權益係英業達股份有限公司所有非經合法授權請勿使用" FontSize="20" HorizontalAlignment="Left" VerticalAlignment="Center"/>
            <TextBlock Margin="20,5,0,5" Foreground="#71AC12" Grid.Row="2" Text="(c) 2012 Inventec Corporation.All Rights Reserved." FontSize="20" HorizontalAlignment="Left" VerticalAlignment="Center"/>
            <Button x:Name="Ok" Foreground="Black" Grid.Row="3" Content="确定" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24" Click="Ok_Click"/>
        </Grid>
    </Popup>
</UserControl>

注意：上面红色代码，该代码的作用时，当用户点击Popup控件以外的区域时，Popup控件会自动隐藏。

模板一点也不复杂，接下来是核心部分，就是控件的逻辑代码,如下所示：

    public sealed partial class VersionInformation : UserControl
    {
        public VersionInformation()
        {
            this.InitializeComponent();
        }

        public void Show(Page page,AppBar appbar,Button button)
        {
            PopPanel.IsOpen = true;
            FlyoutHelper.ShowRelativeToAppBar(PopPanel,page,appbar,button);
 
        }

        private void Ok_Click(object sender, RoutedEventArgs e)
        {
            PopPanel.IsOpen = false;  //点击弹出层的确定按钮后，弹出层会隐藏
        }
    }

 3）在你的UI界面上的BottomAppBar里面放置一个Button控件，并为该Button绑定事件

　　 VersionInformation pc;

        private void VersionButton_Click(object sender, RoutedEventArgs e)
        {
            if (pc == null)
            {
                pc=new VersionInformation();
            }
            pc.Show(this,bottomAppBar,VersionButton);

        }

以上就是实现了，自定义弹出框，它只是部分覆盖UI层，而且弹出框的位置是你点击处的正上方。

　　2. 第二种弹出层的方法，是完全覆盖UI层，使用户只能操作弹出层.(原文地址http://blog.csdn.net/tcjiaan/article/details/8036375)

1)、用动VS，新建一个空白页面项目。 

2)、在“解决方案资源管理器”上右击，从菜单中选择“添加”-“新建项”。

 

 

 

 

在接下来的窗口中选择“模板化控件”，输入控件名字，确定。

 

 

 

 

让后你会看到下面这个。

 

 

 

 

3)、打开Generic.xaml，先为控件定义好模板。

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1">

    <Style TargetType="local:PopControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:PopControl">
                    <Grid>
                        <Rectangle Canvas.ZIndex="0" Fill="Black" Opacity="0.4"/>
                        <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" ContentTemplate="{TemplateBinding ContentTemplate}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

 

模板一点也不复杂，接下来是核心部分，就是控件的逻辑代码。

using System;
using System.Collections.Generic;
using System.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Documents;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Media.Animation;

namespace App1
{
     public  class PopControl : ContentControl
    {
        Popup m_pop =  null;

         public PopControl()
        {
             this.DefaultStyleKey =  typeof(PopControl);
             // 弹出层的宽度等于窗口的宽度
             this.Width = Window.Current.Bounds.Width;
             // 弹出层的高度等于窗口的高度
             this.Height = Window.Current.Bounds.Height;
             this.HorizontalContentAlignment = Windows.UI.Xaml.HorizontalAlignment.Stretch;
             this.m_pop =  new Popup();
             // 将当前控件作为Popup的Child
             this.m_pop.Child =  this;
        }

         /// <summary>
         /// 获取Popup的ChildTransitions集合
         /// </summary>
         public TransitionCollection PopTransitions
        {
             get
            {
                 if (m_pop.ChildTransitions ==  null)
                {
                    m_pop.ChildTransitions =  new TransitionCollection();
                }
                 return m_pop.ChildTransitions;
            }
        }

         /// <summary>
         /// 显示弹出层
         /// </summary>
         public  virtual  void ShowPop()
        {
             if ( this.m_pop !=  null)
            {
                 this.m_pop.IsOpen =  true;
            }
        }
         /// <summary>
         /// 隐藏弹出层
         /// </summary>
         public  virtual  void HidePop()
        {
             if ( this.m_pop !=  null)
            {
                 this.m_pop.IsOpen =  false;
            }
        }
    }
}

 注意：上面代码中的 PopControl 继承的是 ContentControl类，而不是 Control，需要修改成继承 ContentControl

把控件的大小设置和当前窗口的大小相等，这样确保弹出层可以完全覆盖在UI上。接着把当前控件作为Popup控件的Child元素，而控件的显示与隐藏，其实就是设置Popup的IsOpen属性。为了方便派生类扩展，ShowPop和HidePop方法都用了virtual关键字。

　　4)、接下来，新增一个用户控件，它作为弹出层的内容。

【XAML】

< UserControl
    x:Class= "App1.ucReg"
    xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x= "http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local= "using:App1"
    xmlns:d= "http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc= "http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable= "d"
    d:DesignHeight= "700"
    d:DesignWidth= "900">
    
    < UserControl.Resources>
        < Style x:Key= "t"  TargetType= "TextBlock">
            < Setter Property= "FontSize"  Value= "20" />
            < Setter Property= "VerticalAlignment"  Value= "Center" />
            < Setter Property= "Margin"  Value= "6,0,21,0" />
        < /Style>
        < Style x:Key= "w"  TargetType= "FrameworkElement">
            < Setter Property= "Margin"  Value= "5,7,0,5" />
        < /Style>
    < /UserControl.Resources>
    
    < Grid VerticalAlignment= "Center"  Background= "Green">
        < Grid Margin= "0,50,0,32"  Width= "560">
            < StackPanel>
                < TextBlock Text= "用户注册"  Margin= "0,0,0,34"  Style= "{StaticResource PageHeaderTextStyle}" />
                < Grid>
                    < Grid.ColumnDefinitions>
                        < ColumnDefinition Width= "Auto" />
                        < ColumnDefinition/>
                    < /Grid.ColumnDefinitions>
                    < Grid.RowDefinitions>
                        < RowDefinition Height= "Auto" />
                        < RowDefinition Height= "Auto" />
                        < RowDefinition Height= "Auto" />
                        < RowDefinition Height= "Auto" />
                        < RowDefinition Height= "Auto" />
                    < /Grid.RowDefinitions>
                    < TextBlock Style= "{StaticResource t}"  Grid.Row= "0"  Grid.Column= "0"  Text= "姓名：" />
                    < TextBox Grid.Row= "0"  Grid.Column= "1"  Style= "{StaticResource w}" />
                    < TextBlock Grid.Row= "1"  Grid.Column= "0"  Text= "性别："  Style= "{StaticResource t}" />
                    < ComboBox Grid.Row= "1"  Grid.Column= "1"  Style= "{StaticResource w}">
                        < ComboBoxItem Content= "男"  IsSelected= "True" />
                        < ComboBoxItem Content= "女"  />
                    < /ComboBox>
                    < TextBlock Style= "{StaticResource t}"  Text= "电邮："  Grid.Row= "2"  Grid.Column= "0" />
                    < TextBox Style= "{StaticResource w}"  Grid.Row= "2"  Grid.Column= "1" />
                    < TextBlock Style= "{StaticResource t}"  Text= "手机："  Grid.Row= "3"  Grid.Column= "0" />
                    < TextBox Grid.Column= "1"  Grid.Row= "3"  Style= "{StaticResource w}" />
                    < TextBlock Text= "地址："  Style= "{StaticResource t}"  Grid.Row= "4"  Grid.Column= "0" />
                    < TextBox Style= "{StaticResource w}"  Grid.Row= "4"  Grid.Column= "1" />
                < /Grid>
                < StackPanel Orientation= "Horizontal"  Margin= "0,15,0,7"  HorizontalAlignment= "Center">
                    < Button Content= "确定"  Padding= "45,5"  Click= "onClick" />
                    < Button Content= "取消"  Padding= "45,5"  Margin= "22,0,0,0"  Click= "onClick" />
                < /StackPanel>
            < /StackPanel>
        < /Grid>
    < /Grid>
< /UserControl>

 

【C#】

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;

namespace App1
{
     public  sealed partial  class ucReg : UserControl
    {
        PopControl _pc;
         public ucReg(PopControl c)
        {
             this.InitializeComponent();
            _pc = c;
        }

         private  void onClick( object sender, RoutedEventArgs e)
        {
             if (_pc !=  null)
            {
                _pc.HidePop();
            }
        }
    }
}

为了方便控制PopControl，在用户控件中声明一个PopControl，在用户控件类的构造函数中传递。

　　5)、最后，我们在MainPage.xaml中测试这个弹出框。

　【XAML】

< Page
    x:Class= "App1.MainPage"
    xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x= "http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local= "using:App1"
    xmlns:d= "http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc= "http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable= "d">

    < Grid Background= "{StaticResource ApplicationPageBackgroundThemeBrush}">
        < Button Content= "弹出对话框"  Click= "onPop" />
    < /Grid>
< /Page>

　　【C#】

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;

namespace App1
{
     public  sealed partial  class MainPage : Page
    {
         public MainPage()
        {
             this.InitializeComponent();
        }


         private  void onPop( object sender, RoutedEventArgs e)
        {
            PopControl pc =  new PopControl();
            ucReg uc =  new ucReg(pc);
            pc.Content = uc;
            pc.ShowPop();
        }
    }
}

　　好了，现在可以运行，效果就像下图所示，还不错吧。