Articles in this section
Category / Section

How to set the Background color of Header and disable TabStrip Button in TabNavigation Control

1 min read

This article describes how to set the Background color of Header and disable TabStrip Button in TabNavigation Control.

Use TabNavigationControl style to set the background color of Header and disable TabStrip Button in TabNavigation Control.

Background color of Header can be set by Border Background and disable the Tab Strip Button by setting IsHitTestVisible property to false in 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:

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied