鸟叔学Windows8开发（1）：自定义弹出窗口

哦把橄榄石带偶。。。。。先声明下下，接下来将要写的一些关于Win8开发文章可能有些代码和网上一些博客的代码基本一致(哈哈大家一起借鉴学习，但是鸟叔表示在学习的过程中坚持原创)，代码相像归相像，最重要的是要举一反三，刨根问底，弄清原理。要有鸟叔的思想。。。。。

 一、默认弹出框MessageDialog

   1、在学习自定义弹出窗口之前先学习下，WIN8自带的弹出窗口，直接上代码，然后分析下。

async protected void onOKClick(object sender, RoutedEventArgs e)
        {
            //第一步：先声明MessageDialog
            MessageDialog msgOne = new MessageDialog("弹出一个按钮");
            //第二步：给弹出框添加命令并添加处理方法
            msgOne.Commands.Add(new UICommand("确定", new UICommandInvokedHandler(OnUICommand)));
            //第三步：显示弹出框
            await msgOne.ShowAsync();
        }

大家可能注意到代码中出现了两个新的关键字：async和await，这是.NET4.5中为了处理异步操作更象同步操作代码而加入的，呵呵 好像有点没说清，具体大家可以去问MSDN。。。

  2、给弹出框添加多个命令和设置默认按钮命令索引

 //添加多个命令
            msgThree.Commands.Add(new UICommand("重试", new UICommandInvokedHandler(OnUICommand)));
            msgThree.Commands.Add(new UICommand("忽略", new UICommandInvokedHandler(OnUICommand)));
            msgThree.Commands.Add(new UICommand("取消", new UICommandInvokedHandler(OnUICommand)));
            //msgThree.Commands.Add(new UICommand("第四个命令", new UICommandInvokedHandler(OnUICommand)));
            //默认按钮索引
            msgThree.CancelCommandIndex = 2;//当用户按Esc键时触发这个命令
            msgThree.DefaultCommandIndex = 0;//当用户按ENTER键时促发这个命令

这么简单的代码鸟叔你也敢贴上来，呵呵大家知道为什么我把第四个命令注释掉了吗？因为鸟叔在添加超过三个命令的时候程序报异常了。这微软大哥也太坑了吧。。。所以说命令最多添加三个。
同时我们可以设置按ESC和ENTER键时关联的命令。

二、自定义弹出窗

这微软大哥自带的弹出窗也太那个啥了吧，不能自定义还只能添加最多三个按钮，这对于最近比较火的鸟叔来说完全不够用呀，我要做一个用户注册或者登录框怎么办，因为鸟叔爱学习，所以想到了自定义弹出框。

 原理：1、要和当前页面弹出一个和窗口大小一样的窗口（目的将下面的窗口不能使用），

          2、并且设置窗口透明度。

第一步：先创建一个模版控件：作为弹出窗的模版以后可以共用

然后VS自动给我们创建了一个Themes文件夹并且在下面创建了一个Generic.xaml（是一个资源字典文件）文件

在Generic.xaml文件中添加如下代码：

