Silverlight 3 的自定义消息框控件

• 下载源代码 - 143.71 KB
• 下载演示项目 - 64.81 KB

引言

在本文中，我将向您展示如何在 Silverlight 3 中创建自定义 messagebox 用户控件，以便您可以在任何 Silverlight 应用程序中使用它，而不是使用默认的消息框。

背景

为了能够完成本教程，您应该对 Microsoft Expression Blend 有一些了解，我们将使用它来创建 MessageBox 用户控件。 我假设您熟悉 Expression Blend 及其用户界面。

基本思想

毫无疑问，messagebox 控件在任何应用程序中都被大量使用，无论是桌面还是 Web，因为您可能需要向用户询问某些内容，警告他们进行某些危险操作，或者仅仅是向用户显示信息，等等... 该控件必须非常灵活才能处理所有这些场景。 此外，它必须是一个模态对话框，可防止用户在对话框关闭之前访问页面的后台。

创建消息框用户控件

启动 Expression Blend 并选择“控件库”项目模板（以便生成 DLL，可以将其添加到任何 Silverlight 应用程序中），然后从解决方案中删除 MainControl 用户控件，并添加一个新的“子窗口”。此子窗口将作为模态对话框打开，因此我们现在可以更改子窗口的样式，使其看起来像屏幕截图。

设计消息框

在“对象和时间轴”面板中，右键单击 ChildWindow 节点，然后选择“编辑模板”，然后选择“编辑副本”。现在我们将能够自定义子窗口的布局以满足我们的要求。您会发现第五个 Border 是最重要的，它包含了所有的 UI 元素。

展开第五个 Border 控件并选择 Chrome 节点；Chrome 节点是 messagebox 的标题，因此我们将使用以下 XAML 代码使用渐变画笔更改其背景颜色

完成标题样式后，我们将添加一个背景图像以使其外观更好，因此请在承载 chrome 元素的网格中添加一个图像，或者您可以调整该网格的背景颜色，这完全取决于您。

为消息框添加控件

此时，我们已经完成了自定义 messagebox 布局的样式设置，但我们希望在 messagebox 的主体中显示文本消息并添加一些按钮，所以回到 childwindow ，我们将添加以下项目

1. Textblock 元素，用于向用户显示文本消息。
2. Image 元素，显示消息图标，根据用户的选择。
3. button - 3 个按钮（是、否和取消），但用户可能只想显示 2 个按钮（是和否）或者可能只有一个（确定），因此我们将它们分组到一个 StackPanel 中，以便在对话框中将它们居中。

因此，最终的 UI 树在“对象和时间轴”面板中应该如下所示

添加一些用户选项

到目前为止，我们已经完成了用户控件的所有设计工作，现在让我们为用户添加一些选项。我们将在我们的命名空间中添加两个枚举（MessageBoxButtons 和 MessageBoxIcon），以便用户可以选择正确的消息类型，例如，他/她可能想显示一条错误消息，因此我们应该在消息中显示错误图标。

public enum MessageBoxButtons { Ok, YesNo, YesNoCancel, OkCancel }
public enum MessageBoxIcon { Question, Information, Error, None, Warning }

获取消息框结果

最后一件事是我们想知道用户单击了哪个按钮，那么创建一个返回 DialogResult 的 public 方法 Show(string message, string title); ，就像 Windows Forms 中的 messagebox 类一样？不幸的是，这在 Silverlight 中不适用，因为在 Windows Forms 中，messagebox 等待用户响应，以便程序可以完成处理，但这在 Silverlight 中并非如此。模态对话框将被打开，其余代码也将执行，因此应用程序不会等待用户关闭对话框来完成其工作。为了克服这个问题，我们将处理 messagebox 控件的关闭事件，以便我们知道单击的按钮。

我声明了一个委托函数，其中包含一个类型为 MessageBoxResult 的参数，以便知道单击了哪个按钮。

//delegate to get the selected MessageBoxResult
public delegate void MessageBoxClosedDelegate(MessageBoxResult result);

//event will be fired in the Close event of the usercontrol
public event MessageBoxClosedDelegate OnMessageBoxClosed;

//property to keep the result of the messagebox
public MessageBoxResult Result { get; set; }

处理关闭事件

private void MessageBoxChildWindow_Closed(object sender, EventArgs e)
{
	if (OnMessageBoxClosed != null)
	OnMessageBoxClosed(this.Result);
}

如何使用

首先，您需要将此类库生成的 DLL 添加到任何 Silverlight 应用程序中。子窗口类有一个名为“Show()”的 public 方法，因此我们将使用它来打开 messagebox，但我们希望根据用户的选择设置其标题、文本消息、图标和按钮数量；因此，我们可以通过 public 方法或通过构造函数的重载来传递这些参数，我选择了第二种选项，并为默认构造函数创建了另一个重载，并通过它传递了参数，因此请使用以下代码打开 messagebox

//displayed message
string msg = "An error has occurred and the operation was cancelled, 
		Are you sure you want to continue?";

//creating new instance from the MessageBoxControl
MessageBoxControl.MessageBoxChildWindow w = 
	new MessageBoxControl.MessageBoxChildWindow("Error", msg, 
	MessageBoxControl.MessageBoxButtons.YesNo,
	MessageBoxControl.MessageBoxIcon.Error);

//define the close event handler for the control
w.OnMessageBoxClosed += 
	new MessageBoxControl.MessageBoxChildWindow.MessageBoxClosedDelegate
	(w_OnMessageBoxClosed);

//open the message
w.Show();

结语

我附上了一个测试应用程序，该应用程序动态显示 messagebox ，以便您可以测试其所有功能。

历史

• 本文撰写于 2009 年 9 月 18 日。