WPF RadTabItem Styling Selected Item not changing

[Heath]

Hi team

I have this

    <Style x:Key="Style.RadTabItem.MainWindow" TargetType="{x:Type telerik:RadTabItem}">
        <!-- Base appearance -->
        <Setter Property="Background" Value="#01000000" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Padding" Value="16,0" />
        <Setter Property="Margin" Value="0,0,0,0" />
        <Setter Property="MinWidth" Value="160" />
        <Setter Property="MaxWidth" Value="240" />
        <Setter Property="IsTabStop" Value="True" />
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="telerikHelpers:ThemeHelper.MouseOverBrush" Value="{DynamicResource Tab.Background.MouseOver}" />
        <Setter Property="telerikHelpers:ThemeHelper.CheckedBrush" Value="{DynamicResource Tab.Background.Selected}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:RadTabItem}">
                    <Border x:Name="OuterBorder"
                            Background="Transparent"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <Grid x:Name="grd_MainTabHeader">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <Path x:Name="pth_Left"
                                  Fill="White"
                                  Data="M0,16 A16,16 0 0 0 16,0 L16,16 L0,16 Z"
                                  VerticalAlignment="Bottom"
                                  Visibility="Collapsed" />

                            <Border x:Name="MainBorder"
                                    Background="{TemplateBinding Background}"
                                    CornerRadius="8,8,0,0"
                                    Grid.Column="1"
                                    HorizontalAlignment="Stretch">
                                <Grid
                                    x:Name="grd_ContentSite"
                                    Margin="0">
                                    <Rectangle x:Name="FocusVisual" 
                                             Opacity="0"
                                             StrokeThickness="1"
                                             Stroke="Black"
                                             StrokeDashArray="1,1" />
                                    <ContentPresenter x:Name="ContentSite"
                                                    ContentSource="Header"
                                                    HorizontalAlignment="Stretch"
                                                    VerticalAlignment="Center"
                                                    Margin="{TemplateBinding Padding}" />
                                </Grid>
                            </Border>

                            <Path x:Name="pth_Right"
                                  Fill="White"
                                  Grid.Column="2"
                                  Data="M8,8 A8,8 0 0 1 0,0 L0,8 L8,8 Z"
                                  VerticalAlignment="Bottom"
                                  Visibility="Collapsed" />
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <!-- Selected state -->
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="MainBorder" Property="Background" Value="White" />
                            <Setter TargetName="grd_MainTabHeader" Property="Margin" Value="-8,0,-8,0" />
                            <Setter TargetName="pth_Left" Property="Visibility" Value="Visible" />
                            <Setter TargetName="pth_Right" Property="Visibility" Value="Visible" />
                        </Trigger>

                        <!-- Mouse over state -->
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True" />
                                <Condition Property="IsSelected" Value="False" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="MainBorder" Property="Background" Value="#e8eaed" />
                            <Setter TargetName="MainBorder" Property="CornerRadius" Value="16" />
                            <Setter TargetName="MainBorder" Property="Margin" Value="8, 0" />
                            <Setter TargetName="grd_ContentSite" Property="Margin" Value="-8, 0" />
                            
                        </MultiTrigger>

                        <!-- Focus state -->
                        <Trigger Property="IsFocused" Value="True">
                            <Setter TargetName="FocusVisual" Property="Opacity" Value="1"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

But it doesn't allow me to change selected items, as in I can't click on the tab to select it.

If I used this

<Style x:Key="Style.RadTabItem.MainWindow" TargetType="{x:Type telerik:RadTabItem}">

        <Setter Property="BorderBrush" Value="{DynamicResource Tab.Border.Selected}" />
        <Setter Property="BorderThickness" Value="0,2,0,0" />
        <Setter Property="Margin" Value="1,0" />
        <Setter Property="telerikHelpers:ThemeHelper.MouseOverBrush" Value="{DynamicResource Tab.Background.MouseOver}" />
        <Setter Property="telerikHelpers:ThemeHelper.CheckedBrush" Value="{DynamicResource Tab.Background.Selected}" />

        <Style.Triggers>
            <Trigger Property="IsSelected" Value="False">
                <Setter Property="BorderBrush" Value="Transparent" />
                <Setter Property="Background" Value="#E4E9FA" />
                <Setter Property="Margin" Value="1,0" />
            </Trigger>
        </Style.Triggers>
    </Style>

It works.

Can you help me identify what I could do to have it work?

Thanks,

H

[Martin Ivanov]

Hello Heath,

The selection happens on click of one of the elements in the default ControlTemplate of RadTabItem. This element is missing, which is why the tab cannot get selected. In general, I would suggest you to avoid replacing the ControlTemplates of Telerik controls completely, as they usually contain important elements for the functionality of the corresponding control. Instead, you can extract the default ControlTemplate and add modifications around the original elements.

Regards,
Martin Ivanov
Progress Telerik