change hover color?

[Ulrich Fiege]

hello, how can in change the hover (mouse over) color to the
menu control? Since we have updated to Q1 i can't find it in the themes like before to modify.
thank you ...

[Pana]

Hello Ulrich Fiege,

We are using a new control called ButtonChrome that we will use in buttons menu, items for ItemsControls that support selection etc. It supposed to make our controls more consistent comes along with the new redesign of the themes. It's in the Telerik.Windows.Controls assembly in the Telerik.Windows.Controls.Chromes namespace. You will have to edit the ButtonChrome's style and template. Tell me If you still have problems to edit the menu items and I will create an example project for you.

Greetings,
Panayot
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Ludovic Gerbault]

I have a similar request concerning the RadMenuItem hover behaviour.

I've managed by editing the ButtonChrome template to change the hover color, but I'd also like to change the text foreground as well in the same manner.

How would you perform such scenario ?

[Pana]

Hello Subileau Pascal,

You want to change the Foreground color of the menu item for different states? I mean "MouseOver" "Pressed" etc.?  In Normal state it should be enough to set the Foreground in the Style for RadMenuItem. For the other states you wont be able to change the foreground because the menu item may present content different than text (like image or path). So the RadMenuItem uses ContentPresenter to display that information. You may replace the ContentPresenter with ContentControl that exposes Foreground property but than if you set foreground to the RadMenuItem the actual foreground color won't change. You will be able to animate the foreground color on the ContentControl from the state manager of the RadMenuItem. Also you will have to add 'Content="{TemplateBinding Content}"' on that ContentControl as well as ContentTemplate... you may loose some functionality.

Best wishes,
Panayot
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Jane]

I want to customize the submenu (I am using 2010 Q1 RC) but I don't know how to edit the ButtonChrome's style and template. Can you send me the sample project? Thanks.

[Ludovic Gerbault]

I've tried your workaround, but it doesn't seem to work. I've replaced the ContentPresenter by a ContentControl, but if I set the Content Property with {TemplateBinding Content}, I get an error saying that Content is an unknown attribute of ContentControl.

Do you have a sample code that would make it a bit clearer for me ? I'd appreciate.

[Pana]

Hi Subileau Pascal,

Probably you have removed the ContentPresenter and created the ContentControl from scratch. The RadMenuItem has Header property and does not have Content property. So the {TemplateBinding Content}, would fail with the error that occurred to you. Try to just rename the tag from ContentPresenter to ContentControl without modifying the attributes.

If it still fails I will send you an example project.

Best wishes,
Panayot
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Ludovic Gerbault]

That's what I did.

And although the primary foreground is being correctly set at first, the storyboard I added to the ContentControl doesn't seem to do anything and the foreground still won't change on MouseOver.

[Pana]

Hi Subileau Pascal,

Does it work with Focus state?

Sincerely yours,
Panayot
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Ludovic Gerbault]

The focus state works like a charm, thanks.

[Darren Qian]

Can you send me a demo,I also face this issue and it really urgent,please help

[Ludovic Gerbault]

Here's an example of one of the templates that is being used as part of the RadMenuItem style

<ControlTemplate x:Key="TopLevelHeaderTemplate" TargetType="telerikNav:RadMenuItem">
        <Grid x:Name="RootElement" Margin="{StaticResource MenuTopLevelItemMargin}">
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Highlighted">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="ContentGrid" Storyboard.TargetProperty="Background">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource RadMenuTabBackground}"/>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource MenuItemOverTextColor}"/>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Disabled">
                <Storyboard>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentGrid" Storyboard.TargetProperty="Opacity">
                    <DiscreteDoubleKeyFrame KeyTime="0" Value="0.5"/>
                  </DoubleAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Normal"/>
              <VisualState x:Name="MouseOver">

              </VisualState>
              <VisualState x:Name="Pressed">

              </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="FocusStates">
              <VisualState x:Name="Unfocused"/>
              <VisualState x:Name="Focused">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource MenuItemOverTextColor}"/>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="CheckStates">
              <VisualState x:Name="Checked">
              </VisualState>
              <VisualState x:Name="Unchecked"/>
              <VisualState x:Name="HideIcon" />
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>

          <Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="SelectionChrome" Grid.ColumnSpan="3" CornerRadius="{StaticResource SplitButton_SpanCornerRadius}" RenderHighlighted="{TemplateBinding IsHighlighted}" RenderNormal="False" Style="{StaticResource ButtonChromeStyle1}"/>
          <Grid x:Name="ContentGrid" Background="Transparent">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*"/>
              <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <ContentControl Foreground="{StaticResource MenuItemNormalTextColor}"  Content="{TemplateBinding Header}"  x:Name="Content" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Grid.Column="0" ContentTemplate="{TemplateBinding HeaderTemplate}"/>
            <Path x:Name="ExpandIconBackground" Fill="{StaticResource ButtonIconBackground_Normal}" Height="7" Margin="6 7 6 5" VerticalAlignment="Center" Width="4" Grid.Column="1" 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"/>
            <Path x:Name="ExpandIconForeground" Fill="{StaticResource ButtonIconForeground_Normal}" Height="7" Margin="6 6 6 6" VerticalAlignment="Center" Width="4" Grid.Column="1" 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">
              <Path.Effect>
                <DropShadowEffect BlurRadius="40" Color="#FFFFFFFF" Direction="0" ShadowDepth="0" />
              </Path.Effect>
            </Path>
          </Grid>

          <Popup x:Name="PART_Popup" VerticalOffset="-1" HorizontalOffset="-1">
            <Grid>
              <Border Background="{StaticResource MenuPopupBackground}" BorderBrush="{StaticResource MenuPopupOuterBorder}" BorderThickness="1">
                <Border.Effect>
                  <DropShadowEffect Color="Black" Opacity="1" BlurRadius="40" Direction="0" ShadowDepth="0" />
                </Border.Effect>
              </Border>
              <Border
              x:Name="DropDownBorder"
              BorderBrush="{StaticResource MenuPopupOuterBorder}"
              BorderThickness="0"

              Background="{StaticResource MenuPopupBackground}">
                <Border
                x:Name="backgroundBorder"
                Background="{x:Null}"
                BorderBrush="{StaticResource MenuPopupOuterBorder}"
                BorderThickness="0"
                >
                  <Grid>
                    <ItemsPresenter />
                  </Grid>
                </Border>
              </Border>
            </Grid>
          </Popup>
        </Grid>
      </ControlTemplate>

You need to change the ContentPresenter of the template to a ContentControl to expose the foreground property and handle the Focus visualstate to switch it to another color on MouseOver

[Pana]

Hi Darren Qian,

Subileau Pascal is right. You should get the menu styles generated in blend or from one of our theme assemblies. The second will be easier as all resources will be packed together in Menu.xaml ResourceDictionary file which you can add as MergedDictionary to your UserControl and than do the changes as Subileau described:

1) Add an x:Key to the style with TargetType set to RadMenu. Add the Menu.xaml as MergedDictionary in the resources in your main UserControl page and set the style using StaticResource on you RadMenuThere.

2) change the ContentPresenters with ContentControls in the Menu.xaml
 ContentPresenters are lighter than ContentControls and ContentControl may introduce some Foreground and FontSize issues like these properties may stop working if you set them on the RadMenu.

3) set the Foreground of the ContentControl to one color and animate it in the Focused state to somewhat other color.

4) do this for all RadMenuItem template. There are 2 templates for the RadMenuItem in the horizontal menu line and 2 templates for the RadMenuItems that will appear in Popups.

The XAML Subileau attached is pretty useful.

Kind regards,
Panayot
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.