<Style  TargetType="local:PopupsControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:PopupsControl">
                    <Grid>
                        <!--下面两个控件占有一个空间，
                         如果Rectangle在前面，当不设置Rectangle的Canvas.ZIndex属性或者为0时ContentPresenter不会被遮盖
                         如果Rectangle在后面，当设置为0的时候也会被遮盖，因为默认为0这时候就认为后面加入的在前面加入的上面
                         这里我们没有设置Rectangle的With和height属性，他会自动继承，
                        但是一些不是继承属性的时候我们需要用TemplateBinding来绑定-->
                        <Rectangle Canvas.ZIndex="0" Fill="Black" Opacity="0.5"/>
                        <!--TemplateBinding在一些不能继承的属性中非常有用，为了能够让模版使用控件中的属性值-->
                        <!--ContentPresenter用于承载内容-->
                        <ContentPresenter Content="{TemplateBinding Content}"/>
                                            <!--HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                            ContentTemplate="{TemplateBinding ContentTemplate}"-->
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

 

 同时还有一个关联的后台代码文件(生成的名称和自己定义的一样）

添加如下后台代码

 public  class PopupsControl : ContentControl
    {
        //定义一个弹出框
        Popup pop = null;
        public PopupsControl()
        {
            this.DefaultStyleKey = typeof(PopupsControl);
            this.HorizontalContentAlignment = HorizontalAlignment.Stretch;
            this.Width = Window.Current.Bounds.Width;
            this.Height = Window.Current.Bounds.Height;
            pop = new Popup();
            this.pop.Child = this;//设置承载内容
        }
        //这段代码没弄懂，求讲解？？？
        public TransitionCollection PopTransitionCollection
        {
            get
            {
                if (pop.ChildTransitions == null)
                    pop.ChildTransitions = new TransitionCollection();
                return pop.ChildTransitions;
            }
        }
        //打开
        public virtual void OpenpPop()
        {
            if (pop != null)
                pop.IsOpen = true;
        }
        //关闭
        public virtual void ClosePop()
        {
            if (pop != null)
                pop.IsOpen = false;
        }
    }

第二步：添加一个用户控件：用于在弹出框中显示的内容，这里我们创建一个用户登录的界面。

 前台代码：

<UserControl
    x:Class="_2弹出框.MyUserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:_2弹出框"
    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="600">
    <UserControl.Resources>
        <Style x:Key="MyTextBlockStyle" TargetType="TextBlock">
            <Setter Property="FontSize" Value="20"/>
            <Setter Property="Margin" Value="5,10,0,5"/>
            <Setter Property="HorizontalAlignment" Value="Right"/>
        </Style>
        <Style x:Key="MyTextBoxStyle" TargetType="TextBox">
            <Setter Property="FontSize" Value="20"/>
            <Setter Property="Margin" Value="5,8,0,5"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="Width" Value="300"/>
        </Style>
        <!--当我们没有为style设置key的时候，页面中的所有被Style定义的目标类型都将使用，
        如果我们定义了Key，则要显示的引用才能使用-->
        <Style  x:Key="ss" TargetType="Button">
            <Setter Property="Foreground" Value="Red"/>
        </Style>
    </UserControl.Resources>
    
    <Grid  VerticalAlignment="Center" Background="Blue">
        <Grid Margin="0,60,0,30" Width="500">
            <StackPanel Orientation="Vertical">
                <TextBlock Text="登录" Margin="0,0,0,30" Style="{StaticResource PageHeaderTextStyle}"/>
                <Grid VerticalAlignment="Center">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="用户名：" Style="{StaticResource MyTextBlockStyle}" Grid.Column="0" Grid.Row="0"/>
                    <TextBox Style="{StaticResource  MyTextBoxStyle}" Grid.Column="1" Grid.Row="0"/>
                    <TextBlock Text="密  码：" Style="{StaticResource MyTextBlockStyle}" Grid.Column="0" Grid.Row="1"/>
                    <TextBox Style="{StaticResource MyTextBoxStyle}" Grid.Column="1" Grid.Row="1"/>
                    <Button Content="登录" FontSize="20" Grid.Column="1" Grid.Row="2" Width="80"  Height="45" Margin="230,0,0,0" Click="Button_Click_1"/>
                </Grid>
            </StackPanel>
        </Grid>
        </Grid>
</UserControl>

后台代码：

public sealed partial class MyUserControl1 : UserControl
    {
        PopupsControl pop = null;
        public MyUserControl1(PopupsControl p)
        {
            this.InitializeComponent();
            pop = p;
        }

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            //关闭弹出框
            if (pop != null)
                pop.ClosePop();
        }
    }

第三步：显示我们的弹出窗口

  protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            //1、实例化弹出窗
            PopupsControl pop = new PopupsControl();
            MyUserControl1 uc = new MyUserControl1(pop);
            //2、将自定义控件赋值给弹出窗
            pop.Content = uc;
            //3、显示
            pop.OpenpPop();
        }

效果：

接下来一同与鸟叔来学习下这个过程：

创建模版控件——〉创建用户控件并且赋值给模版空间——〉显示

在这个简单的过程中鸟叔又很多疑问？？？？

1、在创建模版控件的时候我们在Generic.xaml中定义的style怎么关联到我们的控件上面的？

    在Generic.xaml和后台代码文件PopupsControl.cs中鸟叔发现并没有显示引用style的迹象。

例如我们在一个页面的Resources中定义的style需要我们定义Key（当我们定义key的时候我们必须在控件中显示引用才能有效果）或者不定义（这时候叫做类型样式，页面用的所有被样式作为目标的空间的样式都会改变，即使我们在控件中没有显示的引用）。大家跟着鸟叔看下上面的MyUserControl1.xaml中我的一段注释代码：

大家自己试试给style设置和不设置Key的效果，就会明白了。具体大家也可以多查下关于WPF/Silverlight样式方面的资料。

说了这么多好像没有回答我们的问题。因为我们需要显示样式中定义的效果的时候，我们需要显示应用或者使用类型样式。但是我们在定义模版控件的时候不管我们设不设置Key我们的模版控件都会引用该样式。

这时为什么呢 为什么呢，，，鸟叔最后发现当我们创建模版控件的时候VS会自动给我生成一个东东：

原来就是这个东西在作怪，鸟叔就是一个不淡定的人，鸟叔做了一件事情：帮文件夹名称或者文件名称改变的时候，发现我们的弹出框不能使用该样式了。鸟叔估计这个是VS在后台做了些关联的是但是不知道具体是怎么关联的，希望哪位知道的帮鸟叔讲解下。

2、弹出窗是怎么弹出来的（弹弹弹 弹走鱼尾纹。。。）

 a、鸟叔定义了一个Popup用来承载内容并且在当前窗口显示

 b、将一个继承于ContentControl的PopupsControl赋值给Popup实例，

 c、鸟叔在PopupsControl的控件模版的Style中定义了一个ControlTemplate并且设置了一个ContentPresenter（用来承载内容的）。

 d、然后将用户控件赋值给PopupsControl，最后其实是借助Popup弹出来的。

 

总结：要真正理解弹出框我们需要学习，内容控件ContentControl、控件模版ControlTemplate，以及样式Style和资源Resource相关方面的知识。

 

博文参考：

http://blog.csdn.net/tcjiaan/article/details/7928040

http://blog.csdn.net/tcjiaan/article/details/8036375

 

欢迎与鸟叔一起探讨学习，共同成长，鸟叔的微博 多了特