I have created vertical TabItems with a Path object. The selected TabItem overlaps the unselected TabItems, this works fine. The overlapping is done by setting a negative margin in the TabItem Template.
For the unselected TabItems right now a TabItem is overlapped by the TabItem below. For example in the picture Tab 4 overlaps Tab 3 and Tab 3 overlaps Tab 2.
I would like to change the overlapping order for the unselected Tab Items, so that an unselected TabItem overlaps the TabItem below and is overlapped by the TabItem above, eg Tab 2 overlaps Tab 3 and Tab 3 overlaps Tab 4.
I have tried to set the FlowDirection property of TabPanel, but this doesn't work.
How can I achieve this? Any help is appreciated. Thanks in advance!
Wrong overlapping 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>
I think the easiest way to do this is with a MultiBinding/Converter that uses the Parent's ItemsContainerGenerator
to determine the ZIndex
. It would look something like so:
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();
}
}
You would then change your TabItem style to set the ZIndex
in a setter (and remove the second trigger, as 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.