This is a migrated thread and some comments may be shown as answers.

Styling a shadow border for the RadRibbonTab

6 Answers 215 Views

RibbonView and RibbonWindow

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

6 Answers, 1 is accepted

answered on 05 Jun 2012, 02:39 PM

Hi Richard,

I looked your screenshot and am not completely clear on what part you want the shadow underneath. what I can tell you at this point is the RadRibbonBar is extremely customizable. Take a look at these documents.

As you can see, just about every part of the ribbonBar can be styled just the way you want it to be. The link I just gave you brings you to the Overview page in the help documentation for the control. Go ahead and select "Styling the Ribbon Tab Headers", when you get to the page, notice how the control has FIFTEEN different parts you can stylize! The same goes for every other part of the control (and RadControls in general), you can customize it the way you want to.

Let me know if you can't nail down what you are trying to do. We'll dig in deeper together to try and get your goal accomplished.

Good Luck,
Lancelot

answered on 05 Jun 2012, 02:44 PM

RadRibbonView.jpg

Hi,

I have seen the documentation, but can not figure out how to do it.
In the attached image I have placed a red circle arount the shadow I am talking about.
It is the shadow above the tabs from the RibbonView.

With regards,

Richard Bergmans

answered on 05 Jun 2012, 04:13 PM

Hi Richard,

The part of the control you want to alter is the RadRibbonTab.Header (Make sure you are using a RadRibbonView control and NOT a RadRibbonBar. The latter is now obsolete and has been upgraded into the former)

This link will bring you right to a tutorial on how to change what you're looking for. In addition, I have pasted the code below (inside a UserControlResources tag) for you to get started. Read the documentatin to familiarize yourself with the template.

That link I gave you helps step you through the process to get into the template. For your purposes we are going to focus on one part. Look down the visual tree and notice the HeaderPanel. Expand this item and you'll see a border, MouseOverVisual, SelectedVisual, and HeaderElement.

Here is the place you want make your changes. To give you a head start, I've pasted some code below for you to use. It is the entire UserControl.Resources and root grid of a RadRibbonView control with a template ready for you to alter. The other tabs are there see compare against.

<UserControl.Resources>

<LinearGradientBrush x:Key="TabStripTabDividerBrush" EndPoint="0,1" StartPoint="0,0">

<GradientStop Color="#4c4c4c" Offset="0"/>

<GradientStop Color="#3b3b3b" Offset="0.3"/>

<GradientStop Color="#363636" Offset="1"/>

</LinearGradientBrush>

<SolidColorBrush x:Key="TabMouseOverOuterBorder" Color="#FF848484"/>

<SolidColorBrush x:Key="TabMouseOverInnerBorder" Color="#FFFFFFFF"/>

<LinearGradientBrush x:Key="TabMouseOverBackground" EndPoint="0,1" StartPoint="0,0">

<GradientStop Color="#FFFFFBA3" Offset="0"/>

<GradientStop Color="#FFFFFBDA" Offset="1"/>

</LinearGradientBrush>

<SolidColorBrush x:Key="TabSelectedOuterBorder" Color="#FF848484"/>

<SolidColorBrush x:Key="TabSelectedInnerBorder" Color="#FFFFFFFF"/>

<LinearGradientBrush x:Key="TabSelectedBackground" EndPoint="0,1" StartPoint="0,0">

<GradientStop Color="#FFFFFFFF" Offset="0"/>

<GradientStop Color="#FFFAFAFA" Offset="1"/>

</LinearGradientBrush>

<SolidColorBrush x:Key="RibbonTabOuterBorderBrush" Color="#FF848484"/>

<LinearGradientBrush x:Key="RibbonTabBackgroundBrush" EndPoint="0,1" StartPoint="0,0">

<GradientStop Color="#FFFEFEFE"/>

<GradientStop Color="#FFD4D4D4" Offset="1"/>

</LinearGradientBrush>

<SolidColorBrush x:Key="RibbonTabInnerBorderBrush" Color="Transparent"/>

<telerik:Office_BlackTheme x:Key="Theme"/>

<CornerRadius x:Key="RibbonTabInnerCornerRadius">2.5</CornerRadius>

<CornerRadius x:Key="RibbonTabOuterCornerRadius">3.5</CornerRadius>

<Style x:Key="RadRibbonTabStyle" TargetType="telerik:RadRibbonTab">

<Setter Property="Background" Value="Transparent"/>

<Setter Property="BorderThickness" Value="1,0,0,0"/>

<Setter Property="Foreground" Value="#000000"/>

<Setter Property="BorderBrush" Value="{StaticResource TabStripTabDividerBrush}"/>

<Setter Property="IsTabStop" Value="False"/>

<Setter Property="Margin" Value="2 2 2 0"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:RadRibbonTab">

<Grid x:Name="RootPanel">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverVisual">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="MouseOver">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverVisual">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="SelectionStates">

