RadTabControl Header Background Color

[Brian]

I could not find and easy way to change the background color of the Tab Control.  By header, I mean the entire region behind all the tabs.  I would like to be able to quickly set it to either a solid color or a gradient brush.  It appears that I could do this with a heavy duty method like replacing the entire TopTemplate, but that is not my first choice.
 It would be nice to be able to do something like this:

<Application.Resources>
   <LinearGradientBrush x:Key="TabHeaderBrush" Opacity="0.55" StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="LightGray"  Offset="0.0" />
        <GradientStop Color="DarkGray" Offset="1.0" />
   </LinearGradientBrush>
</Application.Resources>

<telerikNav:RadTabControl HeaderBrush="{StaticResource TabHeaderBrush}">
</telerikNav:RadTabControl>

which would change the color behind all the tabs in the header as you click on them.  Note that this is NOT the color immediately around the text in the TabItem Header area, it is what stretches the entire width of the TabControl.
Does this exist?  If not, can you add it as a feature in the next release please?  Thanks!

[Dimitrina]

Hello Brian Womack, PhD,

Please find attached an example.
If you have any further question please do not hesitate to ask.

I hope this will help you.

Regards,
Dimitrina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Brian]

Thanks a ton, you guys ROCK!

So, the key was to add the BackgroundVisibility="Collapsed" property to RadTabControl to let the underlying background to show through.  Notice I moved this property into the TabStyle resource.

Here is how I implement my code using good resource and style practice, which makes it easy to use a common resource assembly (which is how I do it instead of putting them in Grid.Resources):

<Window x:Class="TabControl_HeaderBackground.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:t="http://schemas.telerik.com/2008/xaml/presentation"
    WindowStyle="ThreeDBorderWindow" Background="Black"  Foreground="Tan" BorderBrush="RoyalBlue" OpacityMask="Cyan">

    <Grid>
        <Grid.Resources>
            <FontFamily x:Key="TabItemFont">Palatino Linotype,Tahoma</FontFamily>
            <LinearGradientBrush x:Key="MainBackgroundBrush">
                <GradientStop Color="#FF221144"  Offset="0.0" />
                <GradientStop Color="#FF776688" Offset="1.0" />
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="TabBorderBrush" StartPoint="0,0" EndPoint="0,1">
                <GradientStop Color="#FF443355"  Offset="0.0" />
                <GradientStop Color="#FF554466" Offset="1.0" />
            </LinearGradientBrush>
            <Style x:Key="MainBackgroundStyle" TargetType="{x:Type Rectangle}">
                <Setter Property="Margin" Value="2" />
                <Setter Property="RadiusX" Value="9" />
                <Setter Property="RadiusY" Value="9" />
                <Setter Property="Fill" Value="{StaticResource MainBackgroundBrush}" />
            </Style>
            <Style x:Key="TabBorderStyle" TargetType="{x:Type Border}">
                <Setter Property="Opacity" Value="0.88" />
                <Setter Property="Margin" Value="4, 1, 4, 0" /><!-- Left, Top, Right, Bottom -->
                <Setter Property="Padding" Value="4, 4, 4, 5" />
                <Setter Property="CornerRadius" Value="6" />
                <Setter Property="Background" Value="{StaticResource TabBorderBrush}" />
                <Setter Property="VerticalAlignment" Value="Stretch" />
                <Setter Property="HorizontalAlignment" Value="Stretch" />
                <Setter Property="FlowDirection" Value="LeftToRight" />
            </Style>
            <Style x:Key="TabStyle" TargetType="{x:Type t:RadTabControl}">
                <Setter Property="Opacity" Value="1.0" />
                <Setter Property="BackgroundVisibility" Value="Collapsed" />
                <Setter Property="FontFamily" Value="{StaticResource TabItemFont}" />
                <Setter Property="FontSize" Value="11" />
                <Setter Property="VerticalAlignment" Value="Stretch" />
                <Setter Property="HorizontalAlignment" Value="Stretch" />
            </Style>
            <Style x:Key="TabItemStyle">
                <Setter Property="Control.Opacity" Value="1.0" />
                <Setter Property="Control.Padding" Value="11, 0, 11, 0" /><!-- Left, Top, Right, Bottom -->
                <Setter Property="Control.VerticalAlignment" Value="Stretch" />
                <Setter Property="Control.HorizontalAlignment" Value="Stretch" />
                <Setter Property="Control.Foreground" Value="#FFE9E9B1" />
            </Style>
        </Grid.Resources>
        <Rectangle Style="{StaticResource MainBackgroundStyle}"/>
        <Border Style="{StaticResource TabBorderStyle}">
            <t:RadTabControl Style="{StaticResource TabStyle}">
                <t:RadTabItem Header="Item1" Content="Content1" Style="{StaticResource TabItemStyle}" />
                <t:RadTabItem Header="Item2" Content="Content2" Style="{StaticResource TabItemStyle}" />
                <t:RadTabItem Header="Item3" Content="Content3" Style="{StaticResource TabItemStyle}" />
                <t:RadTabItem Header="Item4" Content="Content4" Style="{StaticResource TabItemStyle}" />
            </t:RadTabControl>
        </Border>
    </Grid>
</Window>