源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

深入解析:打造自动消失的对话框

  • 时间:2020-04-24 05:09 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:深入解析:打造自动消失的对话框
原理:使用Popup控件,并且设置Popup控件的位置居中。 1:新建自定义控件PopupBorder,作为Popup的child。[b]代码如下: [/b]
[u]复制代码[/u] 代码如下:
<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>
[img]http://files.jb51.net/file_images/article/201305/20130513175725160.png[/img]  
[b]新建PopupDemo页面,代码如下:
[/b]
[u]复制代码[/u] 代码如下:
<Grid x:Name="LayoutRoot">         <StackPanel>             <Button Content="Show" Click="ShowPopup_Clicked"></Button>         </StackPanel>     </Grid>
后台cs代码为:
[u]复制代码[/u] 代码如下:
private void ShowPopup_Clicked(object sender, RoutedEventArgs e)         {             Popup popup = new Popup();            //设置popup的Child属性为自定义的用户控件。              popup.Child = new PopupBorder();             popup.IsOpen = true;         }
[u]复制代码[/u] 代码如下:
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);             };
完整的代码如下:
[u]复制代码[/u] 代码如下:
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中增加定时器代码:
[u]复制代码[/u] 代码如下:
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中增加
[u]复制代码[/u] 代码如下:
<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;后面增加如下代码来执行动画:
[u]复制代码[/u] 代码如下:
//设置popup的Child属性为自定义的用户控件。 popUp.Child = pborder;pborder.myStoryboard.Completed += delegate {     popUp.IsOpen = false; }; pborder.myStoryboard.Begin();
然后将Clicked中的代码进行重构。 新建MessageBoxHelper类: 代码如下:
[u]复制代码[/u] 代码如下:
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控件。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部