TileView with altered header template on mouse over

[Huy]

Hi,

I'm looking for a way to change the header style (background + foreground colors) of a tileviewitem as mouse is moved over

So far none of the result on Google is helpful

Thanks

[Martin Ivanov]

Hello Huy,

Our controls, including the RadTileViewItem elements, are using VisualStates to modify their appearances when the user interacts with them. Those visual states are located in the ControlTemplate of the control. For example there is a visual states for mouse enter, mouse leave, mouse over, pressed, disabled, etc. Each state animates an element in the control's visual tree.

In order to modify the background and the foreground color of the RadTileViewItem's header when you mouse over it, you can change the visual states in the ControlTemplate of the TileViewItemHeader control that holds the item's header. 

Another approach that can be more suitable for the tile view items is to use Trigger. Here is an example how you can set the Background and Foreground of the TileViewItemHeader when the mouse is over:

<Window.Resources>
    <Style TargetType="tileView:TileViewItemHeader">
        <Style.Triggers>
            <Trigger Property="tileView:TileViewItemHeader.IsMouseOver" Value="True">
                <Setter Property="tileView:TileViewItemHeader.Background" Value="Black" />
                <Setter Property="tileView:TileViewItemHeader.Foreground" Value="White" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

Please give this approach a try and let me know if it helps.

Regards,
Martin
Telerik

 

 

[Huy]

Hey Martin,

That's exactly what I want, thanks :)