How to style the TabHeader background?

[Tormod]

Hi. 
I have a RadTabControl with a data bound ItemTemplate.

I am trying to tweak the data template or radtabcontrol styling so that the individual tabs will be clearly separated for the user.

The DataTemplate is a grid. If I set the background of the grid, I get a rectangular background (ie the shape of the grid instance) that does not match the nice outline with rounded corners that is highlighted when you hover over the item with the mouse. The datatemplate item does not have a background (obviously) and setting the the TabHeaderBackGround on the RadTabControl causes the entire header (tab headers as well as the canvas backgrounds) to have this background so this does not cause the individual selectable tabs to stand out, either.

How do I set a color for the same area that is highlighted when the the mouse hovers over a tab item?

[Petar Mladenov]

Hello Tormod,

 I prepared a sample for you in which , the default RadTabItem Style is edited. The "Normal" and "Selected" Visual States are equal - this makes every tab clearly separated. Could you please check this out and let us know if it satisfies you? Thank you in advance.

Greetings,
Petar Mladenov
the Telerik team

[Tormod]

Thank you for your answer. Cool project, but it didn't address my issue.

In your project, when the mouse is not over "Tab1", then there is no visual separation from "Tab2". This is the problem I am trying to address.

I did learn something from your sample, however (aside from the fact that I know much too little about styles, animations and visual state manager).

Today, my tabheader datatemplate is just a grid with a stackpanel. However, when the mouse is over, a border that is wrapping my datatemplate is highlighted. I wish to be able to set the background of this border when the mouse is not over. How do I access it from the markup?
Do I have to maintain an inline plethora of visual markup overriding the default behavior to achieve this simple change from the default behavior? 
It's not the end of the world if I do. I probably need to read up on the subject, anyway.

[Petar Mladenov]

Hi Tormod,

 Please check out the new solution,the RadTabControl is now bound to collection of ViewModels and has defined an ItemTemplate:

<Grid>
      <Grid.Resources>
          <DataTemplate x:Key="itemTemplate">
              <Grid Background="DeepSkyBlue">
                  <TextBlock Text="{Binding Name}" />
              </Grid>
          </DataTemplate>
      </Grid.Resources>

      <telerik:RadTabControl x:Name="tabControl" ItemTemplate="{StaticResource itemTemplate}"/>
  </Grid>

This DataTemplate is actually set as a HeaderTemplate of the RadTabItems:

<telerik:LayoutTransformControl x:Name="OrientationTransform" IsTabStop="False">
                                <ContentPresenter x:Name="HeaderElement"
                                                  ContentTemplate="{TemplateBinding HeaderTemplate}"
                                                  Content="{TemplateBinding Content}"
                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="True" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </telerik:LayoutTransformControl>

So I guess the answer is now clear - if you need to changed colors of the Grid in the DataTemplate - you have to do it inline, if you need to change the appearance outside this Grid , you will have to play with the VisualStates in the Resources (the extracted RadTabItem's Style).

Kind regards,
Petar Mladenov
the Telerik team