Menu Customizacion How To

3 posts, 0 answers
  1. Michael
    Michael avatar
    6 posts
    Member since:
    Feb 2011

    Posted 04 Feb 2011 Link to this post

    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
  2. Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 08 Feb 2011 Link to this post

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  3. DevCraft banner
  4. Michael
    Michael avatar
    6 posts
    Member since:
    Feb 2011

    Posted 09 Feb 2011 Link to this post

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