change hover color?

13 posts, 0 answers
  1. Ulrich Fiege
    Ulrich  Fiege avatar
    62 posts
    Member since:
    Sep 2005

    Posted 11 Mar 2010 Link to this post

    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 ...
  2. Pana
    Admin
    Pana avatar
    748 posts

    Posted 12 Mar 2010 Link to this post

    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.
  3. DevCraft banner
  4. Ludovic Gerbault
    Ludovic Gerbault avatar
    226 posts
    Member since:
    Apr 2009

    Posted 16 Mar 2010 Link to this post

    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 ?
  5. Pana
    Admin
    Pana avatar
    748 posts

    Posted 16 Mar 2010 Link to this post

    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.
  6. Jane
    Jane avatar
    3 posts
    Member since:
    Mar 2010

    Posted 31 Mar 2010 Link to this post

    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.
  7. Ludovic Gerbault
    Ludovic Gerbault avatar
    226 posts
    Member since:
    Apr 2009

    Posted 31 Mar 2010 Link to this post

    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.
  8. Pana
    Admin
    Pana avatar
    748 posts

    Posted 06 Apr 2010 Link to this post

    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.
  9. Ludovic Gerbault
    Ludovic Gerbault avatar
    226 posts
    Member since:
    Apr 2009

    Posted 06 Apr 2010 Link to this post

    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.
  10. Pana
    Admin
    Pana avatar
    748 posts

    Posted 09 Apr 2010 Link to this post

    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.
  11. Ludovic Gerbault
    Ludovic Gerbault avatar
    226 posts
    Member since:
    Apr 2009

    Posted 09 Apr 2010 Link to this post

    The focus state works like a charm, thanks.
  12. Darren Qian
    Darren Qian avatar
    3 posts
    Member since:
    Mar 2010

    Posted 25 Apr 2010 Link to this post

    Can you send me a demo,I also face this issue and it really urgent,please help
  13. Ludovic Gerbault
    Ludovic Gerbault avatar
    226 posts
    Member since:
    Apr 2009

    Posted 26 Apr 2010 Link to this post

    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
  14. Pana
    Admin
    Pana avatar
    748 posts

    Posted 28 Apr 2010 Link to this post

    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.
Back to Top
DevCraft banner