WPF自动隐藏的消息框(鼠标放上去将一直显示,移开动画继续),提供normal和error两种边框。

摘要:
名称=“br”水平对齐=“中心”垂直对齐=“中间”>交互。触发器>EventTriggerEventName=“鼠标输入”>EventTriggerEventName=“MouseLeave”>

原地址-> http://www.cnblogs.com/yk250/p/5660777.html

介绍:传统的确定,取消,OK,CANCAL之类的对话框太繁琐了,由于项目需要而诞生的仿手机式提示对话框。当然传统的对话框项目中也有,这里就不做介绍了。

出场和退场动画做得很简单,就用Blend随便鼓捣了一番,将就用吧。

预览效果如下:

WPF自动隐藏的消息框(鼠标放上去将一直显示,移开动画继续),提供normal和error两种边框。第1张

思路其实很简单:将窗体透明化->布局和样式设计->后台传值调用。

准备工作:Microsoft.Expression.Interactions.dll和System.Windows.Interactivity.dll的引用。Blend中大多数行为需要需要这2个dll,必备啊!

1,将窗体透明化,无边框化:(在.net 4.5中 拖动和缩放窗体再也不用自己写代码了,集成的 <WindowChrome/>就可以实现拖动缩放窗体等诸多功能。)

关键设置如下:

AllowsTransparency="True" HorizontalAlignment="Center" Background="Transparent"  xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" WindowStyle="None"

2,布局,主要包括初始布局和动画过渡2个方面:

静态界面布局:

WPF自动隐藏的消息框(鼠标放上去将一直显示,移开动画继续),提供normal和error两种边框。第2张WPF自动隐藏的消息框(鼠标放上去将一直显示,移开动画继续),提供normal和error两种边框。第3张
 1 <Grid   HorizontalAlignment="Center" VerticalAlignment="Top" x:Name="back">
 2         <Border Padding="38 0" x:Name="br" HorizontalAlignment="Center" VerticalAlignment="Center">
 3             <i:Interaction.Triggers>
 4                 <i:EventTrigger EventName="MouseEnter">
 5                     <ei:ControlStoryboardAction Storyboard="{StaticResource ShowSb}" ControlStoryboardOption="Stop"/>
 6                 </i:EventTrigger>
 7                 <i:EventTrigger EventName="MouseLeave">
 8                     <ei:ControlStoryboardAction Storyboard="{StaticResource MouseLeave}"/>
 9                 </i:EventTrigger>
10             </i:Interaction.Triggers>
11             <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
12                 <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
13                     <Grid.RowDefinitions>
14                         <RowDefinition Height="12"></RowDefinition>
15                         <RowDefinition Height="auto"></RowDefinition>
16                         <RowDefinition Height="12"></RowDefinition>
17                     </Grid.RowDefinitions>
18 
19                     <Border Visibility="Visible" x:Name="grid1"  Grid.RowSpan="3" RenderTransformOrigin="0.5,0.5"  BorderBrush="#00A0E9" BorderThickness="1" CornerRadius="8">
20                         <Border.RenderTransform>
21                             <TransformGroup>
22                                 <ScaleTransform/>
23                                 <SkewTransform/>
24                                 <RotateTransform/>
25                                 <TranslateTransform/>
26                             </TransformGroup>
27                         </Border.RenderTransform>
28                         <Border.Background>
29                             <LinearGradientBrush EndPoint="1,1" MappingMode="RelativeToBoundingBox" StartPoint="0,0">
30                                 <GradientStop Color="#EFF0F2" Offset="0.75"/>
31                                 <GradientStop Color="#EFF0F2" Offset="0.25"/>
32                                 <GradientStop Color="#EFF0F2" Offset="1"/>
33                                 <GradientStop Color="#EFF0F2"/>
34                             </LinearGradientBrush>
35                         </Border.Background>
36                     </Border>
37                     <Border  x:Name="grid2" Visibility="Visible" Opacity="1" Grid.RowSpan="3" RenderTransformOrigin="0.5,0.5"  BorderBrush="#F35150" BorderThickness="1" CornerRadius="8">
38                         <Border.RenderTransform>
39                             <TransformGroup>
40                                 <ScaleTransform/>
41                                 <SkewTransform/>
42                                 <RotateTransform/>
43                                 <TranslateTransform/>
44                             </TransformGroup>
45                         </Border.RenderTransform>
46                         <Border.Background>
47                             <LinearGradientBrush EndPoint="1,1" MappingMode="RelativeToBoundingBox" StartPoint="0,0">
48                                 <GradientStop Color="#EFF0F2" Offset="0.75"/>
49                                 <GradientStop Color="#EFF0F2" Offset="0.25"/>
50                                 <GradientStop Color="#EFF0F2" Offset="1"/>
51                                 <GradientStop Color="#EFF0F2"/>
52                             </LinearGradientBrush>
53                         </Border.Background>
54                     </Border>
55                     <TextBlock   Margin="38 0 38 0" Grid.Row="1" FontSize="16" Foreground="#64676d"  x:Name="tb" Text="{Binding Message,RelativeSource={RelativeSource AncestorType=Window},FallbackValue=失败信息}" TextWrapping="Wrap" MinWidth="200" VerticalAlignment="Center" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" MaxWidth="600" TextAlignment="Center" FontFamily="Microsoft YaHei">
56                         <TextBlock.RenderTransform>
57                             <TransformGroup>
58                                 <ScaleTransform/>
59                                 <SkewTransform/>
60                                 <RotateTransform/>
61                                 <TranslateTransform/>
62                             </TransformGroup>
63                         </TextBlock.RenderTransform></TextBlock>
64                 </Grid>
65             </Grid>
66         </Border>
67 
68     </Grid>
View Code

