Change icon on mouse over

[Christophe]

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

[Masha]

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