Silverlight 之模态对话框的通用模拟

Silverlight 给我们带来了如同 Winform 一样便捷的开发方式，然而在桌面应用程序中一个非常重要的元素——模态对话框，却不具备。
而 ScottGu 的 Silverlight 教程中提供了一种简单的方法，可以模拟出类似模态对话框的显示。
其原理跟我们在 HTML 中实现模拟的模态对话框的方法类似，无非是动态创建一个半透明的层盖住整个页面背景，让背后的元素无法操作，然后在其上显示对话框内容即可。不过，在这篇教程中创建的子窗体必须在调用者页面的 XAML 中手工声明，假如我们需要根据情况调出 n 个不同的对话框呢？这样做显然不够灵活。本文的目标是基于这种场景提供一个简单的封装，以便更方便的实现主/从调用的场景。

例子的运行效果如下：

点击第一个按钮后，显示如下：

 

下面看看如何来实现这个效果。

首先，我们来定义一个模态对话框的基类，它是一个用户控件(UserControl)：

using System;
using System.Windows.Controls;

namespace ModalPopupDemo
{
    public class ModalDialog: UserControl
    {
        public event EventHandler Closed;

        public void Close()
        {
            if (Closed != null)
            {
                Closed(this, EventArgs.Empty);
            }
        }
    }

    public interface IModalDialogOpener
    {
        void ShowModalDialog(ModalDialog dialog);

        void CloseModalDialog();
    }
}

因为我们想在模态框关闭时，从父窗口中得到通知，所以给它定义了一个 Closed 事件。并且提供了该事件的触发函数 Close().

同时，我们还为模态框的父窗体(opener) 定义了一个接口 IModalDialogOpener.
其中顾名思义定义了打开和关闭模态框的两个方法。

好了，现在我们创建一个模态对话框试试。假设是一个登录窗体，就叫它 Login 吧——在项目中添加一个用户控件 Login.

在 Login.xaml 文件里添加了一些 Markup 后，我们修改后端代码文件 Login.xaml.cs 如下：

using System.Windows;

namespace ModalPopupDemo
{
    public partial class Login : ModalDialog
    {
        public Login()
        {
            InitializeComponent();
        }

        private void btnLogin_Click(object sender, RoutedEventArgs e)
        {
            Close();
        }
    }
}

这里注意基类改成了 ModalDialog，就像在 ASP.NET 页面基类里所做的那样。并且我们在按钮的点击事件处理函数里调用了刚才定义的 Close 方法来关闭窗体。

这时 Login.xaml 是这样的：

<local:ModalDialog x:Class="ModalPopupDemo.Login"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ModalPopupDemo">
    <Grid x:Name="LayoutRoot">
        <Border CornerRadius="20" Background="#eeeeee" Width="300" Height="150">
            <StackPanel Orientation="Vertical" Margin="10">
                <StackPanel Orientation="Horizontal" Margin="10">
                    <TextBlock Width="100">UserName:</TextBlock>
                    <TextBox x:Name="txtUserName" Width="150" HorizontalAlignment="Right" />
                </StackPanel>
                <StackPanel Orientation="Horizontal" Margin="10">
                    <TextBlock Width="100">Password:</TextBlock>
                    <TextBox x:Name="txtPassword" Width="150" />
                </StackPanel>
                <StackPanel Margin="10">
                    <Button x:Name="btnLogin" Content="Login" Width="50"
                        HorizontalAlignment="Right" Click="btnLogin_Click" />
                </StackPanel>
            </StackPanel>
        </Border>
    </Grid>
</local:ModalDialog>

需要注意的是这个 XAML 文档的根元素从默认的 UserControl 改成了 local:ModalDialog. 而这正是后台 partial class 的基类，Silverlight 中规定这两者必须一致的。这里 local 是一个名称空间，可以看到稍后的 xmlns:local="clr-namespace:ModalPopupDemo" 这段代码将它声明为了当前程序集的 ModalPopupDemo 名称空间。

实现了子窗体，我们来看看如何实现父窗体。

我们的父窗体 Page.xaml 是这样的：

<UserControl x:Class="ModalPopupDemo.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel Orientation="Vertical">
            <TextBlock FontSize="30" HorizontalAlignment="Center">This is the main page.</TextBlock>
            <Button x:Name="btnOpen1" Content="Open Login form" Click="btnOpen_Click" Width="150" />
            <Button x:Name="btnOpen2" Content="Open another form" Click="btnOpen2_Click" Width="150" Margin="0,10" />
        </StackPanel>
        <!-- 占位元素，用于在其中加载模态窗口 -->
        <Border x:Name="placeHolder" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
                Visibility="Collapsed"
                Background="#ff8a8a8a" Opacity="0.765" />
    </Grid>
</UserControl>

这里照搬了 ScottGu 文章中的那个技巧，不过我改成了用一个 Border 元素来占位，同时将它的大小设置为全屏、半透明、不可见状态。这样它就既可以作为子窗体的容器，又可以在弹出模态对话框时遮住背景，一举两得。

后端代码 Page.xaml.cs:

using System.Windows;
using System.Windows.Controls;

namespace ModalPopupDemo
{
    public partial class Page : UserControl, IModalDialogOpener
    {
        public Page()
        {
            InitializeComponent();
        }

        private void btnOpen_Click(object sender, RoutedEventArgs e)
        {
            var login = new Login();
            login.Closed += (sender2, args2) => CloseModalDialog();
            ShowModalDialog(login);
        }

        private void btnOpen2_Click(object sender, RoutedEventArgs e)
        {
            var form2 = new Form2();
            form2.Closed += (sender2, args2) => CloseModalDialog();
            ShowModalDialog(form2);
        }

        #region IModalDialogOpener implementations
        public void ShowModalDialog(ModalDialog dialog)
        {
            placeHolder.Child = dialog;
            placeHolder.Visibility = Visibility.Visible;
        }

        public void CloseModalDialog()
        {
            placeHolder.Child = null;
            placeHolder.Visibility = Visibility.Collapsed;
        }
        #endregion
    }
}

这里 ShowModalDialog 和 CloseModalDialog 的实现相当简单，分别就是附加/移除相关的子窗体控件实例，并且显示/隐藏占位控件。

页面中除了 Login 窗体外，还调用了另一个简单的用户控件 Form2，调用方式是非常类似的。Form2 的代码如下：
Form2.xaml:

<local:ModalDialog x:Class="ModalPopupDemo.Form2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ModalPopupDemo">
    <Grid>
        <Button x:Name="btnClose" Width="300" Height="200" Content="Close Me!"
                Click="btnClose_Click" FontSize="40" />
    </Grid>
</local:ModalDialog>

Form2.xaml.cs:

using System.Windows;

namespace ModalPopupDemo
{
    public partial class Form2 : ModalDialog
    {
        public Form2()
        {
            InitializeComponent();
        }

        private void btnClose_Click(object sender, RoutedEventArgs e)
        {
            Close();
        }
    }
}

弹出 Form2 的运行效果如下：

 

至此，我们就实现了一个还算灵活的模态对话框弹出机制。这个好处在于，当我们要创建新的模态对话框时，在它的 Xaml 中只需关注其自身的显示逻辑即可，而不用关心如何显示到父窗体中，如何设置屏蔽层等细节问题，做到了一定程度的解耦。

 

注：本文提供了一个简单的实现方式，如果采用创建自定义控件等方法，也许能做到更好的封装，这个留待后续研究和探讨。