TabControl Style issue when Customize the TabItem Header Template

2 posts, 0 answers
  1. Hammad
    Hammad avatar
    2 posts
    Member since:
    Nov 2016

    Posted 26 Jun 2018 Link to this post

    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 

  2. Martin Ivanov
    Admin
    Martin Ivanov avatar
    2090 posts

    Posted 28 Jun 2018 Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top