进入和退出的动画控制:

WPF自动隐藏的消息框(鼠标放上去将一直显示,移开动画继续),提供normal和error两种边框。第4张WPF自动隐藏的消息框(鼠标放上去将一直显示,移开动画继续),提供normal和error两种边框。第5张
 1  <Storyboard x:Key="ShowSb" Completed="Storyboard_Completed">
 2             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="grid1">
 3                 <EasingDoubleKeyFrame KeyTime="0" Value="{Binding YOffSet}"/>
 4                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
 5                 <EasingDoubleKeyFrame KeyTime="0:0:3" Value="0"/>
 6                 <EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="{Binding YOffSet}"/>
 7             </DoubleAnimationUsingKeyFrames>
 8             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="grid2">
 9                 <EasingDoubleKeyFrame KeyTime="0" Value="{Binding YOffSet}"/>
10                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
11                 <EasingDoubleKeyFrame KeyTime="0:0:3" Value="0"/>
12                 <EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="{Binding YOffSet}"/>
13             </DoubleAnimationUsingKeyFrames>
14             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="tb">
15                 <EasingDoubleKeyFrame KeyTime="0" Value="{Binding YOffSet}"/>
16                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
17                 <EasingDoubleKeyFrame KeyTime="0:0:3" Value="0"/>
18                 <EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="{Binding YOffSet}"/>
19             </DoubleAnimationUsingKeyFrames>
20 
21         </Storyboard>
22 
23         <Storyboard x:Key="MouseLeave" Completed="Storyboard_Completed">
24             <DoubleAnimationUsingKeyFrames   Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid1">
25                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
26             </DoubleAnimationUsingKeyFrames>
27             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid2">
28                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
29             </DoubleAnimationUsingKeyFrames>
30             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="tb">
31                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
32             </DoubleAnimationUsingKeyFrames>
33             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="grid1">
34                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="{Binding YOffSet}"/>
35             </DoubleAnimationUsingKeyFrames>
36             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="grid2">
37                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="{Binding YOffSet}"/>
38             </DoubleAnimationUsingKeyFrames>
39             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="tb">
40                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="{Binding YOffSet}"/>
41             </DoubleAnimationUsingKeyFrames>
42         </Storyboard>
View Code

注意:鼠标移动上去停止动画和移出后快速消失的代码为:

1  <i:Interaction.Triggers>
2                 <i:EventTrigger EventName="MouseEnter">
3                     <ei:ControlStoryboardAction Storyboard="{StaticResource ShowSb}" ControlStoryboardOption="Stop"/>
4                 </i:EventTrigger>
5                 <i:EventTrigger EventName="MouseLeave">
6                     <ei:ControlStoryboardAction Storyboard="{StaticResource MouseLeave}"/>
7                 </i:EventTrigger>
8             </i:Interaction.Triggers>

