Dfyjkt

I have what I thought would be an easy issue to resolve but for the life of me I cant get exactly what i want using WPF (coming from a WinForms background).

All I am trying to do is create a button which the background color changes just while the button is pressed / clicked. Once the button is released, it reverts back to normal. Based on this I am trying to also have nothing happen on Mouse Hover.

Ive managed to create a template to remove the Mouse Over effects but can seem to figure out how to change the background color just whilst clicked / pressed and then reset.

I have been working off this template from another Stack Over flow post which gives me a nice transition of the button being pressed.

I am happy to lose the effect but was using this as a basis for trying to understand how to piece it all together.

 <Style x:Key="InformButton" TargetType="x:Type Button">
 <Setter Property="OverridesDefaultStyle" Value="True"/>
 <Setter Property="Margin" Value="2"/>
 <Setter Property="FontFamily" Value="Tahoma"/>
 <Setter Property="FontSize" Value="10px"/>
 <Setter Property="FontWeight" Value="Normal"/>
 <Setter Property="FocusVisualStyle" Value="StaticResource MyFocusVisual" />
 <Setter Property="Background" >
 <Setter.Value>
 <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
 <GradientStop Color="#FFFFD190" Offset="0.2"/>
 <GradientStop Color="Orange" Offset="0.85"/>
 <GradientStop Color="#FFFFD190" Offset="1"/>
 </LinearGradientBrush>
 </Setter.Value>
 </Setter>
 <Setter Property="Template">
 <Setter.Value>
 <ControlTemplate TargetType="x:Type Button">
 <Border x:Name="border" 
 BorderThickness="1"
 Padding="4,2" 
 BorderBrush="DarkGray" 
 CornerRadius="3" 
 Background="TemplateBinding Background">
 <Grid>
 <ContentPresenter HorizontalAlignment="Center" 
 VerticalAlignment="Center" x:Name="contentShadow"
 Style="StaticResource ShadowStyle" >
 <ContentPresenter.RenderTransform>
 <TranslateTransform X="1.0" Y="1.0" />
 </ContentPresenter.RenderTransform>
 </ContentPresenter>
 <ContentPresenter HorizontalAlignment="Center" 
 VerticalAlignment="Center" x:Name="content" />
 </Grid>
 </Border>
 <ControlTemplate.Triggers>
 <Trigger Property="IsMouseOver" Value="False">
 <Setter TargetName="border" Property="BorderBrush" Value="DarkGray" />
 <Setter Property="Foreground" Value="Black" />
 </Trigger>
 <Trigger Property="IsPressed" Value="True">
 <Setter TargetName="content" Property="RenderTransform" >
 <Setter.Value>
 <TranslateTransform Y="2.0" />
 </Setter.Value>
 </Setter>
 <Setter Property="Foreground" Value="#007DB8" />
 </Trigger>
 <Trigger Property="IsDefaulted" Value="True">
 <Setter TargetName="border" Property="BorderBrush" Value="DarkGray" />
 </Trigger>
 <Trigger Property="IsFocused" Value="True">
 <Setter TargetName="border" Property="BorderBrush" Value="DarkGray" />
 </Trigger>
 <Trigger Property="IsEnabled" Value="False">
 <Setter TargetName="border" Property="Opacity" Value="0.7" />
 <Setter Property="Foreground" Value="Gray" />
 </Trigger>
 </ControlTemplate.Triggers>
 </ControlTemplate>
 </Setter.Value>
 </Setter>
 </Style>

The answer is actually pretty simple - you already have a "Is Pressed" trigger - you just need to add a background setter there, for example:

<Setter Property="Background" Value="Red"/>

To make it simple to understand, we can see a simplified version of your template:

<Style x:Key="InformButton" TargetType="x:Type Button">
 <Setter Property="Background" Value="LightBlue">
 </Setter>
 <Setter Property="Template">
 <Setter.Value>
 <ControlTemplate TargetType="x:Type Button">
 <Border x:Name="border" BorderThickness="1" Padding="4,2"
 BorderBrush="DarkGray" CornerRadius="3" 
 Background="TemplateBinding Background">
 <Grid>
 <ContentPresenter HorizontalAlignment="Center" 
 VerticalAlignment="Center" x:Name="content" />
 </Grid>
 </Border>
 <ControlTemplate.Triggers>
 <Trigger Property="IsPressed" Value="True">
 <Setter Property="Background" Value="Red"/>
 </Trigger>
 </ControlTemplate.Triggers>
 </ControlTemplate>
 </Setter.Value>
 </Setter>
</Style>

Here you can see that all we have is a basic background (Light blue), a content presenter for the content and a trigger that if the button is pressed, will change the color to red.

Personally, I think that this minimal template also looks better as it will match the global font settings and style.