RadMenuItem: IsMouseOver to change the Icon

1 Answer 58 Views
Menu
Ben
Top achievements
Rank 1
Ben asked on 01 Aug 2023, 01:22 PM

Hi,

I currently am using a RadMenuItem to show one particular Icon for example the Whatsapp logo.

When I hover over the RadMenuItem I would like the icon to change to another version (white) which will be more visible due to our RadMenuItem mouse over having a darker background.

The code below is showing the original logo but the IsMouseOver trigger does not appear to be working.

Here is my code:

MainWindow.Xaml

                        <telerik:RadMenuItem Height="30" 
                                             Command="{Binding EmailSupportCommand}"
                                             FontSize="14" IconColumnWidth="30" Header="Email info@.com"
                                             >
                            <telerik:RadMenuItem.Icon>
                                <Image>
                                    <Image.Style>
                                        <Style TargetType="{x:Type Image}">
                                            <Setter Property="Source" Value="..\..\Auxiliary\Resources\64x64\dark\email.png" />
                                            <Style.Triggers>
                                                <DataTrigger Value="True" Binding="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadMenuItem}, Path=IsMouseOver}">
                                                    <Setter Property="Source" Value="..\..\Auxiliary\Resources\64x64\light\email.png" />
                                                </DataTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </Image.Style>
                                </Image>
                            </telerik:RadMenuItem.Icon>
                        </telerik:RadMenuItem>


1 Answer, 1 is accepted

Sort by
0
Dinko
Telerik team
answered on 03 Aug 2023, 12:37 PM

Hello Ben,

I tested the provided code snippet on my end, however, the image's Source property is updated correctly when the mouse is over the parent RadMenuItem element. I have attached the sample project that I used for testing.

Regards,
Dinko
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Menu
Asked by
Ben
Top achievements
Rank 1
Answers by
Dinko
Telerik team
Share this question
or