Window 8 学习笔记（二）--如何创建自定义类型的MessageDialog

Window 8 学习笔记（二）--如何创建自定义类型的MessageDialog

      
      书接上一回，前文说到微软的MessageDialog,那我们来看看Message Dialog是是个啥玩意，为了有个主观印象，我们先看看它长什么样子。
一、Message Dialog

      

      这就是一个弹出的Message Dialog的样子，它是个模态对话框，后面的页面是不能交互的。现在我们可以看到，它包含三个部分：
      1. 标题
      2. 内容
      3. 按钮：commond button。最多只能有三个，为什么“Dino Dino”是蓝底白字，另外两个是灰底黑字？来看看代码再说吧:

 

 1   //  Create the message dialog and set its content and title
 2     auto messageDialog  =   ref   new  MessageDialog( " New updates have been found for this program. Would you like to install the new updates? " ,  " Updates available " );
 3
 4      //  Add commands and set their callbacks
 5     messageDialog -> Commands -> Append( ref   new  UICommand( " Don't install " ,  ref   new  UICommandInvokedHandler([ this ](IUICommand ^  command)
 6      {
 7        rootPage->NotifyUser("The 'Don't install' command has been selected.", NotifyType::StatusMessage);
 8    } )));
 9     messageDialog -> Commands -> Append( ref   new  UICommand( " Install updates " ,  ref   new  UICommandInvokedHandler([ this ](IUICommand ^  command)
10      {
11        rootPage->NotifyUser("The 'Install updates' command has been selected.", NotifyType::StatusMessage);
12    } )));
13
14     messageDialog -> Commands -> Append( ref   new  UICommand( " Dino Dino  " ,  ref   new  UICommandInvokedHandler([ this ](IUICommand ^  command)
15      {
16        rootPage->NotifyUser("The 'Third' command has been selected.", NotifyType::StatusMessage);
17    } )));
18
19     
20      //  Set the command that will be invoked by default
21     messageDialog -> DefaultCommandIndex  =   2 ;
22
23      //  Show the message dialog
24     messageDialog -> ShowAsync();

      这是Show一个MessageDialog的完整步骤，从实例化一个MessageDialog 可以看出，你可以在构造函数中输入Title和Content。MessageDialog有两个构造函数 MessageDialog(String^ content); MessageDialog(String^ content, String^ title);所以title是可选的。
      另外怎么添加按钮呢？4--17行的代码演示了如何添加一个按钮并且在按下该按钮时的相应的动作。
      21行代码设置默认的次序，次序是从0开始的，我们这里设置成了2， 所以应该是第三个按钮为默认按钮，当进入该MessageDialog后，按下Enter键，触发的将是第三个按钮。
      24行将该Dialog秀出来。
      纵观整个过程，我们能修改的只有title，content，command button的内容，其他的，神马都不能做。要想加点东西，还是要靠自己。

二、自定义Message Dialog
      先上图：


      这也是一个模态的对话框，里面可以有任意的东西，下面我们来看看它是如何做出来的。思路是这样，在主页面上先创建一个Popup的控件popup，自己实现一个UserControl模拟MessageDialog: userControl，然后将该UserControl作为Popup的子控件: popup->Child = userControl;最后显示这个Popup：popup->IsOpen = true;'
      Steps：
              1.    先创建一个UserControl，就是我们要弹出的东西


       
           
         这里为了达到效果，用了两层Grid，第一层Grid就是黑色背景的部分，将其属性Opacity设置成20%，以达到稍微透明的效果。第二层Grid就是白色的部分，直接放在第一层Grid上面即可。这个UserControl设置为宽800，高600.（实际的屏幕宽是1366，高768），里面的Grid宽800，高300.
         为了使我们的对话框能充满整个页面，我们需要设置我们的UserControl的宽高等于设备的宽高：

         Layout->Width = Window::Current->Bounds.Width;
         Layout->Height = Window::Current->Bounds.Height;

         我遇到的一个问题是，在主页面弹出了这个UserControl之后，如何将其关闭？解决方法：因为该UserControl已经设置为Popup的child，所以我们可以在OnOkCancelButtonClick这个方法中这么做：safe_cast<Popup^>(this->Parent)->IsOpen = false;就可以将其关闭了。

            2. 在MainPage中设置一个Popup,用来放置上面的UserControl:
      其中，我们的Popup的名字是AddTaskPopup, UserControl的类名叫做：AddTaskUserControl;
            首先实例化该UserControl：
                  auto userControl = ref new AddTaskUserControl();
            其次将该UserControl添加进MainPage中的Popup中：
                  AddTaskPopup->Child = userControl;
            最后显示该Popup：
                  AddTaskPopup->IsOpen = true;
         


       OK, 这里就算告一段落了，当Popup关闭的时候，你可以在MainPage中相应其Closed这个event，进行后续的操作。

       总结：实现一个自定义的MessageDialog并不算困难，只有两步：第一步，在MainPage中设置一个Popup，里面放置一个UserControl，第二步，创建一个UserControl，就是你要显示的东西，最好放两个Grid，其中第一个Grid用来盖住MainPage，实现模态和透明的效果，第二个grid放置你的控件。

下集预告：
            如何用C++创建一个可变尺寸的GridView，即实现类似于Windows Store的界面。