How to change button color depending on trigger?

Question

WPF

Hello)

My xaml code:

<Button Height="30" Width="100" Background="Red">
                        <Button.Triggers>
                            <EventTrigger RoutedEvent="MouseEnter">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" To="Purple"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="MouseLeave">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" To="Red"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="MouseDown">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" To="Black"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </Button.Triggers>
                    </Button>

But it doesn't work as expected:
On hover, the color of the button changes to blue instead of purple:

spoiler

Although after moving the pointer away from the button, the color smoothly flows from purple to red:

spoiler

What can be done?

Answer 1

Good afternoon. You probably need to create a button template. Here is an example based on Matthew McDonald's book

<Window.Resources>
        <!--шаблон кнопки-->
        <ControlTemplate x:Key="buttonTemplate1" TargetType="{x:Type Button}">         
            <Border Name="border" BorderBrush="Black" BorderThickness="1" CornerRadius="0" Background="Red"  TextBlock.Foreground="Black">
                <Grid>
                    <Rectangle Name="focusCue" Visibility="Hidden" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2" SnapsToDevicePixels="True"></Rectangle>
                    <ContentPresenter Margin="{TemplateBinding Padding}" HorizontalAlignment="Center"  RecognizesAccessKey="True"></ContentPresenter>
                </Grid>
            </Border>
            <ControlTemplate.Triggers>              
                <EventTrigger RoutedEvent="MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color" To="Purple" >
                            </ColorAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color" >
                            </ColorAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <Trigger Property="IsPressed" Value="true">
                    <Setter TargetName="border" Property="Background" Value="IndianRed"></Setter>
                    <Setter TargetName="border" Property="BorderBrush" Value="DarkKhaki"></Setter>
                </Trigger>
                <Trigger Property="IsFocused" Value="true">
                    <Setter TargetName="focusCue" Property="Visibility" Value="Visible"></Setter>
                </Trigger>
                <Trigger Property="IsEnabled" Value="false">
                    <Setter TargetName="border" Property="TextBlock.Foreground" Value="Gray"></Setter>
                    <Setter TargetName="border" Property="Background" Value="MistyRose"></Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <Style x:Key="newButtonStyle" TargetType="Button">
            <Setter Property="Control.Template" Value="{StaticResource buttonTemplate1}"></Setter>
        </Style>
    </Window.Resources>
    <StackPanel>      
        <Button Height="30" Width="100" Margin="10" Style="{StaticResource newButtonStyle}">            
        </Button>
    </StackPanel>