WPF自定义控件之带倒计时的按钮--Button

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的更多相关文章

[转]WPF自定义控件之带倒计时的按钮--Button
1.说明之前做过一个小项目,点击按钮,按钮进入倒计时无效状态,计时完成后,恢复原样,现在就实现该效果---带倒计时的按钮 2.效果 1)正常状态 2)MouseOver( ...
WPF自定义控件与样式(2)-自定义按钮FButton
一．前言.效果图申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 还是先看看效果 ...
【转】WPF自定义控件与样式(2)-自定义按钮FButton
一．前言.效果图申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等还是先看看效果图吧: 定义Button按钮名称叫FButton,主要是集成了 ...
WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展
一．前言.预览申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要是对文本 ...
WPF自定义控件与样式(15)-终结篇 & 系列文章索引 & 源码共享
系列文章目录 WPF自定义控件与样式(1)-矢量字体图标(iconfont) WPF自定义控件与样式(2)-自定义按钮FButton WPF自定义控件与样式(3)-TextBox & Ric ...
WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展
一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 日历控 ...
WPF自定义控件与样式(12)-缩略图ThumbnailImage /gif动画图/图片列表
一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要针对WPF项目 ...
WPF自定义控件与样式(14)-轻量MVVM模式实践
一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. MVVM是WPF中一个非 ...
WPF自定义控件与样式(15)-终结篇
原文:WPF自定义控件与样式(15)-终结篇系列文章目录 WPF自定义控件与样式(1)-矢量字体图标(iconfont) WPF自定义控件与样式(2)-自定义按钮FButton WPF自定义控件与 ...

随机推荐

浅谈JS执行环境及作用域
今天刚刚开通博客,也是第一次写博文,略感紧张.作为一个表达能力弱弱的人来说,自己花三分钟理解一个知识点,当别人问起时,也许需要30分钟才只是让别人知道自己在说什么,一点也不夸张,希望在博客上可以练习 ...
JDK的安装
安装jdk解压拷贝过来的jdk(1.6版本)压缩包 cd /usr/local/tar xzvf /tmp/jdk.tgz 修改环境变量vi /etc/profile 加入如下内容export JAV ...
【线性结构上的动态规划】UVa 11584 - Partitioning by Palindromes
回文串问题.给出一个字符串,问最少可以划分为多少个字符串子串. 对于判断是否为回文串,对于不是很长的字符串,可以采取直接暴力,即从两边向中间收缩判断字符相等. bool is_pali(int l, ...
poj2243
Knight Moves Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 13433 Accepted: 7518 Des ...
Lombok(1.14.8) - @NonNull
@NonNull @NonNull,生成一个非空检查. package com.huey.lombok; import lombok.Getter; import lombok.NonNull; im ...
换模板，修改了一下css，清新多了～
基于elf template,改了一下字体颜色和背景.布局的宽度: 博客园修改css真是方便,如果可以直接编辑template代码就更赞了- 不过相对前端web自定义,我更在意后端的服务器是否稳定: ...
sql常识-union
SQL UNION 操作符 UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每 ...
PHP学习笔记 - 进阶篇（10）
PHP学习笔记 - 进阶篇(10) 异常处理抛出一个异常从PHP5开始,PHP支持异常处理,异常处理是面向对象一个重要特性,PHP代码中的异常通过throw抛出,异常抛出之后,后面的代码将不会再被 ...
java新手笔记30 集合
1.set/list package com.yfs.javase; import java.util.ArrayList; import java.util.Collection; import j ...
40个容易上瘾的HTML5网页游戏,总有一款适合你
我记得姐姐家的孩子在刚刚才学会走路,说话还不能完整的时候就已经能自己用小手点出小游戏的网站来一个人自娱自乐.我一直在想这一代跟着计算机一起茁壮成长的孩子会不会也和美国那一代人一样,出现9岁的黑客和计算 ...

WPF自定义控件之带倒计时的按钮--Button

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

随机推荐

热门专题