深入解析:打造自动消失的对话框
原理：使用popup控件，并且设置popup控件的位置居中。
1：新建自定义控件popupborder,作为popup的child。代码如下：
<usercontrol x:class="slstudy.popupborder"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:ignorable="d">
<usercontrol.resources>
<storyboard x:name="mystoryboard">
<doubleanimation
storyboard.targetname="layoutroot"
storyboard.targetproperty="opacity"
from="1.0" to="0" duration="0:0:1"
autoreverse="true" />
</storyboard>
</usercontrol.resources>
<grid x:name="layoutroot" >
<!--<border background="#ffcc0d0d" borderthickness="0" cornerradius="5">-->
<border borderthickness="0" cornerradius="5">
<border.background>
<lineargradientbrush endpoint="0.5,1" startpoint="0.5,0">
<gradientstop color="#ff27a3d7" offset="0.51"/>
<gradientstop color="#ff76c2e1" offset="0.004"/>
<gradientstop color="#ff27a3d7" offset="1"/>
</lineargradientbrush>
</border.background>
<border.effect>
<dropshadoweffect blurradius="10" color="#ffcc0d0d" shadowdepth="0"/>
</border.effect>
<textblock x:name="txtmessage" horizontalalignment="center" margin="10" verticalalignment="center"
fontsize="28" foreground="white" fontfamily="comic sans ms"
>this is a simple example</textblock>
</border>
</grid>
</usercontrol>
新建popupdemo页面，代码如下：复制代码 代码如下:
<grid x:name="layoutroot">
<stackpanel>
<button content="show" click="showpopup_clicked"></button>
</stackpanel>
</grid>
后台cs代码为：复制代码 代码如下:
private void showpopup_clicked(object sender, routedeventargs e)
{
popup popup = new popup();//设置popup的child属性为自定义的用户控件。
popup.child = new popupborder();
popup.isopen = true;
}复制代码 代码如下:
popup.layoutupdated += delegate
{
popup.margin = new thickness(
(app.current.host.content.actualwidth - pborder.actualwidth) / 2,
(app.current.host.content.actualheight - pborder.actualheight) / 2,
0,
0);
};
完整的代码如下：复制代码 代码如下:
popupborder pborder = new popupborder();popup popup = new popup();
//设置popup的child属性为自定义的用户控件。
popup.child = pborder;
popup.layoutupdated += delegate
{
popup.margin = new thickness(
(app.current.host.content.actualwidth - pborder.actualwidth) / 2,
(app.current.host.content.actualheight - pborder.actualheight) / 2,
0,
0);
};
popup.isopen = true;
运行可以发现弹出的消息已经居中了，那么如何让它自动消失呢？？,要想自动消失还得使用定时器，过了一段时间后定时器将popup控件的 isopen属性设置为false，这样窗口就关闭了。
于是在layoutupdated中增加定时器代码：
复制代码 代码如下:
popup.layoutupdated += delegate
{
popup.margin = new thickness(
(app.current.host.content.actualwidth - pborder.actualwidth) / 2,
(app.current.host.content.actualheight - pborder.actualheight) / 2,
0,
0);system.threading.timer timer = new system.threading.timer(
(state) =>
{
popup.dispatcher.begininvoke(() =>
{
popup.isopen = false;
});
}, null, 500, 500);
};
在过了500秒后，将popup. isopen设置为false。运行可以发现窗口可以自动消失了。
可以看到弹出窗口一下就关闭了，那么能不能慢慢的渐变的消失呢？？
为了实现渐变的消失，那么就应该使用动画了。
首先在popupborder中增加
复制代码 代码如下:
<usercontrol.resources>
<storyboard x:name="mystoryboard">
<doubleanimation
storyboard.targetname="layoutroot"
storyboard.targetproperty="opacity"
from="1.0" to="0" duration="0:0:1"
autoreverse="true" />
</storyboard>
</usercontrol.resources>
当然上面的popupborder代码中已经有了这段代码了，动画使用了doubleanimation,设置layoutroot 对象的opacity属性在1秒的时间内从1，变到0。接着在popupdemo页面的按钮事件里面在popup.child = pborder;后面增加如下代码来执行动画：
复制代码 代码如下:
//设置popup的child属性为自定义的用户控件。
popup.child = pborder;pborder.mystoryboard.completed += delegate
{
popup.isopen = false;
};
pborder.mystoryboard.begin();
然后将clicked中的代码进行重构。新建messageboxhelper类：
代码如下：
复制代码 代码如下:
public class messageboxhelper
{
#region 提示消?息¡é/// <summary>
/// 弹出提示消息标题为提示，按钮为确定
/// </summary>
/// <param name="msg"></param>
public static void showmessage(string msg)
{
//showfriendmessage(msg, "提示", messageboxbutton.ok);popupborder pborder = new popupborder();
pborder.txtmessage.text = " " + msg + " ";pborder.updatelayout();
popup popup = new popup();
popup.child = pborder;
pborder.mystoryboard.completed += delegate
{
popup.isopen = false;
};
pborder.mystoryboard.begin();
popup.invokeonlayoutupdated(() =>
{
popup.margin = new thickness(
(app.current.host.content.actualwidth - pborder.actualwidth) / 2,
(app.current.host.content.actualheight - pborder.actualheight) / 2,
0,
0);system.threading.timer timer = new system.threading.timer(
(state) =>
{
popup.dispatcher.begininvoke(() =>
{
popup.isopen = false;
});
}, null, 500, 500);
});
popup.isopen = true;}
/// <summary>
/// 弹出提示消息按钮为确定
/// </summary>
/// <param name="msg"></param>
public static void showmessage(string msg, string title)
{
showmessage(msg, title, messageboxbutton.ok);
}/// <summary>
/// 弹出提示消息
/// </summary>
/// <param name="msg"></param>
public static void showmessage(string msg, string title, messageboxbutton buttons)
{
messagebox.show(msg, title, buttons);
}#endregion
}
使用的时候只需要messageboxhelper.showmessage(“hello world”);就可以了。注意别忘记了popupborder控件。