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

1.说明

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

2.效果

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

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

3.XAML代码

 1 <!--冷却计时按钮样式-->
       <!--通过修改颜色值参数，以更改按钮颜色样式，更多修改，还请自行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"/>

<!--总样式-->

2     <Style x:Key="TimerBtnStyle" TargetType="{x:Type Button}">
           <Setter Property="FontSize" Value="14"/>73         <Setter Property="Foreground" Value="{StaticResource ButtonForeground}"/> 3         <Setter Property="MinHeight" Value="25"/>
 4         <Setter Property="Template">
 5             <Setter.Value>
 6                 <ControlTemplate TargetType="{x:Type Button}">
 7                     <Grid>
 8                         <Rectangle x:Name="rectangle" Margin="0" StrokeThickness="0" Fill="{StaticResource RectangleFill}"/>
 9                         <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" Margin="0" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
10                     </Grid>
11                     <ControlTemplate.Triggers>
12                         <EventTrigger RoutedEvent="Button.Click">
13                             <BeginStoryboard>
14                                 <Storyboard FillBehavior="Stop">
15                                     <StringAnimationUsingKeyFrames Storyboard.TargetProperty="(ContentPresenter.Content)" Storyboard.TargetName="contentPresenter">
16                                         <DiscreteStringKeyFrame KeyTime="0" Value="已提交"/>
17                                         <DiscreteStringKeyFrame KeyTime="0:0:1" Value="等待(30)"/>
18                                         <DiscreteStringKeyFrame KeyTime="0:0:2" Value="等待(29)"/>
19                                         <DiscreteStringKeyFrame KeyTime="0:0:3" Value="等待(28)"/>
20                                         <DiscreteStringKeyFrame KeyTime="0:0:4" Value="等待(27)"/>
21                                         <DiscreteStringKeyFrame KeyTime="0:0:5" Value="等待(26)"/>
22                                         <DiscreteStringKeyFrame KeyTime="0:0:6" Value="等待(25)"/>
23                                         <DiscreteStringKeyFrame KeyTime="0:0:7" Value="等待(24)"/>
24                                         <DiscreteStringKeyFrame KeyTime="0:0:8" Value="等待(23)"/>
25                                         <DiscreteStringKeyFrame KeyTime="0:0:9" Value="等待(22)"/>
26                                         <DiscreteStringKeyFrame KeyTime="0:0:10" Value="等待(21)"/>
27                                         <DiscreteStringKeyFrame KeyTime="0:0:11" Value="等待(20)"/>
28                                         <DiscreteStringKeyFrame KeyTime="0:0:12" Value="等待(19)"/>
29                                         <DiscreteStringKeyFrame KeyTime="0:0:13" Value="等待(18)"/>
30                                         <DiscreteStringKeyFrame KeyTime="0:0:14" Value="等待(17)"/>
31                                         <DiscreteStringKeyFrame KeyTime="0:0:15" Value="等待(16)"/>
32                                         <DiscreteStringKeyFrame KeyTime="0:0:16" Value="等待(15)"/>
33                                         <DiscreteStringKeyFrame KeyTime="0:0:17" Value="等待(14)"/>
34                                         <DiscreteStringKeyFrame KeyTime="0:0:18" Value="等待(13)"/>
35                                         <DiscreteStringKeyFrame KeyTime="0:0:19" Value="等待(12)"/>
36                                         <DiscreteStringKeyFrame KeyTime="0:0:20" Value="等待(11)"/>
37                                         <DiscreteStringKeyFrame KeyTime="0:0:21" Value="等待(10)"/>
38                                         <DiscreteStringKeyFrame KeyTime="0:0:22" Value="等待(09)"/>
39                                         <DiscreteStringKeyFrame KeyTime="0:0:23" Value="等待(08)"/>
40                                         <DiscreteStringKeyFrame KeyTime="0:0:24" Value="等待(07)"/>
41                                         <DiscreteStringKeyFrame KeyTime="0:0:25" Value="等待(06)"/>
42                                         <DiscreteStringKeyFrame KeyTime="0:0:26" Value="等待(05)"/>
43                                         <DiscreteStringKeyFrame KeyTime="0:0:27" Value="等待(04)"/>
44                                         <DiscreteStringKeyFrame KeyTime="0:0:28" Value="等待(03)"/>
45                                         <DiscreteStringKeyFrame KeyTime="0:0:29" Value="等待(02)"/>
46                                         <DiscreteStringKeyFrame KeyTime="0:0:30" Value="等待(01)"/>
47                                         <DiscreteStringKeyFrame KeyTime="0:0:31" Value="等待(00)"/>
48                                     </StringAnimationUsingKeyFrames>
49                                     <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.IsEnabled)">
50                                         <DiscreteBooleanKeyFrame KeyTime="0" Value="False"/>
51                                         <DiscreteBooleanKeyFrame KeyTime="0:0:32" Value="True"/>
52                                     </BooleanAnimationUsingKeyFrames>
53                                 </Storyboard>
54                             </BeginStoryboard>
55                         </EventTrigger>
56                         <Trigger Property="IsFocused" Value="True"/>
57                         <Trigger Property="IsDefaulted" Value="True"/>
58                         <Trigger Property="IsMouseOver" Value="True">
59                             <Setter Property="Fill" TargetName="rectangle" Value="{StaticResource MouseOverFill}"/>
60                         </Trigger>
61                         <Trigger Property="IsPressed" Value="True">
62                             <Setter Property="Fill" TargetName="rectangle" Value="{StaticResource PressedFill}"/>
63                         </Trigger>
64                         <Trigger Property="IsEnabled" Value="False">
65                             <Setter Property="Fill" TargetName="rectangle" Value="{StaticResource EnabledFill}"/>
66                             <Setter Property="OpacityMask" TargetName="contentPresenter" Value="{StaticResource EnabledOpacityMask}"/>
67                         </Trigger>
68                     </ControlTemplate.Triggers>
69                 </ControlTemplate>
70             </Setter.Value>
71         </Setter>
72     </Style>

