This is a migrated thread and some comments may be shown as answers.

How to Change Selected Tab color in RadTabControl

1 Answer 1092 Views
TabControl
This is a migrated thread and some comments may be shown as answers.
Arshad
Top achievements
Rank 1
Arshad asked on 20 Apr 2016, 12:44 PM

I have a tab control with two tab items in it.It works perfectly in normal style .But when i applied some styles in XAML the tabs are not swtiching and i couldn't select an tab item too why its so?? Below is the style which i applied to tabcontrol

 

<Style TargetType="{x:Type telerik:RadTabItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type telerik:RadTabItem}">
                <Grid>
                    <Border Name="Border" Margin="0,0,2,0" Background="#828282" BorderBrush="#828282" BorderThickness="1"  >
                        <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center"
                            HorizontalAlignment="Center" ContentSource="Header"  RecognizesAccessKey="True"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Panel.ZIndex" Value="100" />
                        <Setter TargetName="Border" Property="Background" Value="#CDCDCD" />
                        <Setter TargetName="Border" Property="BorderBrush" Value="#CDCDCD" />
                        <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

and here is the tabcontrol code

 

<Grid>
    <telerik:RadTabControl Margin="36,10,64,37">
        <telerik:RadTabItem x:Name="RadTabItem" Header="RadTab 1" Height="23" Width="59">
            <Grid Background="Transparent">
                <Label>RadTabItem1</Label>
            </Grid>
        </telerik:RadTabItem>
        <telerik:RadTabItem x:Name="RadTabItem2" Header="RadTab 2" Height="23" Width="59">
            <Grid Background="Transparent">
                <Label>RadTabItem2</Label>
            </Grid>
        </telerik:RadTabItem>
    </telerik:RadTabControl>
</Grid>

What am i doing wrongly ???

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 22 Apr 2016, 07:57 AM
Hello Arshad,

The observed problem is due to the custom Style which is currently replacing the whole style of the RadTabItem. By editing a copy of our Control Template you preserve all of the functionality and styling and you can edit the concrete states, borders, backgrounds etc. The logic of the interactions with the TabItems is based on the items in the Control Template, so the Style should include it as well. If you want to extend it or change it, first you could remove the current custom style, in order not to interfere, then you could extract the Control Template from the RadTabItem and make customization to it.

Regards,
Martin
Telerik
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Tags
TabControl
Asked by
Arshad
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or