Button IsMouseOver Trigger

[André]

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

 

[Dinko | Tech Support Engineer]

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