Focus on Label, TextBlock and Border - wpf

Question

I want to create a flat button with rounded right top and bottom corners. This button needs to have the background changed on clicked and on mouse over.
Currently my Markup looks like this:
<Border x:Name="MyButton" Height="25" Margin="0,5,0,0" CornerRadius="0 5 5 0" BorderThickness="1" BorderBrush="Gray" Style="{StaticResource myStyle1}">
<StackPanel Orientation="Horizontal" Margin="8,0,0,0">
<Image Source="image.jpg" Height="20"/>
<TextBlock Text="My Button"/> <!-- Could also be a label if needs to be. -->
</StackPanel>
</Border>
<Style x:Key="myStyle1" TargetType="{x:Type Border}">
<Setter Property="Background" Value="{StaticResource MainContentForegroundColor}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
The mouse over trigger works perfectly but i can't get the click trigger to work... i've tried IsKeyboardFocusWithin and IsFocused but it didn't work.

Answer 1

I think you should use ToggleButton instead of normal button -
<ToggleButton
Background="Transparent">
<ToggleButton.Template>
<ControlTemplate
TargetType="{x:Type ToggleButton}">
<Border
x:Name="MyButton"
Height="25"
Margin="0,5,0,0"
CornerRadius="0 5 5 0"
BorderThickness="1"
BorderBrush="Gray">
<StackPanel
Orientation="Horizontal"
Margin="8,0,0,0">
<Image
Source="image.jpg"
Height="20" />
<TextBlock
Text="My Button" />
<!-- Could also be a label if needs to be. -->
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger
Property="IsChecked"
Value="True">
<Setter
Property="Background"
Value="Red" />
</Trigger>
<Trigger
Property="IsMouseOver"
Value="True">
<Setter
Property="Background"
Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>

Answer 2

You can create a Button style, then only you will IsPressed Property. See the below code using VSM.
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FF760D0D"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FF675A88"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="border" BorderBrush="#FF5A8876" BorderThickness="3" Background="#FFF4EDED"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Button HorizontalAlignment="Left" Style="{DynamicResource ButtonStyle1}" VerticalAlignment="Top" Width="180" Height="61" Content="Button"/>