WPF Button ControlTemplate EventTrigger RoutedEvent BeginStoryboard Storyboard ColorAnimation Storyboard.TargetName Storyboard.TargetProperty To Duration
<Window x:Class="WpfApp156.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WpfApp156" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Window.Resources> <ControlTemplate x:Key="btnTemplate" TargetType="{x:Type Button}"> <Border BorderBrush="Orange" BorderThickness="5" CornerRadius="10" Background="Red" TextBlock.Foreground="Black"> <ContentPresenter/> </Border> </ControlTemplate> <ControlTemplate x:Key="btn2Template" TargetType="{x:Type Button}"> <Border x:Name="border" BorderBrush="Orange" BorderThickness="5" CornerRadius="2" Background="Red" TextBlock.Foreground="Black"> <Grid> <Rectangle x:Name="focusCue" Visibility="Hidden" Stroke="Black" StrokeThickness="5" StrokeDashArray="1 2" SnapsToDevicePixels="True"> </Rectangle> <ContentPresenter RecognizesAccessKey="True" Margin="{TemplateBinding Padding}"></ContentPresenter> </Grid> </Border> <ControlTemplate.Triggers> <EventTrigger RoutedEvent="MouseEnter"> <BeginStoryboard> <Storyboard> <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color" To="Blue" Duration="0:0:2" AutoReverse="False" RepeatBehavior="Forever" /> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="MouseLeave"> <BeginStoryboard> <Storyboard> <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color" To="White" Duration="0:0:2"/> </Storyboard> </BeginStoryboard> </EventTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Window.Resources> <StackPanel Margin="5"> <Button Template="{StaticResource btnTemplate}" Padding="5" Margin="5">First Button</Button> <Button Template="{StaticResource btn2Template}" Padding="5" Margin="5">Second Button</Button> </StackPanel> </Window>