Menu Customizacion How To

[Michael]

Hi, I am developing a app wich have a menu and I am trying to customize it to look more like the menu seen here: 

http://demos.telerik.com/silverlight/#Menu/Customization. 

So far so good, but how I can change the image of a RadTabItem on MouseHover event? I tried the following but it did not work:

<ControlTemplate x:Key="MenuItemImageControlTemplate" TargetType="telerik:RadMenuItem">
            <Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Disabled"/>
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="mouseOverImage">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="normalImage">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Collapsed</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Pressed"/>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>

                <Image x:Name="normalImage" Source="{Binding Content}" Cursor="Hand" Stretch="None" HorizontalAlignment="Left"  />
                <Image x:Name="mouseOverImage" Source="{Binding Content, Converter={StaticResource ImageSourceConverter}}" Cursor="Hand" Stretch="None" HorizontalAlignment="Left" ToolTipService.ToolTip="{Binding Path=FileType, Converter={StaticResource NameToTooltipConverter}}"/>
            </Grid>
        </ControlTemplate>

Thanks =D

[Konstantina]

Hello Michael,

In order to change the MouseOver colour of the RadMenuItem you will have to edit the ButtonChrome control, which represents the menu item. For more information please refer to this forum post. You can also check out this KB article.

Please let us know if you have further questions.

Kind regards,
Konstantina
the Telerik team

[Michael]

Thanks, I'll look at those posts and I comment you.