WPF TabControlでTabItemの重なり順を変更する方法

Question

Pathオブジェクトで縦型TabItemを作成しました。選択されたTabItemは選択されていないTabItemと重なり合っています。オーバーラップは、TabItemテンプレートに負のマージンを設定することによって行われます。

現在、選択されていないTabItemの場合、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の/ Aコンバータであると思います親のItemsContainerGeneratorは、ZIndexを決定します。あなたはその後、セッターにZIndexを設定する（そしてそれは、このセッターを無効になりますように、第2のトリガを削除）するためにあなたのTabItemのスタイルを変更します

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

：

<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>