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

 更新时间:2020年6月25日 11:41  点击:1949

原理:使用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>


image 

新建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控件。

[!--infotagslink--]

相关文章

  • 删除条目时弹出的确认对话框

    复制代码 代码如下: <td> <a href="/member/life/edit_ppt/<?php echo $v->id;?>" class="btn">编辑</a> <a href="javascript:;" onclick="if(confirm('您确定删除这条记录?')){location.href='/member/life/d...2014-06-07
  • 基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化

    这篇文章主要介绍了基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化的相关知识,主要对比说明在Bootstrap开发中用到的这些技术要点,对此文感兴趣的朋友一起学习吧...2016-05-14
  • C#实现在前端网页弹出警告对话框(alert)的方法

    这篇文章主要介绍了C#实现在前端网页弹出警告对话框(alert)的方法,涉及C#通过自定义函数调用window.alert方法弹出对话框的技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
  • jQuery UI库中dialog对话框功能使用全解析

    这篇文章主要介绍了jQuery UI库中dialog对话框功能使用全解析,文中列举了各种常用的dialog属性,整理得很全面,需要的朋友可以参考下...2016-04-25
  • asp.net静态方法弹出对话框实现思路

    为菜鸟所准备……其实就是弹出JavaScript小窗口,总得来说就是定义的一个DIV,感兴趣的朋友可以了解下,或许对你学习asp.net有所帮助...2021-09-22
  • Cocos2d-x中实现弹出对话框示例

    这篇文章主要介绍了Cocos2d-x中实现弹出对话框示例,注意本文代码中的注释,本文同时给出了效果图,需要的朋友可以参考下...2020-04-25
  • JavaScript实现拖动对话框效果的实现代码

    这篇文章主要介绍了JavaScript实现拖动对话框效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-12
  • window.open实现网页对话框

    由于一个页面上,内容很少,如果直接打开,整个页面感觉很空,所以要用到网页对话框,用来只显示有内容的部分。使用格式: SCRIPT LANGUAGE="javascript"> <!-- window.ope...2016-09-20
  • Android自定义样式圆角dialog对话框

    这篇文章主要为大家详细介绍了Android自定义样式圆角dialog对话框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-11-14
  • Android实现日期时间选择对话框

    这篇文章主要为大家详细介绍了Android实现日期以及时间选择对话框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-12
  • ASP.NET中的几种弹出框提示基本实现方法

    NET程序的开发过程中,常常需要和用户进行信息交互,对话框的出现将解决了这些问题,下面是本人对常用对话框使用的小结,希望对大家有所帮助...2021-09-22
  • C#使用Word中的内置对话框实例

    这篇文章主要介绍了C#使用Word中的内置对话框实例,包括了对话框的显示方法及后期绑定具体用法,需要的朋友可以参考下...2020-06-25
  • android自定义带箭头对话框

    这篇文章主要为大家详细介绍了android自定义带箭头对话框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-14
  • android开发 Activity设置模拟对话框效果

    对话框在手机app中应用非常广,本文我们主要通过Activity实现弹出模拟对话框的步骤,这样模拟的好处是可以自定义样式,UI友好。 来先看下效果,有个感性的认识。中间那个...2016-09-20
  • 基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)

    这是一款基于jQuery的弹出对话框插件,这个jQuery对话框插件的最大特点是弹出和关闭都带有非常炫酷的动画特效,需要的朋友参考下吧...2016-02-26
  • Winform OpenFileDialog打开文件对话框

    这篇文章主要为大家详细介绍了Winform OpenFileDialog打开文件对话框 的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
  • MFC设置对话框焦点的方法简述

    这篇文章主要介绍了MFC设置对话框焦点的方法简述,主要讲述了两种实现方法,需要的朋友可以参考下...2020-04-25
  • 深入解析:打造自动消失的对话框

    本篇文章是对打造自动消失的对话框进行了详细的分析介绍,需要的朋友参考下...2020-06-25
  • VS2012下QT creator登录对话框设计

    这篇文章主要为大家详细介绍了VS2012下QT creator登录对话框的设计,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
  • android 对话框弹出位置和透明度详解

    本文章来给大家介绍android 对话框弹出位置和透明度详解,有需要的同学可参考,本文章总结了各种在安卓开发中话框弹透明实现方法,各位同学可参考。 分析 1、调整对...2016-09-20