<VisualState x:Name="Selected">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SelectedVisual">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="NotSelected">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SelectedVisual">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="EnabledStates">

<VisualState x:Name="Disabled">

<Storyboard>

<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HeaderElement"/>

</Storyboard>

</VisualState>

<VisualState x:Name="Enabled"/>

</VisualStateGroup>

<VisualStateGroup x:Name="ContextualTabStates">

<VisualState x:Name="NotContextualTab">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="HeaderPanel">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="ActiveContextualTab">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="HeaderPanel">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="InactiveContextualTab">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="HeaderPanel">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Rectangle x:Name="TabSeparator" Fill="{TemplateBinding BorderBrush}" HorizontalAlignment="Right" Margin="0,0,-3,0" Visibility="Collapsed" VerticalAlignment="Stretch" Width="1"/>

<Grid x:Name="HeaderPanel" Visibility="{Binding HeaderVisibility, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">

<Border Background="{TemplateBinding Background}"/>

<Border x:Name="MouseOverVisual" BorderBrush="{StaticResource TabMouseOverOuterBorder}" BorderThickness="1 1 1 0" CornerRadius="3 3 0 0" Visibility="Collapsed">

<Border BorderBrush="{StaticResource TabMouseOverInnerBorder}" BorderThickness="1 1 1 0" Background="{StaticResource TabMouseOverBackground}" CornerRadius="2 2 0 0"/>

</Border>

<Border x:Name="SelectedVisual" BorderBrush="{StaticResource TabSelectedOuterBorder}" BorderThickness="1 1 1 0" CornerRadius="3 3 0 0" Visibility="Collapsed">

<Border BorderBrush="{StaticResource TabSelectedInnerBorder}" BorderThickness="1 1 1 0" Background="{StaticResource TabSelectedBackground}" CornerRadius="2 2 0 0"/>

</Border>

<Telerik_Windows_Controls_Primitives:TabItemContentPresenter x:Name="HeaderElement" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Center" HorizontalContentAlignment="Center" IsTabStop="False" Margin="4,2" VerticalAlignment="Center" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>

</Grid>

<Grid x:Name="ContentPanel" Visibility="{TemplateBinding Visibility}" Width="0">

<Border x:Name="OuterBorder" BorderBrush="{StaticResource RibbonTabOuterBorderBrush}" BorderThickness="1" Background="{StaticResource RibbonTabBackgroundBrush}" CornerRadius="{StaticResource RibbonTabOuterCornerRadius}">

<Border x:Name="InnerBorder" BorderBrush="{StaticResource RibbonTabInnerBorderBrush}" BorderThickness="1" CornerRadius="{StaticResource RibbonTabInnerCornerRadius}">

<Telerik_Windows_Controls_RibbonView_Primitives:RibbonScrollViewer x:Name="TabItemsScrollViewer" telerik:StyleManager.Theme="{StaticResource Theme}">

<ItemsPresenter HorizontalAlignment="Left"/>

</Telerik_Windows_Controls_RibbonView_Primitives:RibbonScrollViewer>

</Border>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

<Setter Property="ItemsPanel">

<Setter.Value>

<ItemsPanelTemplate>

<Telerik_Windows_Controls_RibbonView_Primitives:RibbonGroupsPanel/>

</ItemsPanelTemplate>

</Setter.Value>

</Setter>

</Style>

</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">

<telerik:RadRibbonView d:LayoutOverrides="Width">

<telerik:RadRibbonView.ContextualGroups>

<telerik:RadRibbonContextualGroup x:Name="ContextualGroup1"

Header="Group 1"

IsActive="False"

Color="Coral" />

<telerik:RadRibbonContextualGroup x:Name="ContextualGroup2"

Header="Group 2"

IsActive="False"

Color="Orchid" />

</telerik:RadRibbonView.ContextualGroups>

<telerik:RadRibbonTab x:Name="ThisTabIsTheOneYouWant" Header="RibbonTab" Style="{StaticResource RadRibbonTabStyle}">

<telerik:RadRibbonGroup Header="RibbonGroup"/>

</telerik:RadRibbonTab>

<telerik:RadRibbonTab x:Name="unaltered_Tab" ContextualGroupName="ContextualGroup1" Header="ContextualTab 1.1" />

</telerik:RadRibbonView>

</Grid>

I hope this helps!

Good Luck,
Lancelot

Accepted

answered on 05 Jun 2012, 07:34 PM

Hi Richard,

There is one more thing I should mention here. In the same template you can alter the MouseOver appearances. While inside the template I've written in my last post, notice there are other values you can set.

If you are altering the Tab itself, you should condsider applying the same theme style to your RibbonGroup. This documentation will step you through editing a copy of that template as well. It is the same process as a Tab's template. The documentation will explain how the default style is laid out. What you do with it from there is all about your creativity and desire to present the control the way you want it to be :)

Lancelot