Change icon on mouse over

2 posts, 0 answers
  1. Chris
    Chris avatar
    58 posts
    Member since:
    Feb 2012

    Posted 26 Feb 2015 Link to this post

    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
  2. Masha
    Admin
    Masha avatar
    355 posts

    Posted 02 Mar 2015 Link to this post

    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.

     
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top