TabControl Style issue when Customize the TabItem Header Template

[Hammad]

Hi , 

I am facing an issue of SelectionChangeEvent when customizing the RadTabItem Header using Header Template in Style . Following Style for HeaderTemplate 
 <Setter Property="HeaderTemplate" >
                             <Setter.Value>
                                 <DataTemplate>
                                          <StackPanel Orientation="Horizontal" VerticalAlignment="Center" >
                                         <TextBlock Text="{Binding   TabHeader}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,0,5,0"></TextBlock>
                                         <Button Content="x" BorderThickness="0"  Background="Transparent" HorizontalAlignment="Center" Margin="0,0,5,0" V ></Button>
                                     </StackPanel>
                                 </DataTemplate>
                             </Setter.Value>
                        </Setter>

 

Using Following Template Style

<Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type telerik:RadTabItem}">
                                <Grid>
                                    <Border Name="Border" Background="#FF6E6C67"
                                            
                                            BorderThickness="1,1,1,1" 
                                            CornerRadius="5"
                                            >
                                        <ContentPresenter
                                            x:Name="ContentSite" 
                                            ContentSource="Header"
                                            VerticalAlignment="Center"
                                            HorizontalAlignment="Center" 
                                            RecognizesAccessKey="True"/>
                                    </Border>
                                 
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter TargetName="Border" Property="BorderThickness" Value="2,2,2,0"></Setter>
                                        <Setter TargetName="Border" Property="Margin" Value="0,-3,0,0"></Setter>
                                        <Setter TargetName="Border" Property="Background" Value="Red" />
                                    </Trigger>
                                    <Trigger Property="IsEnabled" Value="False">
                                        <Setter TargetName="Border" Property="Background" Value="Green" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>

Please answer me if there is any issue in the above given Style 
Thanks 

[Martin Ivanov]

Hello Hammad,

Can you please tell me what issue you are experiencing with the custom style and header template? Is there an error or a visual/functional glitch? 

Note that the Button opening tag in the HeaderTemplate from your code snippet has a small V letter in the end which will produce a design-time error and the application won't run properly. You can remove this and see if the issue gets resolved.

<Setter Property="HeaderTemplate" >
     <Setter.Value>
         <DataTemplate>
                  <StackPanel Orientation="Horizontal" VerticalAlignment="Center" >
                 <TextBlock Text="{Binding   TabHeader}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,0,5,0"></TextBlock>
                 <Button Content="x" BorderThickness="0"  Background="Transparent" HorizontalAlignment="Center" Margin="0,0,5,0" V ></Button>
             </StackPanel>
         </DataTemplate>
     </Setter.Value>
</Setter>

Regards,
Martin Ivanov
Progress Telerik