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…..

Answer 1

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.