Button IsMouseOver Trigger

2 posts, 0 answers
  1. André
    André avatar
    4 posts
    Member since:
    Oct 2015

    Posted 23 Oct 2015 Link to this post

    Hey,

     

    I'm occuring something odd. I try to apply a style to a Button. It works fine with just the Button. But the IsMouseOver Trigger doesn't work.

    I'm using following code:

    <Style x:Key="hyperlinkStyle" TargetType="telerik:RadButton">
                <Style.Setters>
                    <Setter Property="Background" Value="#25A0DA"></Setter>
                    <Setter Property="Foreground" Value="White"></Setter>
                    <Setter Property="FontFamily" Value="Segoe UI"></Setter>
                    <Setter Property="Margin" Value="5,5,5,5"></Setter>
                    <Setter Property="Padding" Value="5,5,5,5"></Setter>
                    <Setter Property="FontSize" Value="12"></Setter>
                    <Setter Property="BorderThickness" Value="1"></Setter>
                </Style.Setters>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Background" Value="Black"></Setter>
                        <Setter Property="Foreground" Value="White"></Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>

     

    Hope someone can explain why it doesn't work

     

  2. Dinko
    Admin
    Dinko avatar
    201 posts

    Posted 27 Oct 2015 Link to this post

    Hello André,

    The default ControlTemplate of RadButton defines a visual state that displays a Border element when the mouse is over the button. This border is positioned over the element which displays the button's Background. That why you can't see the Background color applied. To change the default MouseOver background, you can edit the ControlTemplate of the RadButton control. Basically, you can find the Border element with x:Name set to "MouseOverVisual" and change its Background.
    <Border x:Name="MouseOverState" Opacity="0" Margin="2" Background="Red" />
    To change the Foreground color you can apply a ColorAnimation on the content element in the template.
    <VisualState x:Name="MouseOver">
        <Storyboard>
            <DoubleAnimation Duration="0" Storyboard.TargetName="MouseOverState" Storyboard.TargetProperty="Opacity" To="1"/>
            <ColorAnimation Duration="0" Storyboard.TargetName="Content" Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)"  To="White"/>
        </Storyboard>
    </VisualState>
    You can see how to extract and edit a control's template in the Editing Control Templates help article. I have created a sample project demonstrating how you can implement this behavior. Hope this is the solution you are looking for, if not don't hesitate to contact us again.

    Regards,
    Dinko
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top