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.总结

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