如何更改WPF TabControl中TabItems的重疊順序

Question

我已經創建了具有Path對象的垂直TabItems。選定的TabItem與未選中的TabItem重疊，這可以正常工作。重疊是通過在TabItem模板中設置負邊距來完成的。

對於未選擇的TabItems，現在TabItem與下面的TabItem重疊。例如在圖片中，選項卡4與選項卡3重疊，選項卡3與選項卡2重疊。

我想更改未選中的選項卡項目的重疊順序，以便未選中的選項卡項目與下面的選項卡項目重疊並與選項卡項目重疊以上，例如標籤2重疊標籤3和標籤3重疊標籤4.

我試圖設置TabPanel的FlowDirection屬性，但這不起作用。

我該如何做到這一點？任何幫助表示讚賞。提前致謝！

未選中的TabItems的錯誤重疊：

XAML碼：

<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

我認爲這樣做最簡單的方法是使用一個MultiBinding /轉換器使用父母的ItemsContainerGenerator確定ZIndex。它看起來像這樣：

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(); 
    } 
} 

這樣，你會改變你的TabItem風格設置在二傳手的ZIndex（和刪除第二個觸發，因爲它會禁用此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>