Styling tabitem

[Gama]

I am trying to change the selected tab's background color.  I've managed to do this the following code, but when i run the project, I can't select any tabs at all.  Nothing happens when I click a tab.

<Window.Resources>
    <Style TargetType="{x:Type telerik:RadTabItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:RadTabItem}">
                    <Grid >
                        <Border
                             Name="Border"
                             Background="LightBlue"
                             BorderBrush="Black"
                             BorderThickness="1,1,1,1"
                             CornerRadius="6,6,0,0" >
                            <ContentPresenter x:Name="ContentSite"  Margin="12,2,12,2" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header"/>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="LightBlue" />
                        </Trigger>
                        <Trigger Property="IsSelected" Value="False">
                            <Setter TargetName="Border" Property="Background" Value="LightGray" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

[Tina Stancheva]

Hi Gama,

When you edit the ControlTemplate of the RadTabItem you need to keep the x:Name property of the Grid control that hosts the ControlTemplate elements of the item:

<Grid x:Name="wrapper">
    <Border x:Name="Border" Background="LightBlue" BorderBrush="Black"
            BorderThickness="1,1,1,1" CornerRadius="6,6,0,0">
        <ContentPresenter Margin="12,2,12,2"
                    HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            ContentSource="Header"/>
    </Border>
</Grid>

This name is used in the implementation logic of the control and this is why is a required part of the template of the RadTabItem. Give this a try and let us know if it works for you.

Greetings,
Tina Stancheva
the Telerik team

[Richard]

Old post I know, but I found myself asking the same question (how to change selected tab background colour) so I thought I'd share a simple solution.

<Window.Resources>
    <Style TargetType="telerik:RadTabItem" BasedOn="{StaticResource RadTabItemStyle}">
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="true">
                <Setter Property="Background" Value="White"></Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>