Styling tabitem

2 posts, 0 answers
  1. Gama
    Gama avatar
    18 posts
    Member since:
    Jun 2010

    Posted 18 Nov 2011 Link to this post

    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>
  2.
  3. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3299 posts

    Posted 23 Nov 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top