Stop button color change on Mouseover

Question

ok..this is very strange....i have defined a button, actually 5 buttons and each have a different color but on mouse over, they just change the color to that icy blue color....i tried to override that by using the below code :

        <Button Name="btn1" Content="Button" Width="65" Height="45" Background="Green" Margin="1,1,0,1" FontWeight="Bold">
            <Button.Style>
                <Style>
                    <Style.Triggers>
                        <Trigger Property="Button.IsMouseOver" Value="True">
                            <Setter Property="Button.Background" Value="Yellow" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
            <Button.LayoutTransform>
                <RotateTransform Angle="270"/>
            </Button.LayoutTransform>
        </Button>

but it still does not work...what i want is that it should maintain the background color it has been given(different for each button), so the question is : do i have to define it again and again for each button (the trigger did not work, color becomes ice blue) OR can i define it in the resource file with a generic value that it either stops the color change or just sets background to existing property EDIT : Just to be clear, i want the button to stop changing its color on mouseover and just retain whatever color i have assigned it.....

Are you able to stop it from turning the "ice blue", or is that your question? — CodingGorilla, Aug 20 '12 at 19:07
no....i'm not able to stop it....yes that is my question that i do not want it to turn ice blue but retain whatever color i assigned it — Dannyboy, Aug 20 '12 at 19:12
Then I think your question is a duplicate of: http://stackoverflow.com/questions/1224439/how-do-you-disable-mouseover-effects-on-a-button-in-wpf — CodingGorilla, Aug 20 '12 at 19:16
i have been through that question and it did not work for me....it sets a single color in the setter which will be applied to all buttons irrespective of their backgroundcolor....i just don't want the color to change....thats the difference — Dannyboy, Aug 20 '12 at 19:22
I'm not sure where you're getting the "ice blue" from, however is the button Focused when it changes color? There's a chance its pulling the color from the [SystemColors](http://blogs.msdn.com/b/wpf/archive/2010/11/30/systemcolors-reference.aspx), in which case you could try overwriting the `SystemColor` for your buttons (maybe Transparent?) — Rachel, Aug 20 '12 at 19:33

CodingGorilla · Accepted Answer · 2012-08-20T19:55:05.567

Based on the comments and the SO post I linked: that article applied the style to anything of type Button, that's why it applies to all buttons (which is not necessarily a bad thing). But the salient point to take away from that article is that what you need to modify is the ControlTemplate.

So you would want to do something like this:

    <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border x:Name="Chrome" BorderBrush="Black" BorderThickness="2" CornerRadius="2" Background="{TemplateBinding Property=Background}">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

This isn't perfect, because it loses all of it's interactivity (ie. you can't tell you've pushed it, hovered over it or anything). But it gives you a good starting point.

One of the key points here is that the Background property of the Border is bound to the TemplateParent Property=Background, that means it's going to read the background property of the button the that it is templating and use it's background color. This makes it easier for you to use a single style to cover all 5 of your buttons. You could (and may want to) do similar things with the BorderBrush property.

Also notice my style has a x:Key value, so in order to use this, you would do:

    <Button x:Name="btn1" Content="Button" Width="65" Height="45" Background="Green" Margin="1,1,0,1" FontWeight="Bold" Style="{DynamicResource ButtonStyle1}">
        <Button.LayoutTransform>
            <RotateTransform Angle="270"/>
        </Button.LayoutTransform>
    </Button>

You can remove the x:Key attribute and the style will indeed apply to all buttons inside of whichever container you declare the resource.

really good...this does work as i want, just few clarifications before i mark it as answer...why do i have to use border for the background (contentpresenter does not have that property....i checked) ??....also you said, it loses all of it's interactivity but i checked by clicking the button and its click event fired....so what exactly are we talking about ?? — Dannyboy, Aug 20 '12 at 20:16
`ContentPresenter` is basically a placeholder control, so it doesn't have a lot of properties. You don't **have to** use a border, you could use some other container that will give you the ability to specify a background color, its just that `Border` is usually desirable because it gives you the border and the border corners that you usually want. As far as the "interactivity", usually a button will have some sort of mouse over behavior, like a slightly different color, or the border highlights, or something just so you have some visual cue that the button is active. Does that help? — CodingGorilla, Aug 20 '12 at 20:23

Stop button color change on Mouseover

1 Answers1