Styling a shadow border for the RadRibbonTab

[Richard]

Hi,

I am having trouble styling the RadRibbonTab. I want to have a sort of shadow above the tab like in the attached image.
Can someone help me ? Has someone done this, or can someone tell me if it is even possible ?
A sample of how to do this or any directions should be great.

Thanks in advance,

Richard Bergmans

[Lancelot]

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

[Richard]

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

[Lancelot]

Hi Richard,

I see what you are trying to do. I'm going to get to work on this now. What color shadow are you shooting for, what side would you like it to drop on (I'm assuming to the right) and how wide? I will create an example for you that you can take over when I get you started.

Also, one more important thing... Are you using it right ouf of the box or have you set a theme? I can just apply it to the implicit theme and it will work throughout your application instead of just on the page.

Lancelot

[Richard]

Hi Lancelot,

That would be great, I am using the Metro theme which I am trying to adjust.
Pick any color you want, I can change that later on. If you can give me a starting point regarding the shadow I can figure it out from there.

Thanks in advance,

Richard Bergmans

[Lancelot]

 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>
                                </Border>
                            </Grid>
                        </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

[Lancelot]

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