后台代码逻辑:

 1         private bool iserror = false;
 2         public void Show(string messageBoxText, bool iserror = false)
 3         {
 4             this.iserror = iserror;
 5             this.Message = messageBoxText;
 6             this.Show();
 7         }
 8 
 9         public OnlyShowMessageBox()
10         {
11             InitializeComponent();
12             this.DataContext = new model() { YOffSet = -300d };
13             this.Loaded += (y, k) =>
14             {
15                 this.Top = 41;
16                 this.Left = (SystemParameters.WorkArea.Width) / 2 - this.ActualWidth / 2;
17                 if (iserror)
18                 {
19                     this.grid1.Visibility = Visibility.Collapsed;
20                 }
21                 else { this.grid2.Visibility = Visibility.Collapsed; }
22                 (this.Resources["ShowSb"] as Storyboard).Begin();
23             };
24         }
25 
26 
27         private void Storyboard_Completed(object sender, EventArgs e)
28         {
29             this.Close();
30         }

其中 :

 1 public class model : ModelBase
 2     {
 3         private double YOffset;
 4 
 5         public double YOffSet
 6         {
 7             get { return YOffset; }
 8             set
 9             {
10                 YOffset = value;
11                 RaisePropertyChangedEvent("YOffSet");
12             }
13         }
14 
15     }

其中ModelBase在 可分组的选择框控件(MVVM下)(Toggle样式 仿造单选框RadioButton,复选框CheckBox功能) 中有介绍。

最后,调用方法:

  new OnlyShowMessageBox().Show("请注意:前方高能,禁止入内!", false);

  或者

  new OnlyShowMessageBox().Show("不存在此对象!", true);

免责声明:文章转载自《WPF自动隐藏的消息框(鼠标放上去将一直显示,移开动画继续),提供normal和error两种边框。》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇PInvokeStackImbalance, problem tip from MDAJava_如何等待子线程执行结束下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

解决jQuery多个版本,与其他js库冲突方法

jQuery多个版本或和其他js库冲突主要是常用的$符号的问题,这个问题 jquery早早就有给我们预留处理方法了,下面一起来看看解决办法。 1.同一页面jQuery多个版本或冲突解决方法。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="...

tomcat8热部署配置--maven自动发布项目到tomcat8(如何支持远程访问部署)

1、tomcat8实现热部署的配置  我们实现热部署后,自然就可以通过maven操作tomcat了,所以就需要maven取得操作tomcat的权限,现在这一步就是配置tomcat的可操作权限. #进入tomcat安装目录 cd /usr/local/devlop/tomcat #进入conf文件夹修改tomcat-users.xml vim conf/...

pixijs shader 设置透明度的方法

pixijs shader 设置透明度的方法 precision mediump float; varying vec2 vTextureCoord; varying vec4 vColor; uniform sampler2D uSampler; uniform sampler2D noise; uniform float customUniform...

solr的配置文件及其含义

solr与.net系列课程(二)solr的配置文件及其含义        solr与.net系列课程(二)solr的配置文件及其含义        本节内容还是不会涉及到.net与数据库的内容,但是不要着急,这都是学时solr必学要掌握的东西,solr可不是像其他的dll文件一样,只需要引用就能调出方法与数据的,你不配置好是无法使用,前两节主要是起铺垫...

Python实现网页自动化-浏览器查找元素(二)

前言 在上一节中(https://mp.weixin.qq.com/s/lqYEjiqA4eLI59GkDEpKcg)已经部署了Selenium+chromedriver的开发环境,在真正的开发之前,还需要学会利用浏览器来查找网页元素。 因为Selenium是通过程序来自动操控网页的控件元素,比如单击某个按钮、输入文本框内容等,若网页中有多个同类型的元素,...

win32-localtime的使用

下面的例子用于反映本地系统的日期格式变化 // locale test #include <stdio.h> #include <locale.h> #include <time.h> #include <locale> #include <Windows.h> #pragma warning(...