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

Change icon on mouse over

1 Answer 156 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Christophe
Top achievements
Rank 1
Christophe asked on 27 Feb 2015, 04:58 AM
Hi,

My question is very very very simple ..... and though I'm struggling achieving this.
All I want, is a menu item being an image (via the ICON property) and on MouseOver event, change that picture with another one...... It's that easy but can't make it happen. Why the hell is this so complex ?

Anyone to help ?

01.<telerik:RadMenu Grid.Row="2" Grid.Column="1" Width="40" HorizontalAlignment="Right" Background="Transparent" ClickToOpen="True">
02.    <telerik:RadMenuItem Header="" Width="40" Height="40" ToolTip="Settings">
03.        <telerik:RadMenuItem.Icon>
04.            <Image x:Name="btnSetting" Source="Resources/setting.png" Stretch="UniformToFill">
05.            </Image>
06.        </telerik:RadMenuItem.Icon>
07.        <Trigger Property="IsMouseOver" Value="true">
08.            <Setter TargetName="btnSetting" Property="Source" Value="Resources/setting-hover.png"></Setter>
09.        </Trigger>
10.    </telerik:RadMenuItem>
11.</telerik:RadMenu>

On compile, I get an error msg saying IsMouseOver is not a valid Event and if I change this into "Property="Mouse.MouseOver" then it says not recognized or not accessible ??????

Cheers,

Chris

1 Answer, 1 is accepted

Sort by
0
Masha
Telerik team
answered on 02 Mar 2015, 01:22 PM
Hi Chris,

To achieve the desired approach try the below code snippet:

<telerik:RadMenu Grid.Row="2" Grid.Column="1" Width="40" HorizontalAlignment="Right" Background="Transparent" ClickToOpen="True">
    <telerik:RadMenuItem Header="" Width="40" Height="40" ToolTip="Settings">
        <telerik:RadMenuItem.Icon>
            <Image x:Name="btnSetting" Stretch="UniformToFill">
                <Image.Style>
                    <Style>
                        <Setter Property="Image.Source" Value="setting.png" />
                        <Style.Triggers>
                            <Trigger  Property="Image.IsMouseOver" Value="True">
                                <Setter Property="Image.Source" Value="setting-hover.jpg" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
        </telerik:RadMenuItem.Icon>
    </telerik:RadMenuItem>
</telerik:RadMenu>

I hope it helps.

Regards,
Masha
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Menu
Asked by
Christophe
Top achievements
Rank 1
Answers by
Masha
Telerik team
Share this question
or