Question

Hi all,

I am working on creating a button template to use in my WPF application. The format is basically color tiles (Think Windows Phone style for the most part.).

If I was wanting to change the color of the button in the event of a MouseOver, I would just make some code like this (let’s say the original button color is Gray):

<Window.Resources>
    <Style x:Key="ColorTileButton" TargetType="Button>

<!-- Insert various property editing here. -->

        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="LightGray" />
            </Trigger>
            <Trigger Property="IsMouseOver" Value="False>
                <Setter Property="Background" Value="Gray" />
            </Trigger>
        </ControlTemplate.Triggers>
    </Style>
</Window.Resources>

But obviously this wouldn’t work if the original button color was, say, Firebrick because I would end up with a bunch of standard Gray buttons. So I was wondering if there would be a way to rewrite this button template so that it would just increment the values of R, G, and B by about 10 to give the button a lighter color, then decrement is when the mouse left. Help me out?

Thanks guys.

Answer 1

I believe what you are describing is ColorAnimation an example, or you can look at this Forum Post. An interesting note from the Forum post.

A trigger makes a change to one or more properties when its condition is satisfied, and then resets the property values when its condition is no longer satisfied.

So what he is suggesting is:

<ControlTemplate.Triggers> 
    <Trigger Property="IsMouseOver" Value="True"> 
        <Setter Property="Background" Value="LightGray" /> 
    </Trigger> 
</ControlTemplate.Triggers> 

it would reset to FireBrick as you gave in your example