Category / Section
How to change the tab panel (tabitem headers) position to center in WPF TabControl?
2 mins read
In WPF TabControl (TabControlExt) the tab item headers can be positioned at the center position by editing the style for TabControlExt. In designer view, Right click over TabControlExt in and select Edit Template and then select Edit a Copy option.
Locate TabPanelAdv in the control template of TabControlExt and set the HorizontalAlignment property value as Center.
MainWindow.xaml:
<Window x:Class="TabControlAlignment.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:TabControlAlignment" xmlns:syncfusion="http://schemas.syncfusion.com/wpf" WindowStartupLocation="CenterScreen" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Window.Resources> <Style x:Key="NewtabControlExtStyle" TargetType="syncfusion:TabControlExt"> <Setter Property="BorderThickness" Value="1"/> <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/> <Style.Triggers> <MultiDataTrigger> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type syncfusion:TabControlExt}"> <Grid x:Name="TabControlGrid" Background="{TemplateBinding Background}" ClipToBounds="False" SnapsToDevicePixels="True" KeyboardNavigation.TabNavigation="Local"> <Grid.ColumnDefinitions> <ColumnDefinition x:Name="ColumnDefinition0"/> <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition x:Name="RowDefinition0" Height="Auto"/> <RowDefinition x:Name="RowDefinition1" Height="*"/> </Grid.RowDefinitions> <syncfusion:HeaderPanel x:Name="HeaderPanel" Background="{TemplateBinding TabPanelBackground}" Grid.Column="0" Focusable="False" HorizontalAlignment="Stretch" Grid.Row="0" VerticalAlignment="Stretch" Panel.ZIndex="1"> <syncfusion:TabPanelAdv x:Name="PART_TabPanel" DockPanel.Dock="Right" Focusable="False" HorizontalAlignment="Center" Style="{TemplateBinding TabPanelStyle}" VerticalAlignment="Stretch"> <syncfusion:TabScrollViewer x:Name="PART_ScrollViewer" Focusable="False" HorizontalScrollBarVisibility="Hidden" Margin="{Binding Margin, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ContentPresenter}}}" PanningMode="HorizontalFirst" VerticalScrollBarVisibility="Hidden"> <syncfusion:TabLayoutPanel x:Name="PART_TabLayoutPanel" AllowDrop="True" ClipToBounds="True" HorizontalAlignment="Left" IsItemsHost="True" Margin="0,2,2,-1" KeyboardNavigation.TabIndex="1" VerticalAlignment="Top"/> </syncfusion:TabScrollViewer> </syncfusion:TabPanelAdv> </syncfusion:HeaderPanel> <syncfusion:Border3D x:Name="ContentPanel" AllowDrop="True" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="0" CornerRadius="2" KeyboardNavigation.DirectionalNavigation="Contained" Margin="0,1,0,0" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local"> <Border x:Name="PART_ContentPanelBorder" BorderBrush="#FF69A1BF" BorderThickness="0" CornerRadius="2"> <Border x:Name="PART_ContentPanelInnerBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="2" Margin="3"> <ContentPresenter x:Name="PART_SelectedContentHost" AllowDrop="True" ContentTemplate="{TemplateBinding SelectedContentTemplate}" Content="{TemplateBinding SelectedContent}" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> </Border> </Border> </syncfusion:Border3D> </Grid> </ControlTemplate> </Setter.Value> </Setter> </MultiDataTrigger> </Style.Triggers> </Style> </Window.Resources> <Grid> <syncfusion:TabControlExt Grid.Column="0" x:Name="MyTabCtrl" AllowDragDrop="False" EnableLabelEdit="False" TabScrollStyle="Normal" ShowTabItemContextMenu="False" CloseButtonType="Hide" TabStripPlacement="Top" HorizontalAlignment="Center" BorderThickness="0" Width="750" Style="{DynamicResource NewtabControlExtStyle }" > <syncfusion:TabItemExt Header="Properties" > <TextBlock Text="The Properties tab contains special fields that pertain specifically to the type of pane being configured.
 Thus the Properties tabs on the Properties view for panes differ in their fields. " /> </syncfusion:TabItemExt> <syncfusion:TabItemExt Header="Solution"> <TextBlock Text="The Solution tab contains special fields that pertain specifically to the type of pane being configured.
 Thus the Solution tabs on the Solution view for panes differ in their fields." /> </syncfusion:TabItemExt> <syncfusion:TabItemExt Header="Output"> <TextBlock Text="The Output tab contains special fields that pertain specifically to the type of pane being configured.
 Thus the Output tabs on the Solution view for panes differ in their fields." /> </syncfusion:TabItemExt> </syncfusion:TabControlExt> </Grid> </Window>
The following screenshot shows the output.
Sample : View sample in GitHub