This is a migrated thread and some comments may be shown as answers.

Button IsMouseOver Trigger

1 Answer 418 Views
Buttons
This is a migrated thread and some comments may be shown as answers.
André
Top achievements
Rank 1
André asked on 23 Oct 2015, 07:23 AM

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

 

1 Answer, 1 is accepted

Sort by
0
Dinko
Telerik team
answered on 27 Oct 2015, 12:20 PM
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
Tags
Buttons
Asked by
André
Top achievements
Rank 1
Answers by
Dinko
Telerik team
Share this question
or