提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  硬件

当前栏目

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

自动 深入 解析 打造 消失 对话框
2023-06-13 09:14:53 时间

原理：使用Popup控件，并且设置Popup控件的位置居中。

1：新建自定义控件PopupBorder,作为Popup的child。代码如下：

复制代码代码如下:

<UserControlx: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>
       <Storyboardx:Name="myStoryboard">
           <DoubleAnimation
               Storyboard.TargetName="LayoutRoot"
               Storyboard.TargetProperty="Opacity"
                   From="1.0"To="0"Duration="0:0:1"
                   AutoReverse="True"/>
       </Storyboard>
   </UserControl.Resources>

   <Gridx:Name="LayoutRoot">
       <!--<BorderBackground="#FFCC0D0D"BorderThickness="0"CornerRadius="5">-->
       <BorderBorderThickness="0"CornerRadius="5">
           <Border.Background>
               <LinearGradientBrushEndPoint="0.5,1"StartPoint="0.5,0">
                   <GradientStopColor="#FF27A3D7"Offset="0.51"/>
                   <GradientStopColor="#FF76C2E1"Offset="0.004"/>
                   <GradientStopColor="#FF27A3D7"Offset="1"/>
               </LinearGradientBrush>
           </Border.Background>
           <Border.Effect>
               <DropShadowEffectBlurRadius="10"Color="#FFCC0D0D"ShadowDepth="0"/>
           </Border.Effect>
           <TextBlockx:Name="txtMessage"HorizontalAlignment="Center"Margin="10"VerticalAlignment="Center"
                      FontSize="28"Foreground="White"FontFamily="ComicSansMS"
                      >ThisisaSimpleExample</TextBlock>
       </Border>
   </Grid>
</UserControl>


 

新建PopupDemo页面，代码如下：
复制代码代码如下:

<Gridx:Name="LayoutRoot">
       <StackPanel>
           <ButtonContent="Show"Click="ShowPopup_Clicked"></Button>
       </StackPanel>
   </Grid>

后台cs代码为：
复制代码代码如下:
privatevoidShowPopup_Clicked(objectsender,RoutedEventArgse)
       {
           Popuppopup=newPopup();

           //设置popup的Child属性为自定义的用户控件。
            popup.Child=newPopupBorder();
           popup.IsOpen=true;
       }


复制代码代码如下:
popUp.LayoutUpdated+=delegate
           {
               popUp.Margin=newThickness(
                       (App.Current.Host.Content.ActualWidth-pborder.ActualWidth)/2,
                       (App.Current.Host.Content.ActualHeight-pborder.ActualHeight)/2,
                       0,
                       0);
           };

完整的代码如下：
复制代码代码如下:
PopupBorderpborder=newPopupBorder();

PopuppopUp=newPopup();

//设置popup的Child属性为自定义的用户控件。
popUp.Child=pborder;
popUp.LayoutUpdated+=delegate
{
   popUp.Margin=newThickness(
           (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=newThickness(
                       (App.Current.Host.Content.ActualWidth-pborder.ActualWidth)/2,
                       (App.Current.Host.Content.ActualHeight-pborder.ActualHeight)/2,
                       0,
                       0);

               System.Threading.Timertimer=newSystem.Threading.Timer(
                   (state)=>
                   {
                       popUp.Dispatcher.BeginInvoke(()=>
                       {
                           popUp.IsOpen=false;
                       });
                   },null,500,500);
           };


在过了500秒后，将popUp.IsOpen设置为false。

运行可以发现窗口可以自动消失了。

 

可以看到弹出窗口一下就关闭了，那么能不能慢慢的渐变的消失呢？？

为了实现渐变的消失，那么就应该使用动画了。

首先在PopupBorder中增加

复制代码代码如下:
<UserControl.Resources>
       <Storyboardx: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类：

代码如下：

复制代码代码如下:
publicclassMessageBoxHelper
{
   #region提示消?息¡é

   ///<summary>
   ///弹出提示消息标题为提示，按钮为确定
   ///</summary>
   ///<paramname="msg"></param>
   publicstaticvoidShowMessage(stringmsg)
   {
       //ShowFriendMessage(msg,"提示",MessageBoxButton.OK);

       PopupBorderpborder=newPopupBorder();
       pborder.txtMessage.Text=""+msg+"";

       pborder.UpdateLayout();

       PopuppopUp=newPopup();
       popUp.Child=pborder;


       pborder.myStoryboard.Completed+=delegate
       {
           popUp.IsOpen=false;
       };
       pborder.myStoryboard.Begin();


       popUp.InvokeOnLayoutUpdated(()=>
       {
           popUp.Margin=newThickness(
               (App.Current.Host.Content.ActualWidth-pborder.ActualWidth)/2,
               (App.Current.Host.Content.ActualHeight-pborder.ActualHeight)/2,
               0,
               0);

           System.Threading.Timertimer=newSystem.Threading.Timer(
               (state)=>
               {
                   popUp.Dispatcher.BeginInvoke(()=>
                   {
                       popUp.IsOpen=false;
                   });
               },null,500,500);
       });
       popUp.IsOpen=true;

   }

   ///<summary>
   ///弹出提示消息按钮为确定
   ///</summary>
   ///<paramname="msg"></param>
   publicstaticvoidShowMessage(stringmsg,stringtitle)
   {
       ShowMessage(msg,title,MessageBoxButton.OK);
   }

   ///<summary>
   ///弹出提示消息
   ///</summary>
   ///<paramname="msg"></param>
   publicstaticvoidShowMessage(stringmsg,stringtitle,MessageBoxButtonbuttons)
   {
       MessageBox.Show(msg,title,buttons);
   }

   #endregion
}


使用的时候只需要MessageBoxHelper.ShowMessage(“HelloWorld”);就可以了。注意别忘记了PopupBorder控件。

相关文章