使用 Silverlight Toolkit 的消息框和确认对话框

• 下载源代码 - 147 KB

引言

本文将向您展示如何利用 Silverlight 工具包的 ChildWindow 类来实现外观精美的消息和确认对话框。

尽管 Silverlight 已提供 MessageBox（位于 System.Windows 命名空间下），但其外观更像 Windows，并且没有 Silverlight 闪亮的“光泽”。此外，似乎本机上没有确认对话框。本文将向您展示如何使用 Silverlight 工具包实现这些对话框。

背景

当我刚开始使用 Silverlight（2.0 版本）时，我使用内置的 MessageBox 类向用户显示各种信息（例如操作成功或失败）。它易于使用，无需额外工作。但是，其外观和感觉与我编写的其他 Silverlight 应用程序不符，而且 MessageBox 看起来更像是，呃，Windows 消息框。

因此，我用一个我编写的用户控件替换了它，该控件具有更浓厚的 Silverlight 风格。当然，这只是一个简单的实现，但它具有更强的 Silverlight 氛围，世界也因此变得更快乐、更光明。

然后，Microsoft 发布了 Silverlight 3.0，并在此之后不久，我发现了 Silverlight 3.0 工具包（确切地说，是七月发布版！）。在浏览工具包中可用的内容时，我偶然发现了 ChildWindow 类。非常好，我想，它立刻就表明“我非常适合自定义 MessageBox / Confirm Dialog 实现”！

Using the Code

附加的解决方案包含三个项目 - 演示消息框的 Silverlight 应用程序（FortySixApplesMessageBox）、托管 Silverlight 应用程序的 Web 应用程序项目（FortySixApplesMessageBox.Web）以及包含消息框/确认对话框实现代码的 Silverlight 类库（FortySixApplesMessageBox.Common）。

要运行演示，请将存档提取到本地磁盘，将 FortySixApplesMessageBox.Web 设为主启动项目，并将 FortySixApplesMessageBoxTestPage.aspx 设为主启动页。运行应用程序，然后单击 “Show Confirm dialog” 按钮以显示对话框示例。

以下是如何显示确认对话框的示例

// This code is called from the constructor in MainPage.xaml.cs
// in the FortySixApplesMessageBox project. 
CreateButton.Click += (sender, args) =>
    {
        var messageBox = new MessageBoxPopUp();
        messageBox.Show(
            "Confirm",
            "This is a demo confirm dialog box. " + 
            "It gives the user a [Yes], [No], or [Cancel] option", 
            Buttons.YesNoCancel);
    };

将产生以下结果

消息框/确认对话框类

对话框已在 FortySixApplesMessageBox.Common 类库中定义为 MessageBoxPopUp 类。

首先要注意的是，MessageBoxPopUp 继承自 ChildWindow。如前所述，此类定义在 Silverlight 工具包中，并且应引用 System.Windows.Controls 来访问它。ChildWindow 类提供弹出功能和动画（使用 Visual State Manager），并确保在窗口/弹出窗口处于活动状态时禁用其余 UI。

好的，现在我们有了 ChildWindow 类提供的基本弹出功能。下一步是添加特定于消息框的功能。这包括一种指定消息框要提供哪些按钮的方法，以及一种开发人员传递消息框标题以及要向用户显示的消息的方法。

前者通过一个枚举暴露，该枚举名为，等等，等等，没错，您猜对了 - Buttons！

public enum Buttons
{
    Ok,
    YesNo,
    OkCancel,
    YesNoCancel
}

我在两个地方为开发人员提供了设置特定视觉特征的选项。首先，在重载的构造函数中，其次，在重载的 Show() 方法中。开发人员可以为消息框弹出窗口指定宽度、高度和不透明度。这里要注意的一点是，如果在消息框构造函数中的一个中设置了高度、宽度和不透明度，然后在重载的 Show() 方法中的一个中设置了不同的值；后者将覆盖在构造函数中设置的值。

初始化消息框弹出窗口到指定宽度和高度的构造函数的示例如下所示

public MessageBoxPopUp(double width, double height, double opacity)
{
    InitializeComponent();
    Width = width;
    Height = height;
    Opacity = opacity;
}

要将消息框弹出窗口显示给用户，开发人员可以调用一个重载的 Show() 方法，如下所示

public void Show(string title, string message, Buttons buttons)
{
    generateButtons(buttons);
    Title = title;
    Message = message;
    Show();
}

您可能已经注意到在 Show() 方法中，我调用了一个名为 generateButtons() 的方法。顾名思义，此方法用于创建所需的按钮，并根据指定的 Buttons 枚举参数适当地布局它们。

private void generateButtons(Buttons buttons)
{
    switch (buttons)
    {
        case Buttons.Ok:
        {
            createOkButton();
            createOkButtonGrid();
            break;   
        }
        case Buttons.YesNo:
        {
            createYesAndNoButtons();
            createYesNoGrid();
            break;
        }
        case Buttons.OkCancel:
        {
            createOkAndCancelButtons();
            createOkCancelGrid();
            break;
        }
        case Buttons.YesNoCancel:
        {
            createYesAndNoAndCancelButtons();
            createYesNoCancelGrid();
            break;
        }
        default:
            throw new ArgumentOutOfRangeException("buttons");
    }
}

每个 case 语句都初始化所需的按钮，并在 Grid 中创建 ColumnDefinitions 用于按钮布局。以下是此过程中调用的一些方法

// Create both a [Yes] and a [No] button.
private void createYesAndNoButtons()
{
    createYesButton();
    createNoButton();
}

// Creates and initializes the [Yes] button. Also hooks up the Click event handler, 
// setting the ChildWindow's DialogResult to true, allowing the developer
// to determine the choice the user made when clicking the button.
private void createYesButton()
{
    if (_yesButton != null) return;

    _yesButton = new Button
        {
            Content = "Yes",
            Margin = new Thickness(2)
        };
        
    _yesButton.Click += (sender, args) => DialogResult = true;
}

// Sets up the Grid layout for a [Yes/No] button combination, and adds
// a [Yes] and [No] button to the Grid.
private void createYesNoGrid()
{
    resetAndClearGrid(ButtonsGrid);
    addColumnDifinitionsToGrid(ButtonsGrid, 2);
    addButtonToGrid(ButtonsGrid, _yesButton, 0);
    addButtonToGrid(ButtonsGrid, _noButton, 1);
}

// Adds a Button object to a grid at the specified Grid's column index.
private static void addButtonToGrid(Panel grid, UIElement button, int columnIndex)
{
    grid.Children.Add(button);
    button.SetValue(Grid.ColumnProperty, columnIndex);
}

大功告成 - 消息框，采用 ChildWindow 风格，由 Silverlight 工具包提供！

最后一点需要提一下，消息框结果（用户单击了 [Yes]、[No]、[OK] 还是 [Cancel]）存储在 ChildWindow 类的 DialogResult 属性中，该属性是一个可空的 bool。这可以解释如下

// Hook into the Closed event defined in the ChildWindow class, and retrieve
// the true/false value from the ChildWindow's DialogResult property.
messageBox.Closed += (s, e) => { var result = messageBox.DialogResult; };

历史

• 首次发布。