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

<Style
   TargetType="Button"
   x:Key="largeButton">
   <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" />
   <Setter
      Property="Template">
      <Setter.Value>
         <ControlTemplate
            TargetType="Button">
            <Border
               CornerRadius="32"
               Background="{TemplateBinding Background}">
               <ContentPresenter
                  FontSize="22"
                  Margin="{TemplateBinding Padding}"
                  Content="{TemplateBinding Content}"
                  ContentTemplate="{TemplateBinding ContentTemplate}"
                  VerticalAlignment="{TemplateBinding VerticalAlignment}"
                  HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" />
            </Border>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>

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
Hi,

To reproduce the default mouseover effect in a custom style, please copy/paste the default button style from the following URL:
http://cshtml5.com/links/styles-and-templates.aspx

Thanks.
Regards,
JS-Support

Re: Button Hover effect

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