Set BorderBrush property color for border on left button mouse click in WPF

Question

First of all,sorry I am very new in WPF...

I have a button with a border around it. Now, bottom border change color to orange on mouse over the button but now I need to change bottom border color to green on mouse click (left button mouse) without success.

Below code:

<Button  Height="64" Width="64" Margin="10" Click="BtnDelete" Content="Delete">
    <Button.Template>
        <ControlTemplate>
            <Border x:Name="BtnDeleteBorder" BorderBrush="Transparent" BorderThickness="0 0 0 3">
                <StackPanel>
                    <Image Height="36" Width="36" Stretch="UniformToFill" Source="Resources/Trash.png"/>
                    <Label  HorizontalAlignment="Center">Delete</Label>
                </StackPanel>
            </Border>

            <ControlTemplate.Resources>

                <Storyboard x:Key="toggleBorderColor">
                    <ColorAnimationUsingKeyFrames  Storyboard.TargetName="BtnDeleteBorder" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                        <SplineColorKeyFrame  Value="Green"/>
                    </ColorAnimationUsingKeyFrames>                                        
                </Storyboard>

          </ControlTemplate.Resources>

          <ControlTemplate.Triggers>

                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="BtnDeleteBorder" Property="BorderBrush" Value="Orange" />
                </Trigger>

                <EventTrigger RoutedEvent="MouseLeftButtonDown">
                    <BeginStoryboard Storyboard="{StaticResource toggleBorderColor}"/>                                        
                </EventTrigger>

            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>

To change color on mouse over the button I have used a typical trigger but since for on mouse left button down there is no such trigger property I have used in this case and event trigger. Anyway when I left click on the button, bottom border is not changing color to green.

Answer 1

Move triggers to Style

<Style x:Key="UnderlinedButton"
       TargetType="{x:Type Button}">
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0 0 0 3"/>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="BorderBrush" Value="Orange" />
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="BorderBrush" Value="Green" />
        </Trigger>
    </Style.Triggers>
</Style>

and apply this style to your button

<Button Height="64"
        Width="64"
        Margin="10"
        Click="BtnDelete"
        Content="Delete"
        Style="{StaticResource UnderlinedButton}">
    <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                <StackPanel>
                    <Image Height="36"
                           Width="36"
                           Stretch="UniformToFill"
                           Source="Resources/Trash.png"/>
                    <Label HorizontalAlignment="Center"
                           Content="{TemplateBinding Content}"/>
                </StackPanel>
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

Use TemplateBinding for BorderBrush, BorderThickness and Content.