Change Font Color on radMenu when Hover

12 posts, 1 answers
  1. Rizk
    Rizk avatar
    13 posts
    Member since:
    Feb 2013

    Posted 27 Feb 2013 Link to this post

    i want to change font color on radmenu when its hover....
    example : i have a black font color on normal and when its hover it change to red

    sorry for my poor english
  2. Rosen Vladimirov
    Admin
    Rosen Vladimirov avatar
    640 posts

    Posted 27 Feb 2013 Link to this post

    Hi Rizk,

    To achieve this you will have to modify the templates of RadMenuItem. More information about used templates can be found in our online help. I'm sending you a simple project where we've implemented similar scenario. When a RadMenuItem is highlighted, its foreground color will change to red.

    Please check the attachment and inform us if you still have any problems or concerns.

    Greetings,
    Rosen Vladimirov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Rizk
    Rizk avatar
    13 posts
    Member since:
    Feb 2013

    Posted 27 Feb 2013 Link to this post

    thank you for your help its work like a charm. . .
    but there some delay on the transition

    can you fix it
    im a beginner
    sorry
    thank you very much
  5. Rosen Vladimirov
    Admin
    Rosen Vladimirov avatar
    640 posts

    Posted 28 Feb 2013 Link to this post

    Hi Rizk,

    You can modify the ColorAnimation and set SpeedRatio property. For example in each of the templates you can use:
    <ColorAnimation To="Red" SpeedRatio="3" Storyboard.TargetName="Content" Storyboard.TargetProperty="(TextBlock.Foreground).(Brush.Color)"/>

    Note that I've just added SpeedRatio. Hopefully this helps.

    All the best,
    Rosen Vladimirov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Rizk
    Rizk avatar
    13 posts
    Member since:
    Feb 2013

    Posted 14 Mar 2013 Link to this post

    thank you for your attention
    but when i apply theme for submenu header it is not clickable

    poor english
    sorry
  7. Rosen Vladimirov
    Admin
    Rosen Vladimirov avatar
    640 posts

    Posted 14 Mar 2013 Link to this post

    Hi Rizk,

    Could you send the code snippet where you are setting the theme for the SubMenuHeader? With this information I'll be able to provide you better help.

    I'm looking forward to hearing from you.

    Greetings,
    Rosen Vladimirov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  8. Rizk
    Rizk avatar
    13 posts
    Member since:
    Feb 2013

    Posted 15 Mar 2013 Link to this post

    <ControlTemplate x:Key="SubMenuHeaderTemplate" TargetType="telerik:RadMenuItem">
            <Grid x:Name="RootElement">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Highlighted">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="HighlightVisual">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                    <ColorAnimation To="White" Storyboard.TargetName="Content" Storyboard.TargetProperty="(TextBlock.Foreground).(Color.Brush)" SpeedRatio="10"/>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentGrid"/>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Normal"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusStates">
                        <VisualState x:Name="Unfocused"/>
                        <VisualState x:Name="Focused"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="CheckStates">
                        <VisualState x:Name="Checked"/>
                        <VisualState x:Name="Unchecked"/>
                        <VisualState x:Name="HideIcon"/>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border BorderThickness="{TemplateBinding BorderThickness}"/>
                <Grid Margin="{StaticResource MenuSubItemMargin}">
                    <Border x:Name="HighlightVisual" BorderBrush="{x:Null}" BorderThickness="1" Background="{StaticResource Brush1}" CornerRadius="{StaticResource SplitButton_SpanCornerRadius}" Visibility="Collapsed">
                        <Border BorderBrush="{x:Null}" BorderThickness="1" CornerRadius="{StaticResource SplitButton_SpanInnerCornerRadius}"/>
                    </Border>
                    <Grid x:Name="ContentGrid">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock x:Name="Content" Text="{TemplateBinding Header}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <Path x:Name="ExpandIconBackground" Grid.Column="2" Data="M0,0 L0,7 1,7 1,6 2,6 2,5 3,5 3,4 4,4 4,3 3,3 3,2 2,2 2,1 1,1 1,0 z" Fill="{StaticResource ButtonIconBackground_Normal}" Height="7" Margin="6 7 6 5" VerticalAlignment="Center" Width="4"/>
                        <Path x:Name="ExpandIconForeground" Grid.Column="2" Data="M0,0 L0,7 1,7 1,6 2,6 2,5 3,5 3,4 4,4 4,3 3,3 3,2 2,2 2,1 1,1 1,0 z" Fill="{StaticResource ButtonIconForeground_Normal}" Height="7" Margin="6 6 6 6" VerticalAlignment="Center" Width="4"/>
                    </Grid>
                </Grid>
                <Popup x:Name="PART_Popup" HorizontalOffset="-1" VerticalOffset="-1">
                    <Grid>
                        <Grid x:Name="PopupContentElement" Margin="0 0 3 3">
                            <Telerik_Windows_Controls_Chromes:ShadowChrome telerik:StyleManager.Theme="{StaticResource Theme}"/>
                            <Border BorderBrush="{x:Null}" BorderThickness="1" Background="{StaticResource common body brush}">
                                <Grid>
                                    <Grid HorizontalAlignment="Left" Width="{Binding Menu.IconColumnWidth, RelativeSource={RelativeSource TemplatedParent}}">
                                        <Rectangle Fill="{x:Null}" Margin="0 0 2 0"/>
                                        <Grid HorizontalAlignment="Right" Margin="{StaticResource MenuPopupIconsSeparatorMargin}">
                                            <Rectangle Fill="{x:Null}" HorizontalAlignment="Right" Margin="0 0 1 0" Width="1"/>
                                            <Rectangle Fill="{x:Null}" HorizontalAlignment="Right" Margin="0 0 0 0" Width="1"/>
                                        </Grid>
                                    </Grid>
                                    <ItemsPresenter Margin="1"/>
                                </Grid>
                            </Border>
                        </Grid>
                    </Grid>
                </Popup>
            </Grid>
        </ControlTemplate>


    please tell me what is wrong with it
  9. Answer
    Rosen Vladimirov
    Admin
    Rosen Vladimirov avatar
    640 posts

    Posted 18 Mar 2013 Link to this post

    Hi Rizk,

    I've noticed the following line in your code:
    <Telerik_Windows_Controls_Chromes:ShadowChrome telerik:StyleManager.Theme="{StaticResource Theme}"/>

    Do you have such static resource called "Theme"? I suggest you to get back to the project I've already sent you and use the templates from it.

    Hopefully this helps.

    Kind regards,
    Rosen Vladimirov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  10. Rizk
    Rizk avatar
    13 posts
    Member since:
    Feb 2013

    Posted 18 Mar 2013 Link to this post

    can you tell me why its cause my submenu header unclickable ?
  11. Rosen Vladimirov
    Admin
    Rosen Vladimirov avatar
    640 posts

    Posted 21 Mar 2013 Link to this post

    Hello Rizk,

    I'm unable to reproduce your problem. I've used your template (I've just created my own brushes) and I've added the following resource in the App.xaml:
    <telerik:Windows7Theme x:Key="Theme"/>

    I've also added reference to Telerik.Windows.Themes.Windows7 assembly in my project.

    After that I ran the application and everything is working fine. Could you verify that you've added a Theme resource and reference to the respective assembly?

    All the best,
    Rosen Vladimirov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  12. Rizk
    Rizk avatar
    13 posts
    Member since:
    Feb 2013

    Posted 21 Mar 2013 Link to this post

    thank you Vladimirov

    i've done this

    <!--<Telerik_Windows_Controls_Chromes:ShadowChrome telerik:StyleManager.Theme="{StaticResource Theme}"/>-->

    and it's work to my submenu header. . .

    is it okay ?
  13. Rosen Vladimirov
    Admin
    Rosen Vladimirov avatar
    640 posts

    Posted 22 Mar 2013 Link to this post

    Hello Rizk,

    Yes, it is okay. You can also use the following approach:
    <Telerik_Windows_Controls_Chromes:ShadowChrome />

    Both solutions will work fine. I'm glad we have resolved this issue.

    Feel free to contact us if you have any suggestions or concerns.

    Regards,
    Rosen Vladimirov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
DevCraft banner