1.说明

之前做过一个小项目，点击按钮，按钮进入倒计时无效状态，计时完成后，恢复原样，现在就实现该效果---带倒计时的按钮

2.效果

1）正常状态               2）MouseOver(只有背景色变化)         3）点击进入无效状态

4）在无效状态下计时              5）恢复正常状态

3.XAML代码 
 <!--冷却计时按钮样式-->

       <!--通过修改颜色值参数，以更改按钮颜色样式，更多修改，还请自行DIY-->
       <SolidColorBrush x:Key="ButtonForeground" Color="#FFF9FBFD"/>
       <SolidColorBrush x:Key="RactangleFill" Color="#FF6EB3F7"/>
       <SolidColorBrush x:Key="MouseOverFill" Color="#FF8CC3F9"/>
       <SolidColorBrush x:Key="PressedFill" Color="#888CC3F9"/>
       <SolidColorBrush x:Key="EnabledFill" Color="#FF6EB3F7"/>
       <SolidColorBrush x:Key="EnabledOpacityMask" Color="#99FFFFFF"/>

       <!--总样式-->

     <Style x:Key="TimerBtnStyle" TargetType="{x:Type Button}">

           <Setter Property="FontSize" Value="14"/>
         <Setter Property="Foreground" Value="{StaticResource ButtonForeground}"/>
         <Setter Property="MinHeight" Value="25"/>

         <Setter Property="Template">

             <Setter.Value>

                 <ControlTemplate TargetType="{x:Type Button}">

                     <Grid>

                         <Rectangle x:Name="rectangle" Margin="0" StrokeThickness="0" Fill="{StaticResource RectangleFill}"/>

                         <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" Margin="0" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>

                     </Grid>

                     <ControlTemplate.Triggers>

                         <EventTrigger RoutedEvent="Button.Click">

                             <BeginStoryboard>

                                 <Storyboard FillBehavior="Stop">

                                     <StringAnimationUsingKeyFrames Storyboard.TargetProperty="(ContentPresenter.Content)" Storyboard.TargetName="contentPresenter">

                                         <DiscreteStringKeyFrame KeyTime="0" Value="已提交"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:1" Value="等待(30)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:2" Value="等待(29)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:3" Value="等待(28)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:4" Value="等待(27)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:5" Value="等待(26)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:6" Value="等待(25)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:7" Value="等待(24)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:8" Value="等待(23)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:9" Value="等待(22)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:10" Value="等待(21)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:11" Value="等待(20)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:12" Value="等待(19)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:13" Value="等待(18)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:14" Value="等待(17)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:15" Value="等待(16)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:16" Value="等待(15)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:17" Value="等待(14)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:18" Value="等待(13)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:19" Value="等待(12)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:20" Value="等待(11)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:21" Value="等待(10)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:22" Value="等待(09)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:23" Value="等待(08)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:24" Value="等待(07)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:25" Value="等待(06)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:26" Value="等待(05)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:27" Value="等待(04)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:28" Value="等待(03)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:29" Value="等待(02)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:30" Value="等待(01)"/>

                                         <DiscreteStringKeyFrame KeyTime="0:0:31" Value="等待(00)"/>

                                     </StringAnimationUsingKeyFrames>

                                     <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.IsEnabled)">

                                         <DiscreteBooleanKeyFrame KeyTime="0" Value="False"/>

                                         <DiscreteBooleanKeyFrame KeyTime="0:0:32" Value="True"/>

                                     </BooleanAnimationUsingKeyFrames>

                                 </Storyboard>

                             </BeginStoryboard>

                         </EventTrigger>

                         <Trigger Property="IsFocused" Value="True"/>

                         <Trigger Property="IsDefaulted" Value="True"/>

                         <Trigger Property="IsMouseOver" Value="True">

                             <Setter Property="Fill" TargetName="rectangle" Value="{StaticResource MouseOverFill}"/>

                         </Trigger>

                         <Trigger Property="IsPressed" Value="True">

                             <Setter Property="Fill" TargetName="rectangle" Value="{StaticResource PressedFill}"/>

                         </Trigger>

                         <Trigger Property="IsEnabled" Value="False">

                             <Setter Property="Fill" TargetName="rectangle" Value="{StaticResource EnabledFill}"/>

                             <Setter Property="OpacityMask" TargetName="contentPresenter" Value="{StaticResource EnabledOpacityMask}"/>

                         </Trigger>

                     </ControlTemplate.Triggers>

                 </ControlTemplate>

             </Setter.Value>

         </Setter>

     </Style>
