Home / Community & Support / Developer Productivity Tools Forums / Silverlight > RibbonBar > RadRibbonTab Header Style

• Vadims Geidans

  Posted on Sep 7, 2011 (permalink)

  Hi.
  
  I'm trying to change RadRibbonTab Header style.
  
  All I need is change the header foreground color.
  
  Unfortunately, keys TabStripTabNormalForegroundBrush and TabStripTabSelectedForegroundBrush  is not generating.
  According to http://www.telerik.com/help/silverlight/radribbonbar-styling-ribbon-tab-headers.html, I'm getting all the keys in the generated style, excluding Foregrounds.
  
  Is any other way how to change tab header color?
  
  Many thanks!

  Reply

• Petar Mladenov Petar Mladenov

  Posted on Sep 13, 2011 (permalink)

  Hello Vadims Geidans,

  Unfortunately, it appears that this article is outdated. In order to change this foreground you have to edit the RadRibbonBar's Style, then use the "RibbonRadTabItemStyle". In it, the "HeaderElement" TabItemContentPresenter ' s Foreground property is set to "#000000". 

  <Telerik_Windows_Controls_Primitives:TabItemContentPresenter x:Name="HeaderElement" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" Foreground="#000000" HorizontalAlignment="Center" HorizontalContentAlignment="Center" IsTabStop="False" Margin="0,2,0,1" VerticalAlignment="Center" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>

  In order to change the Foreground when the Tab is Selected, Mouse Hovered, or both you have to edit the Visual States, for example like so ( both Selected and MouseOver state):
  

  <VisualState x:Name="SelectedMouseOver">

                                        <Storyboard>

                                            <ColorAnimation Duration="0" To="{StaticResource TabStripTabSelectedMouseOverOuterBorderColor}" Storyboard.TargetProperty="Color" Storyboard.TargetName="LeftOuterBorderBrush"/>

                                            <ColorAnimation Duration="0" To="{StaticResource TabStripTabSelectedMouseOverOuterBorderColor}" Storyboard.TargetProperty="Color" Storyboard.TargetName="RightOuterBorderBrush"/>

                                            <ColorAnimation Duration="0" To="{StaticResource TabStripTabSelectedMouseOverOuterBorderColor}" Storyboard.TargetProperty="Color" Storyboard.TargetName="MiddleOuterBorderBrush"/>

                                            <ColorAnimation Duration="0" To="{StaticResource TabStripTabSelectedMouseOverLeftInnerBorderColor}" Storyboard.TargetProperty="Color" Storyboard.TargetName="LeftInnerBorderBrush"/>

                                            <ColorAnimation Duration="0" To="{StaticResource TabStripTabSelectedMouseOverRightInnerBorderColor}" Storyboard.TargetProperty="Color" Storyboard.TargetName="RightInnerBorderBrush"/>

                                            <ColorAnimation Duration="0" To="{StaticResource TabStripTabSelectedMouseOverMiddleInnerBorderColor}" Storyboard.TargetProperty="Color" Storyboard.TargetName="MiddleInnerBorderBrush"/>

                                            <ColorAnimation Duration="0" To="{StaticResource TabStripTabSelectedBackgroundColor1}" Storyboard.TargetProperty="Color" Storyboard.TargetName="BackgroundBrush1"/>

                                            <ColorAnimation Duration="0" To="{StaticResource TabStripTabSelectedBackgroundColor2}" Storyboard.TargetProperty="Color" Storyboard.TargetName="BackgroundBrush2"/>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="wrapper">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="4,1,3,0"/>

                                            </ObjectAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="HeaderElement">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="0,1,0,1"/>

                                            </ObjectAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="HeaderElement">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Blue" />

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

  The lines in yellow are manually added.
  We know this approach is far away from elegant but  that's why we highly suggest you to use the new RadRibbonView control where most of the issues from the RibbonBar are resolved and the style is too simple and easy to maintain/change.
  Please let us know if you need more info or assistance. Best wishes,
  Petar Mladenov
  the Telerik team

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  Attached files

  • RibbonBarTest.zip

  Reply

• Vadims Geidans

  Posted on Sep 18, 2011 (permalink)

  Thanks a lot for reply.
  
  This solution is really working for me.
  In the RibbonView I found nearly the same solution.
  Now is ok!
  
  Best Regards,
  
  Vadims.

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > RibbonBar > RadRibbonTab Header Style