Silverlight2中自定义MessageBox(消息框) - 星辰.Net技术社区论坛

最新文章文章系列索引社区标签 Silverlight频道

Silverlight频道 >

Silverlight2中自定义MessageBox(消息框)

时间: 2008-08-27 13:56

首先是普通样式：

接着是显示图形样式：

使用新的样式风格：

首先请下载本文中的源码（本人已部分修改了原文中的源码和相应的样式，以便进行DEMO演示）。下面是相
应的类图和说明：

接下来，将会以这个类图来逐个解释相应类结构信息，首先看一下MessageBoxControls（相应内容见注释）:

[复制到剪贴板]

CODE:

///
/// 消息框结果
///
public enum MessageBoxResult
{
Yes,　　//是
No,　　 //否
Cancel　//取消
}

///
/// 消息事件参数
///
public class MessageBoxResultEventArgs : EventArgs
{
public MessageBoxResult Result { get; set; }
public object AsyncState { get; set; }
}

///
/// 消息框控件类，该模板包括三个组件(三个Button和一个Panel)
///
[TemplatePart(Name = RootElement, Type = typeof(Panel))]
[TemplatePart(Name = YesButtonElement, Type = typeof(Button))]
[TemplatePart(Name = NoButtonElement, Type = (typeof(Button)))]
[TemplatePart(Name = CancelButtonElement, Type = (typeof(Button)))]
public class MessageBoxControl : ContentControl
{
public event EventHandler MessageBoxDismissed;

public MessageBoxControl()
{
DefaultStyleKey = typeof(MessageBoxControl);
}
public override void OnApplyTemplate()
{
#region 取消之前的事件绑定

if (yesButton != null)
{
yesButton.Click -= OnYesButton;
}
if (noButton != null)
{
noButton.Click -= OnNoButton;
}
if (cancelButton != null)
{
cancelButton.Click -= OnCancelButton;
}

#endregion

rootElement = base.GetTemplateChild(RootElement) as Panel;
yesButton = base.GetTemplateChild(YesButtonElement) as Button;
noButton = base.GetTemplateChild(NoButtonElement) as Button;
cancelButton = base.GetTemplateChild(CancelButtonElement) as Button;

#region 如果grid中有相应元素时，则绑定相应事件（详见下面的代码）

if (yesButton != null)
{
yesButton.Click += OnYesButton;
}
if (noButton != null)
{
noButton.Click += OnNoButton;
}
if (cancelButton != null)
{
cancelButton.Click += OnCancelButton;
}

#endregion
}

void OnYesButton(object sender, EventArgs args)
{
FireDismissed(MessageBoxResult.Yes);
}
void OnNoButton(object sender, EventArgs args)
{
FireDismissed(MessageBoxResult.No);
}
void OnCancelButton(object sender, EventArgs args)
{
FireDismissed(MessageBoxResult.Cancel);
}

///
/// 调用绑定的事件，并传递相应参数
///
///
void FireDismissed(MessageBoxResult result)
{
//当绑定的事件不为空时(绑定部分参见MessageBox的构造函数)
if (MessageBoxDismissed != null)
{
MessageBoxDismissed(this, new MessageBoxResultEventArgs() { Result = result });
}
}

Button yesButton;
Button noButton;
Button cancelButton;
Panel rootElement;

#region 赋值信息参见generic.xaml中的"x:Name"声明

public const string RootElement = "RootElement";
public const string YesButtonElement = "YesButtonElement";
public const string NoButtonElement = "NoButtonElement";
public const string CancelButtonElement = "CancelButtonElement";

#endregion
}

而MessageBox这个控件使用封装类结构如下（相关内容见注释）：

[复制到剪贴板]

CODE:

public class UserControlContentAccessor : UserControl
{
///
/// 获取当前UserControl的ContentProperty属性
///
/// 当前UserControl
/// ContentProperty属性
public static UIElement GetContent(UserControl uc)
{
return ((UIElement)uc.GetValue(UserControl.ContentProperty));
}
///
/// 设置当前UserControl的ContentProperty属性
///
/// 当前UserControl
/// 要设置的内容属性
public static void SetContent(UserControl uc, UIElement element)
{
uc.SetValue(UserControl.ContentProperty, element);
}
}