4.应用 
 <Button Width="65" Content="提交请求" FontSize="14" Style="{StaticResource TimerBtnStyle}" />
5.总结

通过此代码，希望给初学者一些启示，有更多想法的同学，多多批评，不吝赐教。

WPF自定义控件之带倒计时的按钮--Button的更多相关文章

  1. [转]WPF自定义控件之带倒计时的按钮--Button

    1.说明 之前做过一个小项目,点击按钮,按钮进入倒计时无效状态,计时完成后,恢复原样,现在就实现该效果---带倒计时的按钮 2.效果 1)正常状态               2)MouseOver( ...

  2. WPF自定义控件与样式(2)-自定义按钮FButton

    一．前言.效果图 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 还是先看看效果 ...

  3. 【转】WPF自定义控件与样式(2)-自定义按钮FButton

    一．前言.效果图 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等 还是先看看效果图吧:   定义Button按钮名称叫FButton,主要是集成了 ...

  4. WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展

    一．前言.预览 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要是对文本 ...

  5. WPF自定义控件与样式(15)-终结篇 & 系列文章索引 & 源码共享

    系列文章目录  WPF自定义控件与样式(1)-矢量字体图标(iconfont) WPF自定义控件与样式(2)-自定义按钮FButton WPF自定义控件与样式(3)-TextBox & Ric ...

  6. WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 日历控 ...

  7. WPF自定义控件与样式(12)-缩略图ThumbnailImage /gif动画图/图片列表

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要针对WPF项目 ...

  8. WPF自定义控件与样式(14)-轻量MVVM模式实践

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. MVVM是WPF中一个非 ...

  9. WPF自定义控件与样式(15)-终结篇

    原文:WPF自定义控件与样式(15)-终结篇 系列文章目录  WPF自定义控件与样式(1)-矢量字体图标(iconfont) WPF自定义控件与样式(2)-自定义按钮FButton WPF自定义控件与 ...

随机推荐

  1. Android 高级UI设计笔记02：可以拖动交换item位置的GridView（转载）

    如果大家不知道GridView基本使用,可以先参见:Android(java)学习笔记154:使用GridView以及重写BaseAdapter 1. 首先我们明白GridView拖拽的思路: ()根 ...

  2. linux-redhat5找回root密码

    我在虚拟机里装了个redhat(RedhatEnterpriseLinuxASv5.4-x64),也不经常用,偶尔进去用用吧,又把密码忘记了,哎...脑子不好使啊 不知道像ubuntu是不是一样的,还 ...

  3. LeetCode 283

    Move Zeros Given an array nums, write a function to move all 0's to the end of it while maintaining ...

  4. LeetCode 258

    Add Digits Given a non-negative integer num, repeatedly add all its digits until the result has only ...

  5. Spring 循环引用(singleton与prototype初始化的区别)

    原文链接请参见:http://blog.csdn.net/u010723709/article/details/47185959

  6. 转：艾瑞咨询2016 IM云的发展趋势

    转自: http://www.cnblogs.com/lingyunhu/p/rtc63.html

  7. 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10（转）

     在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 <!Doctype html&g ...

  8. 关于css制作圆角

    三个阶段: 1.背景图片: 2.css2.0+标签模拟圆角: 3.css3.0圆角属性(border-radius). 1.1.背景图片--宽度固定,高度自适应圆角 为容器设置宽度 在主体的上方加一个 ...

  9. JQGrid各种参数详解API（转载）

    下面是转自其他人blog的一个学习资料,与其说是学习资料,说成查询帮助文档更加合适. jqGrid学习之 ------------- 安装 jqGrid安装很简单,只需把相应的css.js文件加入到页 ...

  10. 软件包 java.util 的分层结构

    概述  软件包  类  使用   树  已过时  索引  帮助  JavaTM Platform Standard Ed. 6  上一个   下一个 框架    无框架    所有类         ...