WPF: Change background color of border on left mouse button down

Question

Below is a style I use for buttons in my application. Now I'm trying to change the background color of the Border element that has the name "Background" when the user clicks the button with the left mouse button.

How do I do that?

<Style TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border BorderBrush="#6e6964" BorderThickness="1" CornerRadius="1" Margin="{TemplateBinding Margin}" SnapsToDevicePixels="True">
                    <Border BorderBrush="White" BorderThickness="1" CornerRadius="1" SnapsToDevicePixels="True">
                        <Border Padding="12,4,12,4" SnapsToDevicePixels="True" Name="Background">
                            <Border.Background>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientStop Color="White" Offset="0"/>
                                    <GradientStop Color="#f1f1f1" Offset="1"/>
                                </LinearGradientBrush>
                            </Border.Background>
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                    </Border>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" TargetName="Background">
                            <Setter.Value>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientStop Offset="0" Color="#edf8fb"/>
                                    <GradientStop Offset="1" Color="#e2edf0"/>
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Solution 1

You just need the following property trigger:

<ControlTemplate.Triggers>
    <Trigger Property="IsPressed" Value="True">
        <Setter Property="Background" TargetName="Background" Value="Red"/>
    </Trigger>
</ControlTemplate.Triggers>

Solution 2

You need an EventTrigger

Give one or both of your Border's GradientStops a name (not the ones in your Trigger):

<GradientStop Color="#f1f1f1" Offset="1" x:Name="Stop2" />

And add in the following EventTrigger to your ControlTemplate.Triggers:

<EventTrigger RoutedEvent="Button.Click">
  <EventTrigger.Actions>
    <BeginStoryboard>
      <Storyboard>
        <ColorAnimation Storyboard.TargetName="Stop2" Storyboard.TargetProperty="Color" To="Red" Duration="0" />
      </Storyboard>
    </BeginStoryboard>
  </EventTrigger.Actions>
</EventTrigger>

If you want to modify both of your gradient stops be sure to give them both a name and perform a ColorAnimation on each one individually (I think you can do them both in the same storyboard)

Hope it helps!

Edit: This will make the change permanent on a Click event (I tested with VS 2010 Beta 2 and Button.MouseLeftButtonDown doesn't work but Button.Click only works for mouse left button down but not mouse right button down). If you only wish to have the change while the mouse is down... but return to a normal value when the button is no longer pressed... then you should use the IsPressed Property Trigger as noted in the another answer.

Comments

[Deniz Dogan]

Thank you so much! I looked for such a property but couldn't find it!

[Narendra]

@DenizDogan Can you please tell a similar property for combobox, IsPressed is giving compile time error.

[Mathee]

use Button.IsPressed here as we use control template