///
/// 消息框类，该类可以看成是对"消息框控件类"使用封装(封装了事件绑定和内容信息)
///
public static class MessageBox
{
///
/// 实际页面视图中的元素（用于当消息框关闭后，还原页面元素时使用）
///
private static UIElement realVisual;
///
/// 用于绑定当前页面中根元素节点
///
private static Grid parentGrid;
///
/// 状态值
///
private static object asyncState;
///
/// 用户绑定回调事件属性
///
private static EventHandler userCallback;

public static void ShowAsync(object content)
{
ShowAsync(content, null);
}

public static void ShowAsync(object content,
EventHandler callback)
{
ShowAsync(content, null, callback);
}

public static void ShowAsync(object content, object userState,
EventHandler callback)
{
ShowAsync(content, userState, callback, null);
}

public static void ShowAsync(object content, object userState,
EventHandler callback, Style controlTemplate)
{
MessageBoxControl control = new MessageBoxControl();
control.Content = content;
//绑定指定样式
if (controlTemplate != null)
{
control.Style = controlTemplate;
}
ShowAsync(control, userState, callback);
}
public static void ShowAsync(MessageBoxControl control, object userState,
EventHandler callback)
{
UserControl uc = Application.Current.RootVisual as UserControl;

if (uc != null)
{
asyncState = userState;//用户状态绑定
userCallback = callback;//回调方法
realVisual = UserControlContentAccessor.GetContent(uc);
realVisual.IsHitTestVisible = false;　//使底层控件点击不可见

parentGrid = new Grid();//声明一个Grid对象，用于加载新的内容
UserControlContentAccessor.SetContent(uc, parentGrid);

parentGrid.Children.Add(realVisual); //加载realVisual内容(注:此处内容中的控制已不支持点击了)
parentGrid.Children.Add(control);　//加载消息框实例,后加载的显示在上(前)面

control.MessageBoxDismissed += OnDismissed; //绑定要处理的事件，该事件会在点击消息框中的"yes"或"no"按钮时执行
}
}
static void OnDismissed(object sender, MessageBoxResultEventArgs e)
{

MessageBoxControl control = sender as MessageBoxControl;

UserControl uc = Application.Current.RootVisual as UserControl;

if (uc != null)
{　 //清除之前的页面UI元素，并还原页面初始时的元素设置
parentGrid.Children.Clear();
realVisual.IsHitTestVisible = true;
UserControlContentAccessor.SetContent(uc, realVisual);
}
if (control != null)
{
control.MessageBoxDismissed -= OnDismissed;
}
try
{
if (userCallback != null)
{
//执行用户绑定的事件（并传递事件参数）
userCallback(null, new MessageBoxResultEventArgs()
{
Result = e.Result,
AsyncState = asyncState
});
}
}
finally
{
realVisual = null;
parentGrid = null;
asyncState = null;
userCallback = null;
}
}
}

其实通过上面的类，我们可以看出作者是如何在当前页面中显示消息框信息的，也就是上面代码段里
的如下代码：

[复制到剪贴板]

CODE:

realVisual = UserControlContentAccessor.GetContent(uc);
realVisual.IsHitTestVisible = false;　//使底层控件点击不可见

parentGrid = new Grid();//声明一个Grid对象，用于加载新的内容
UserControlContentAccessor.SetContent(uc, parentGrid);

parentGrid.Children.Add(realVisual); //加载realVisual内容(注:此处内容中的控制已不支持点击了)
parentGrid.Children.Add(control);　//加载消息框实例,后加载的显示在上(前)面

也就是通过realVisual来保存原有的页面元素信息，然后重新按指定顺序（先realVisual再messagecontrol）
加载UIElement来实现显示消息框的方式，当然这种有HACK味道的做法到底效果好不好，连原作者都表示怀疑，他
本人也感觉还应有更好的Solution。

当然realVisual变量的一个重要用处在于当消息框被关闭时，用它来还原页面中的元素，而这块代码就是上面
所说的OnDismissed方法所做的事了，代码如下:

[复制到剪贴板]

CODE:

OnDismissed　(object sender, MessageBoxResultEventArgs e)
{

MessageBoxControl control = sender as MessageBoxControl;

UserControl uc = Application.Current.RootVisual as UserControl;

if (uc != null)
{　 //清除之前的页面UI元素，并还原页面初始时的元素设置
parentGrid.Children.Clear();
realVisual.IsHitTestVisible = true;
UserControlContentAccessor.SetContent(uc, realVisual);
}

}

这样，我们可以在应用程序中使用该类来显示相应的消息框了，其声明和使用代码如下：

[复制到剪贴板]

CODE:

//普通样式
void OnNormalClick(object sender, EventArgs args)
{
MessageBox.ShowAsync("简单调用, 无回调, 无状态, 无样式！");
//下面注释的代码包括状态和回调事件　
//MessageBox.ShowAsync("As previously but with a callback - hit NO", (s, e) =>
// {
// Debug.Assert(e.Result == MessageBoxResult.No);
// });

//MessageBox.ShowAsync("As previously but with state - hit YES", 101, (s, e) =>
// {
// Debug.Assert((e.Result == MessageBoxResult.Yes) && ((int)e.AsyncState == 101));
// });
}
//显示图形
void OnShapeClick(object sender, EventArgs args)
{
MessageBox.ShowAsync(new Ellipse()
{
Width = 80,
Height = 80,
Fill = new SolidColorBrush(Colors.Green)
});
}

//转换样式
void OnChangeStyleClick(object sender, EventArgs args)
{

Style myStyle = this.Resources["myStyle"] as Style;

MessageBox.ShowAsync("使用一个不同的样式",
101,//状态
(s, e) =>　//处理事件
{
if (e.Result == MessageBoxResult.No && ((int)e.AsyncState == 101))
{
HtmlPage.Window.Alert("您点击了No按钮");
}

if (e.Result == MessageBoxResult.Yes)
{
HtmlPage.Window.Alert("您点击了Yes按钮");
}
},
myStyle);
}

说到这里，还有一个内容没有介绍，也就是作者所定义的两个样式文件，其中之一被放置到了generic.xaml
中，以便做了控制默认加载样式，其绑定直接在MessageBoxControl构造函数中完成，如下：

[复制到剪贴板]

CODE:

public MessageBoxControl()
{
DefaultStyleKey = typeof(MessageBoxControl);
}

而另外的样式被放在了page.xaml中，以便于程序运行时访问，这里就不多作介绍了。不过本人已修改了这两
个样式中的一些数值，主要是为了显示时比例更好看一些。

hongjing1107 时间: 2008-08-28 16:18

顶了

1 / 1 页

1

跳转页

作者
admin

添加至收藏夹

添加至收藏夹

浏览:269

附件下载

请您先登录,然后才能下载附件

版权所有星辰.Net技术社区论坛 Sitemap GoogleSitemap 简洁版本

网站备案:沪ICP备08100262号

返顶部