WPF自动隐藏的消息框(鼠标放上去将一直显示,移开动画继续),提供normal和error两种边框。
原地址-> http://www.cnblogs.com/yk250/p/5660777.html
介绍:传统的确定,取消,OK,CANCAL之类的对话框太繁琐了,由于项目需要而诞生的仿手机式提示对话框。当然传统的对话框项目中也有,这里就不做介绍了。
出场和退场动画做得很简单,就用Blend随便鼓捣了一番,将就用吧。
预览效果如下:

思路其实很简单:将窗体透明化->布局和样式设计->后台传值调用。
准备工作: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个方面:
静态界面布局:
<Grid HorizontalAlignment="Center" VerticalAlignment="Top" x:Name="back">
<Border Padding="38 0" x:Name="br" HorizontalAlignment="Center" VerticalAlignment="Center">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<ei:ControlStoryboardAction Storyboard="{StaticResource ShowSb}" ControlStoryboardOption="Stop"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<ei:ControlStoryboardAction Storyboard="{StaticResource MouseLeave}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height=""></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height=""></RowDefinition>
</Grid.RowDefinitions> <Border Visibility="Visible" x:Name="grid1" Grid.RowSpan="" RenderTransformOrigin="0.5,0.5" BorderBrush="#00A0E9" BorderThickness="" CornerRadius="">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<Border.Background>
<LinearGradientBrush EndPoint="1,1" MappingMode="RelativeToBoundingBox" StartPoint="0,0">
<GradientStop Color="#EFF0F2" Offset="0.75"/>
<GradientStop Color="#EFF0F2" Offset="0.25"/>
<GradientStop Color="#EFF0F2" Offset=""/>
<GradientStop Color="#EFF0F2"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Border x:Name="grid2" Visibility="Visible" Opacity="" Grid.RowSpan="" RenderTransformOrigin="0.5,0.5" BorderBrush="#F35150" BorderThickness="" CornerRadius="">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<Border.Background>
<LinearGradientBrush EndPoint="1,1" MappingMode="RelativeToBoundingBox" StartPoint="0,0">
<GradientStop Color="#EFF0F2" Offset="0.75"/>
<GradientStop Color="#EFF0F2" Offset="0.25"/>
<GradientStop Color="#EFF0F2" Offset=""/>
<GradientStop Color="#EFF0F2"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<TextBlock Margin="38 0 38 0" Grid.Row="" FontSize="" Foreground="#64676d" x:Name="tb" Text="{Binding Message,RelativeSource={RelativeSource AncestorType=Window},FallbackValue=失败信息}" TextWrapping="Wrap" MinWidth="" VerticalAlignment="Center" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" MaxWidth="" TextAlignment="Center" FontFamily="Microsoft YaHei">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</TextBlock.RenderTransform></TextBlock>
</Grid>
</Grid>
</Border> </Grid>
进入和退出的动画控制:
<Storyboard x:Key="ShowSb" Completed="Storyboard_Completed">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="grid1">
<EasingDoubleKeyFrame KeyTime="" Value="{Binding YOffSet}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value=""/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value=""/>
<EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="{Binding YOffSet}"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="grid2">
<EasingDoubleKeyFrame KeyTime="" Value="{Binding YOffSet}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value=""/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value=""/>
<EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="{Binding YOffSet}"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="tb">
<EasingDoubleKeyFrame KeyTime="" Value="{Binding YOffSet}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value=""/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value=""/>
<EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="{Binding YOffSet}"/>
</DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="MouseLeave" Completed="Storyboard_Completed">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid1">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value=""/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid2">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value=""/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="tb">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value=""/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="grid1">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="{Binding YOffSet}"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="grid2">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="{Binding YOffSet}"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="tb">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="{Binding YOffSet}"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
注意:鼠标移动上去停止动画和移出后快速消失的代码为:
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<ei:ControlStoryboardAction Storyboard="{StaticResource ShowSb}" ControlStoryboardOption="Stop"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<ei:ControlStoryboardAction Storyboard="{StaticResource MouseLeave}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
后台代码逻辑:
private bool iserror = false;
public void Show(string messageBoxText, bool iserror = false)
{
this.iserror = iserror;
this.Message = messageBoxText;
this.Show();
} public OnlyShowMessageBox()
{
InitializeComponent();
this.DataContext = new model() { YOffSet = -300d };
this.Loaded += (y, k) =>
{
this.Top = ;
this.Left = (SystemParameters.WorkArea.Width) / - this.ActualWidth / ;
if (iserror)
{
this.grid1.Visibility = Visibility.Collapsed;
}
else { this.grid2.Visibility = Visibility.Collapsed; }
(this.Resources["ShowSb"] as Storyboard).Begin();
};
} private void Storyboard_Completed(object sender, EventArgs e)
{
this.Close();
}
其中 :
public class model : ModelBase
{
private double YOffset; public double YOffSet
{
get { return YOffset; }
set
{
YOffset = value;
RaisePropertyChangedEvent("YOffSet");
}
} }
其中ModelBase在 可分组的选择框控件(MVVM下)(Toggle样式 仿造单选框RadioButton,复选框CheckBox功能) 中有介绍。
最后,调用方法:
new OnlyShowMessageBox().Show("请注意:前方高能,禁止入内!", false);
或者
new OnlyShowMessageBox().Show("不存在此对象!", true);
WPF自动隐藏的消息框(鼠标放上去将一直显示,移开动画继续),提供normal和error两种边框。的更多相关文章
- WPF实战之一 桌面消息框(右下角消息弹出框)
此版本是根据别人的项目改造的,记录下笔记 原文:https://blog.csdn.net/catshitone/article/details/75089069 一.即时弹出 1.创建弹出框 新建一 ...
- gridview列显示,截取其中前面的几个字显示出来,当鼠标放上去的时候显示全部——使用LinkButton的方法
使用LinkButton的方法<asp:LinkButton ToolTip ='<%#Eval("FilePath") %>' runat="serv ...
- table中td文字超出长度用省略号隐藏超出内容,鼠标点击内容全部显示
1,设置css样式 <style>table {width: 100%;float: left;table-layout:fixed;width:600px;border:1px soli ...
- 基于.Net实现前端对话框和消息框
关于前端对话框.消息框的优秀插件多不胜数.造轮子是为了更好的使用轮子,并不是说自己造的轮子肯定好.所以,这个博客系统基本上都是自己实现的,包括日志记录.响应式布局等等一些本可以使用插件的.好了,废话不 ...
- 一步步开发自己的博客 .NET版(10、前端对话框和消息框的实现)
关于前端对话框.消息框的优秀插件多不胜数.造轮子是为了更好的使用轮子,并不是说自己造的轮子肯定好.所以,这个博客系统基本上都是自己实现的,包括日志记录.响应式布局.评论功能等等一些本可以使用插件的.好 ...
- Delphi 7中的四种消息框
Delphi中平常使用的消息框有四种形式,有ShowMessage.MessageDlg.Application.MessageBox.MessageBox.下面来深入了解下这四种形式的实现和使用.1 ...
- 使用jQuery开发messager消息框插件
1.插件使用 首先引入jquery库,然后引入dialog.js.dialog.css.messager.js.messager.css,如下: <script type="text/ ...
- 代码操作Word时,目录自动更新的两种方法
最近的项目中有一个功能点为:根据分析数据库并生成报告.不过不是大数据.数据挖掘之类,报告的内容.组织方式都是事先固定下来的.实现的方式为,在普通word文档中插入书签制成模板,然后程序使用OpenXM ...
- WPF自定义控件与样式(13)-自定义窗体Window & 自适应内容大小消息框MessageBox
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 自定义 ...
随机推荐
- git submodule 使用
这个是备忘录,原网页: https://medium.com/@porteneuve/mastering-git-submodules-34c65e940407 http://cncc.bingj.c ...
- pyside 添加菜单栏,窗口状态栏,工具栏
这三个放到一起,个人认为比较有可比性. 另外该写的解释我都记到注释里面了 话不多说,show me the code 菜单栏, # ubuntu16.04触发关联事件不成功,应该是ubantu的全局窗 ...
- Getting Real 开发宝典
此书是管理者.程序员或设计师必学的宝典.它以更小的规模,更快的速度,更高的质量来完成软件开发,使产品更简单.粗暴(精致). 近百条精炼总结,不要奢望一次全部记住或理解,只要能理解或做到 ...
- (转)Three challenges you’re going to face when building a chatbot
转自:https://blog.infermedica.com/three-challenges-youre-going-to-face-when-building-a-chatbot/ ...
- memcache/memcached安装教程并应用Tinkphp3.2
在自己的新程序中打算全面应用memcached技术,这个很容易理解这是memcached是内存缓存,但是怎么还有memcache呢?其实很简单,memcache是php的一个扩展,用于php管理mem ...
- HYPER V 文件共享 复制文件 共享硬盘 来宾服务
虚拟机的设置 --> 集成服务 –> 来宾服务 勾选 文件就可以在本地机器和虚拟机上来回复制了. 他可让 Hyper-V 管理员在运行虚拟机的同时将文件复制到虚拟机,且无需使 ...
- 验证视图状态MAC失败。如果此应用程序由网络场或群集承载,请确保配置指定了相同的validationKey和验证算法(转)
原文转自:http://www.cnblogs.com/Setme/archive/2012/06/05/2537084.html 验证视图状态 MAC 失败.如果此应用程序由网络场或群集承载,请确保 ...
- Centos7的安装、Docker1.12.3的安装,以及Docker Swarm集群的简单实例
目录 [TOC] 1.环境准备 本文中的案例会有四台机器,他们的Host和IP地址如下 c1 -> 10.0.0.31 c2 -> 10.0.0.32 c3 -> 10.0.0. ...
- PHPStorm 调式JS /同时调式PHP和jS
PHPStorm 调式JS /同时调式PHP和jS 一.PHPStorm 调式Javascript 在PHP Storm中创建test.html <!DOCTYPE html> <h ...
- windows 自带的 端口映射 端口转向功能
安装IPV6 netsh interface ipv6 install查看 netsh interface portproxy show all添加 netsh interface portproxy ...