[Solved] Button Hover effect

Please post public support tickets here. Note: for private support tickets, please send an email to support@cshtml5.com instead.
TaterJuice
Posts: 65
Joined: Thu Mar 16, 2017 5:40 am

[Solved] Button Hover effect

Postby TaterJuice » Sun Apr 30, 2017 3:15 pm

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>
Last edited by TaterJuice on Tue May 02, 2017 8:12 pm, edited 1 time in total.

TaterJuice
Posts: 65
Joined: Thu Mar 16, 2017 5:40 am

Re: Button Hover effect

Postby TaterJuice » Mon May 01, 2017 7:48 am

I have resolved my issue by subclassing the Button Control, and subscribing to the PointerEntered\PointerExited events.

JS-Support
Site Admin
Posts: 739
Joined: Tue Apr 08, 2014 3:42 pm

Re: Button Hover effect

Postby JS-Support » Tue May 02, 2017 12:06 am

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

TaterJuice
Posts: 65
Joined: Thu Mar 16, 2017 5:40 am

Re: Button Hover effect

Postby TaterJuice » Tue May 02, 2017 6:19 am

Wonderful, thank you!


Return to “Technical Support”

Who is online

Users browsing this forum: No registered users and 1 guest