WPF change button hover style programmatically

Question

I want to create a custom style for buttons in my WPF application. I want to be able to change their Backgroound and BorderThickness properties when mouse is over them.

Some of the buttons are created dynamically in c# so I don't think that xaml solution will be enough.

I tried achieving my goal using Triggers and Setters in c#, but I couldn't get it to work, hover color always stayed light blue.

Here is how I'm creating buttons:

Button but = new Button()
{
Height = 40,
Background = new SolidColorBrush(Colors.Gray),
Content = new Label() { 
    FontSize = 13, 
    FontWeight = FontWeights.Medium, 
    Foreground = new SolidColorBrush(Colors.White)
    }
}
stackPanel.Children.Add(but)

I know this is not the best way to create controls and I could probably be better off using MVVM, but I can't change the whole application so I'm just looking for a c# solution.

Thanks!

EDIT:

I added a style to App.xaml file. It looks like this (UpperMenuModeButton is my control based on regular button):

<Application.Resources>
    <Style TargetType="UpperMenuModeButton" x:Key="UpperMenuModeButton" >
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="Red"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Application.Resources>

I am setting the style while creating the button like this:

this.Style = (Style) Resources["UpperMenuModeButton"];

I am still getting regular light blue background on hover.

Create a common style in xaml with mouseover triggers, and apply that [style in your code](http://stackoverflow.com/questions/10686917/setting-the-style-property-of-a-wpf-label-in-code) — Mat J, Nov 13 '16 at 17:51
@MathewJibin Thanks for the answer! Can you provide more information on how to create common style so I can apply it to my buttons in different windows? — Marcin Bator, Nov 13 '16 at 17:54
Or just create a style to effect all elements of a specific type, like button — Emad, Nov 13 '16 at 17:54
@MarcinBator, Define the [style in App.xaml](http://stackoverflow.com/questions/431940/how-to-set-default-wpf-window-style-in-app-xaml) — Mat J, Nov 13 '16 at 17:55
@MathewJibin I edited my question to show further problems that I have — Marcin Bator, Nov 13 '16 at 18:11
@Emad Thanks for the answer! I edited my question to show further problems that I have — Marcin Bator, Nov 13 '16 at 18:11
Styles cannot override properties explicitly set on controls. Set default values for those properties you need to update on trigger in the style itself. In you case, remove the `Background = new SolidColorBrush(Colors.Gray)` and add a setter for the same in your style (outside the trigger). — Mat J, Nov 13 '16 at 18:35

score 0 · Accepted Answer · edited May 23 '17 at 12:13

You can create a general style like this:

<Style TargetType="Button">
  <Setter Property="HorizontalAlignment" Value="Center" />
  <Setter Property="FontFamily" Value="Comic Sans MS"/>
  <Setter Property="FontSize" Value="14"/>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
  <EventTrigger.Actions>
    <BeginStoryboard>
      <Storyboard>
        <DoubleAnimation
          Duration="0:0:0.2"
          Storyboard.TargetProperty="MaxHeight"
          To="90"  />
      </Storyboard>
    </BeginStoryboard>
  </EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
  <EventTrigger.Actions>
    <BeginStoryboard>
      <Storyboard>
        <DoubleAnimation
          Duration="0:0:1"
          Storyboard.TargetProperty="MaxHeight"  />
      </Storyboard>
    </BeginStoryboard>
  </EventTrigger.Actions>
</EventTrigger>
</Style>

Put this code in the scope of your buttons (in it's page or grid or container) and it'll work automatically. For more info see here

Edit

For your problem regarding button hover events see here

The code from the second link works for me, but I'm a little bit confused. After I removed ..., my trigger doesn't fire. On start, the color of my button changes to green, but after I hover over it, it changes to default light blue. What is so important in ...? — Marcin Bator, Nov 13 '16 at 20:12
@MarcinBator The button has a default template in windows. Therefore all the buttons in windows look the same. And it might change in future versions of windows helping your application to look the same as new apps. What you need is to change this template to what you think is better. That's what this code does. — Emad, Nov 14 '16 at 05:25

score 0 · Answer 2 · answered Nov 13 '16 at 18:25

0

For that style to work on a normal button you need to set the TargetType to Button. Otherwise it will not be applied. Hope this helps.

answered Nov 13 '16 at 18:25

Vlad

31
2

I messed it up a little bit. In the first part of my question I mentioned creating buttons, but I actually meant creating custom UpperMenuModeButton button that derives from Button. – Marcin Bator Nov 13 '16 at 18:27

WPF change button hover style programmatically

2 Answers2