CODEWITHSUNDEEP
c#wpfxamltriggersmouseover
Jake
Jake

Reputation: 1

Trigger in code-behind updates border but not button

I have a style that is updated dynamically in my C# code. It applies to a few buttons and a border. This way I can change the theme of every item by simply setting the style background property.

Working example

This is fine. I recently wanted to change the mouse-over color as well when I change the background so I implemented the following code:

Style style = new Style();
// Set background to red
style.Setters.Add(new Setter(Button.BackgroundProperty, new BrushConverter().ConvertFrom("#FF0000") as Brush));

Trigger mouseOver = new Trigger() {
    Property = IsMouseOverProperty,
    Value = true
};

// Set hover color to green
mouseOver.Setters.Add(new Setter(Button.BackgroundProperty, new BrushConverter().ConvertFrom("#00FF00") as Brush));
style.Triggers.Add(mouseOver);

// Apply style to elements
Application.Current.Resources["menu-color"] = style;

The background is set successfully on every item but only the border accepts the mouse-over property. Take a look at the gif below.

Hover colors

I don't necessarily want the border to have a hover color, but that's a problem for another day. Why does it only apply to that element but none of the others?

Upvotes: 0

Views: 372

Answers (1)

JeroenJ
JeroenJ

Reputation: 21

Xaml has triggers built-in. Because a Button has a default IsMouseOver style, you have to use styling to customize it.

This example shows the usage of a custom style on a button. Styling can be placed in your <Application.Resources> Which is located in App.xaml

This also comes with the benefit of not having to create custom controls to mimic the native Button controls!

<!-- Apply styling in xaml like so -->
<!-- Note that the x:Key here is what sets the style -->
<Button Style="{StaticResource ButtonStyle}" />

<!-- Add to App.xaml -->
<!-- If an x:key is not set, the styling will apply to all elements that have the given TargetType -->
<Style TargetType="Button" x:Key="ButtonStyle">
            <Setter Property="Background" Value="Cyan"/>
            <Setter Property="Height" Value="60" />

            <!-- Template can be used to take over styling of an element -->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}">
                            <!-- Here goes your custom style if you want one-->
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

            <!-- This will be 'called' whenever the mouse is over the button -->
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Green"/>
                </Trigger>
            </Style.Triggers>
        </Style>

This code is from my GitHub if you want to look at more examples!

Upvotes: 0

Related Questions