Page 1 of 1

[Solved] Button Hover effect

Posted: Sun Apr 30, 2017 3:15 pm
by TaterJuice
How is the default mouseover effect achieved in CsHTML5? I am trying to reproduce in a custom style, but without Style.Triggers (IsMouseOver), I can't figure out how to. Any help would be appreciated.
By default, any button changes its background color to a slightly darker tint whenever a mouse pointer is over it, but with the following custom style, the background color does not change when a pointer is over the button, and I can't find any properties that allow me to control that.

Code: Select all

   <Setter Property="Padding" Value="10,5,15,5" />
   <Setter Property="Margin" Value="0,10,10,0" />
   <Setter Property="HorizontalAlignment" Value="Center" />
   <Setter Property="Foreground" Value="White" />
   <Setter Property="Cursor" Value="Hand" />
   <Setter Property="Background" Value="#6CC04A" />
               Background="{TemplateBinding Background}">
                  Margin="{TemplateBinding Padding}"
                  Content="{TemplateBinding Content}"
                  ContentTemplate="{TemplateBinding ContentTemplate}"
                  VerticalAlignment="{TemplateBinding VerticalAlignment}"
                  HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" />

Re: Button Hover effect

Posted: Mon May 01, 2017 7:48 am
by TaterJuice
I have resolved my issue by subclassing the Button Control, and subscribing to the PointerEntered\PointerExited events.

Re: Button Hover effect

Posted: Tue May 02, 2017 12:06 am
by JS-Support @Userware

To reproduce the default mouseover effect in a custom style, please copy/paste the default button style from the following URL:


Re: Button Hover effect

Posted: Tue May 02, 2017 6:19 am
by TaterJuice
Wonderful, thank you!