Category / Section
How to set the Background color of Header and disable TabStrip Button in TabNavigation Control
3 mins read
This article describes how to set the Background color of Header and disable TabStrip Button in TabNavigation Control.
Use the TabNavigationControl style to set the background color of Header and disable TabStrip Button in TabNavigation Control.
The background color of the Header can be set using the Border Background and the Tab Strip Button can be disabled by setting the IsHitTestVisible property to false in the TabNavigation Control Template.
The following code example demonstrates the same.
XAML
<Window x:Class="TabNaviga.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="TabNavigationControl" Height="350" Width="525" xmlns:syncfusion="http://schemas.syncfusion.com/wpf"> <Window.Resources> <Style x:Key="TabNavigationControlStyle" TargetType="syncfusion:TabNavigationControl"> <Setter Property="BorderBrush" Value="{StaticResource BorderBrush}"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="Background" Value="{StaticResource BackgroundBrush}" /> <Setter Property="Foreground" Value="{StaticResource Foreground}" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="syncfusion:TabNavigationControl"> <Grid FocusVisualStyle="{x:Null}"> <Border CornerRadius="8" Margin="0,0,0,0" BorderBrush="{TemplateBinding BorderBrush} FocusVisualStyle="{x:Null}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}"> <Grid x:Name="Root" FocusVisualStyle="{x:Null}" IsManipulationEnabled="{TemplateBinding EnableTouch}"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <ContentControl x:Name="PART_OldContent" IsTabStop="False" Grid.Row="0" /> <ContentControl x:Name="PART_SelectedContent" IsTabStop="{Binding Path=SelectedTabItem.IsTabStop, RelativeSource= {RelativeSource FindAncestor, AncestorType={x:Type syncfusion:TabNavigationControl}}}" Content="{Binding Path=SelectedTabItem.Content, RelativeSource={RelativeSource TemplatedParent}}" Grid.Row="0" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" ContentTemplate="{Binding Path=ItemTemplate,RelativeSource={RelativeSource TemplatedParent}}"> </ContentControl> <ContentControl x:Name="PART_FrontOldContent" IsTabStop="False" Grid.Row="0" IsHitTestVisible="False" /> <Border Grid.Row="1" Visibility="{TemplateBinding HeaderVisibility}" Background="Blue" BorderBrush="{StaticResource BorderBrush}" CornerRadius="0 0 8 8" Height="37"> <Grid Margin="3,0,0,0"> <ContentControl IsTabStop="False" Content="{Binding Path=SelectedTabItem.Header, RelativeSource= {RelativeSource FindAncestor, AncestorType= {x:Type syncfusion:TabNavigationControl}}}" VerticalAlignment="Center" Margin="3" FontWeight="Bold" /> </Grid> </Border> <ItemsPresenter IsHitTestVisible="False" HorizontalAlignment="Center" Opacity="{Binding Path=TabStripVisibility, RelativeSource= {RelativeSource FindAncestor, AncestorType= {x:Type syncfusion:TabNavigationControl}}, Converter= {StaticResource BooleanToOpacityConvert}}" VerticalAlignment="Center" Grid.Row="1" /> </Grid> </Border> <Button Visibility="{TemplateBinding NavigationButtonVisibility}" FontSize="20" Foreground="{StaticResource BorderBrush}" FontFamily="Wingdings 3" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{StaticResource NavigationButtonStyle}" Margin="-20 0 0 0" Command="{Binding Path=PreviousCommand, RelativeSource={RelativeSource TemplatedParent}}"> <Button.Template> <ControlTemplate TargetType="Button"> <Grid Cursor="Hand"> <Rectangle Height="40" Width="40" Stroke="{StaticResource BorderBrush}" Fill="{StaticResource BackgroundBrush}" RadiusX="12" RadiusY="12" x:Name="Ellipse" /> <Path x:Name="PART_Presenter" Data="M-68.5,52 L-54,69.5 -68.787684,85.24501" HorizontalAlignment="Center" Margin="20,0,0,0" Stretch="Fill" Stroke="{StaticResource BorderBrush}" Width="10.03" Fill="{x:Null}" StrokeThickness="3" Height="18.553" VerticalAlignment="Center"> <Path.RenderTransform> <TransformGroup> <ScaleTransform ScaleY="1" ScaleX="-1" /> <SkewTransform AngleY="0" AngleX="0" /> <RotateTransform Angle="0" /> <TranslateTransform /> </TransformGroup> </Path.RenderTransform> </Path> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Visibility" Value="Collapsed" TargetName="Ellipse"></Setter> <Setter Property="Visibility" Value="Collapsed" TargetName="PART_Presenter"></Setter> </Trigger> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Fill" Value="{StaticResource MouseOverBrush}" TargetName="Ellipse"></Setter> <Setter Property="Stroke" Value="{StaticResource MouseOverBorderBrush}" TargetName="Ellipse" /> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter Property="Fill" Value="{StaticResource SelectedBrush}" TargetName="Ellipse" /> <Setter Property="Stroke" Value="{StaticResource SelectedBorderBrush}" TargetName="Ellipse" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Button.Template> </Button> <Button Grid.Row="1" Visibility="{TemplateBinding NavigationButtonVisibility}" FontSize="20" Foreground="{StaticResource BorderBrush}" FontFamily="Wingdings 3" HorizontalAlignment="Right" VerticalAlignment="Center" Style="{StaticResource NavigationButtonStyle}" Margin="0 0 -20 0" Command="{Binding Path=NextCommand, RelativeSource={RelativeSource TemplatedParent}}"> <Button.Template> <ControlTemplate TargetType="Button"> <Grid Cursor="Hand"> <Rectangle Height="40" Width="40" Stroke="{StaticResource BorderBrush}" Fill="{StaticResource BackgroundBrush}" RadiusX="12" RadiusY="12" x:Name="Ellipse" /> <Path x:Name="PART_Presenter" Data="M-68.5,52 L-54,69.5 -68.787684,85.24501" HorizontalAlignment="Center" Stretch="Fill" Stroke="#FF6593CF" Width="10.03" Fill="{x:Null}" StrokeThickness="3" Height="18.553" VerticalAlignment="Center" /> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Visibility" Value="Collapsed" TargetName="Ellipse"></Setter> <Setter Property="Visibility" Value="Collapsed" TargetName="PART_Presenter"></Setter> </Trigger> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Fill" Value="{StaticResource MouseOverBrush}" TargetName="Ellipse"></Setter> <Setter Property="Stroke" Value="{StaticResource MouseOverBorderBrush}" TargetName="Ellipse" /> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter Property="Fill" Value="{StaticResource SelectedBrush}" TargetName="Ellipse" /> <Setter Property="Stroke" Value="{StaticResource SelectedBorderBrush}" TargetName="Ellipse" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Button.Template> </Button> </Grid> </ControlTemplate> </Setter.Value> </Setter> <Setter Property="ItemsPanel"> <Setter.Value> <ItemsPanelTemplate> <VirtualizingStackPanel x:Name="PART_ItemsPanel" Orientation="Horizontal" /> </ItemsPanelTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <Grid> <syncfusion:TabNavigationControl Name="TabNav" Style="{StaticResource TabNavigationControlStyle}" TransitionEffect="Slide" Width="400" Height="250" TabStripVisibility="Visible"> <syncfusion:TabNavigationItem Header="1"> <syncfusion:TabNavigationItem.Content> <Grid> <TextBlock Text="Item 1"/> </Grid> </syncfusion:TabNavigationItem.Content> </syncfusion:TabNavigationItem> <syncfusion:TabNavigationItem Header="2"> <syncfusion:TabNavigationItem.Content> <Grid> <TextBlock Text="Item 2"/> </Grid> </syncfusion:TabNavigationItem.Content> </syncfusion:TabNavigationItem> <syncfusion:TabNavigationItem Header="3"> <syncfusion:TabNavigationItem.Content> <Grid> <TextBlock Text="Item 3"/> </Grid> </syncfusion:TabNavigationItem.Content> </syncfusion:TabNavigationItem> <syncfusion:TabNavigationItem Header="4"> <syncfusion:TabNavigationItem.Content> <Grid> <TextBlock Text="Item 4"/> </Grid> </syncfusion:TabNavigationItem.Content> </syncfusion:TabNavigationItem> </syncfusion:TabNavigationControl> </Grid> </Window>
The output for the above code is shown below: