How to change the overlapping order of TabItems in WPF TabControl

Question

I created vertical TabItems with a Path object. The selected TabItem overlaps the unselected TabItems, this works great. Overlaying is done by setting a negative field in the TabItem template.

For unselected TabItems, right now the TabItem is overlapped by the TabItem below. For example, in Tab 4, tab 3 overlaps and tab 3 overlaps tab 2.

I would like to change the overlap order for unselected tabs, so that an unselected TabItem overlaps the TabItem below and overlaps the TabItem above, for example. Tab 2 overlaps tab 3 and tab 3 overlaps tab 4.

I tried to set the FlowDirection property for the TabPanel, but this does not work.

How can i achieve this? Any help is appreciated. Thanks in advance!

Incorrect overlap of unselected TabItems:

XAML code:

<Style x:Key="styleMainNavTabControl" TargetType="{x:Type TabControl}"> <Setter Property="TabStripPlacement" Value="Left" /> <Setter Property="SnapsToDevicePixels" Value="true"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type TabControl}"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="200"/> </Grid.ColumnDefinitions> <Border Grid.Column="0" Background="White" BorderBrush="Black" BorderThickness="0,0,1,0" Padding="20"> <ContentPresenter ContentSource="SelectedContent" /> </Border> <Border Grid.Column="1" Padding="0,30,10,0" Background="#F7F3F7"> <TabPanel Panel.ZIndex="1" Margin="-1,0,0,0" FlowDirection="RightToLeft" IsItemsHost="True" Background="Transparent"/> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="styleMainNavTabItem" TargetType="{x:Type TabItem}"> <Setter Property="MinHeight" Value="90" /> <Setter Property="FontSize" Value="14" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type TabItem}"> <Grid Margin="0,0,0,-35"> <Path Name="TabPath" Stroke="Black" StrokeThickness="1" Fill="LightGray" Data="M 0,0 a 10,10 0 0 0 10,10 h 150 a 20,20 0 0 1 20,20 v 60 a 20,20 0 0 1 -20,20 h -150 a 10,10 0 0 0 -10,10 z" /> <ContentPresenter ContentSource="Header" Margin="10,2,10,2" VerticalAlignment="Center" TextElement.Foreground="#FF000000"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="Panel.ZIndex" Value="100" /> <Setter TargetName="TabPath" Property="Fill" Value="White" /> <Setter TargetName="TabPath" Property="Data" Value="M 0,0 a 10,10 0 0 0 10,10 h 150 a 20,20 0 0 1 20,20 v 60 a 20,20 0 0 1 -20,20 h -150 a 10,10 0 0 0 -10,10" /> </Trigger> <Trigger Property="IsSelected" Value="False"> <Setter Property="Panel.ZIndex" Value="90" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> 

Answer 1

I think the easiest way to do this is to use MultiBinding / Converter, which uses the Parent ItemsContainerGenerator to define ZIndex . It will look something like this:

 public class TabZIndexConverter : IMultiValueConverter { public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) { var tabItem = values[0] as TabItem; var tabControl = values[1] as TabControl; if (tabItem == null || tabControl == null) return Binding.DoNothing; var count = (int)values[2]; var index = tabControl.ItemContainerGenerator.IndexFromContainer(tabItem); return count - index; } public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) { throw new NotSupportedException(); } } 

Then you change the TabItem style to install ZIndex in the setter (and remove the second trigger, since it will disable this setter):

 <Style x:Key="styleMainNavTabItem" TargetType="{x:Type TabItem}"> <Setter Property="Panel.ZIndex"> <Setter.Value> <MultiBinding Converter="{StaticResource tabZIndexConverter}"> <Binding RelativeSource="{RelativeSource Self}" /> <Binding RelativeSource="{RelativeSource AncestorType={x:Type TabControl}}" /> <Binding Path="Items.Count" RelativeSource="{RelativeSource AncestorType={x:Type TabControl}}" /> </MultiBinding> </Setter.Value> </Setter> ... </Style>