Agfdhyk

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.