4.应用

1 <Button Width="65" Content="提交请求" FontSize="14" Style="{StaticResource TimerBtnStyle}" />

5.总结

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

原文地址：https://www.cnblogs.com/lonelyxmas/p/12154027.html

时间： 2024-08-04 17:15:43

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

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

一．前言.效果图还是先看看效果图吧: 定义Button按钮名称叫FButton,主要是集成了字体图标(参考上一篇:WPF自定义控件与样式1-矢量字体图标(iconfont)).其实在WPF里,要实现本文FButton的需求,完全可以不用自定义控件,使用样式.模板就可以搞定了的. 二．按钮FButton控件定义 2.1 FButton继承自微软基础控件Button (C#代码) FButton继承自微软基础控件Button,没有什么逻辑代码,主要扩展了几个属性: 控件外观控制的属性,如圆角.

WPF自定义控件Textbox 带水印以及错误信息显示_02

前面写过一篇关于TextBox自定义控件带水印以及错误信息显示的随笔但是有一些BUG和一些功能不全面这次基本补全算是对上一篇的完善和升级. 前面只是实现了基本的水印信息以及错误信息显示.缺少了部分其他的功能这次增加了以下功能: 1.限定textbox文本框输入长度 2.修复错误信息显示BUG. 3.更改显示样式 4.修改默认值赋值问题先给大家来张图片看看先贴出后台代码 public partial class SelfWateMarkTextbox : System.Windows

WPF自定义控件Textbox 带水印以及错误信息显示

经常做信息编辑界面的时候遇到需要水印功能,还有错误信息显示,必填项显示等功能.没有统一的样式规范很麻烦.正好最近调整界面,在网上查找了些资料,自己写了一个TextBox控件,带有水印功能,是否必填项,以及错误信息的显示. 我语言组织不行,直接上代码界面代码 <UserControl x:Class="TextBoxEdit.SelfWateMarkTextbox" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/

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

原文:WPF自定义控件与样式(12)-缩略图ThumbnailImage /gif动画图/图片列表一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要针对WPF项目开发中图片的各种使用问题,经过总结,把一些经验分享一下.内容包括: WPF常用图像数据源ImageSource的创建: 自定义缩略图控件ThumbnailImage,支持网络图片.大图片.图片异步加载

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

一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 日历控件Calendar自定义样式: 日期控件DatePicker自定义样式,及Label标签.水印.清除日期功能扩展: 二．Calendar自定义样式先看看效果: 从上面图可以看出,日历的显示其实有三种状态,如下面的分解图: "日"部分的显示: "月"部分的显示: &qu

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

原文:WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式.水印.Label标签.功能扩展一．前言.预览申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要是对文本输入控件进行样式开发,及相关扩展功能开发,主要内容包括: 基本文本框TextBox控件样式及扩展功能,实现了样式.水印.Label标签.功能扩展: 富

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

原文:WPF自定义控件与样式(15)-终结篇系列文章目录 WPF自定义控件与样式(1)-矢量字体图标(iconfont) WPF自定义控件与样式(2)-自定义按钮FButton WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式.水印.Label标签.功能扩展 WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式 WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展

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

一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. MVVM是WPF中一个非常实用的编程模式,充分利用了WPF的绑定机制,体现了WPF数据驱动的优势. 图片来源:(WPF的MVVM) 关于MVVM网上很多介绍或者示例,本文不多做介绍了,本文的主要目的是提供一个轻量级的View Model实现,本文的主要内容: 依赖通知InotifyPropertyChanged实现: 命

WPF自定义控件与样式(7)-列表控件DataGrid与ListView自定义样式

一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: DataGrid自定义样式: ListView自定义样式: 二．DataGrid自定义样式 DataGrid是常用的数据列表显示控件,先看看实现的效果(动态图,有点大): DataGrid控件样式结构包括以下几个部分: 列头header样式调整列头宽度的列分割线样式行样式行头调整高度样式行头部样式