WPF TabItemボーダーがBorderThicknessプロパティーを反映していない

Question

私はいくつかのTabItemを持つTabControlを持っています。私はそれらをもっとフラットなデザインにしようとしています。その考え方は、タブの外側の境界線を消し、アクティブなタブをタブの下に緑色の線で示します。私は緑色の線を完全に動作させることができましたが、私が何をしても、各TabItemの左上、上端、右の線を取り除くことはできません。

私の仕様にはテキストの書式設定の制約があるため、TabItemヘッダーがBorderで囲まれたTextBlockに折り返されています。私はこのコンビネーションがそれと関係していると思う。アクティブなタブに緑色の下の枠線を表示する方法がある場合、改行を許可しながら（各タブは2つの行に分割する必要があります）、タブのヘッダーにテキストを配置すると、私は構成。私は、BorderThickness、Margin、およびPaddingプロパティのさまざまな組み合わせを無駄に試しました。

<TabControl HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch" x:Name="tabControl"> 
    <TabItem MaxWidth="55" HorizontalAlignment="Center" Background="White"> 
     <TabItem.Header> 
      <Border Style="{StaticResource TabItemText}"> 
       <TextBlock TextAlignment="Center" Text="Actions Needed" TextWrapping="Wrap"></TextBlock> 
      </Border> 
     </TabItem.Header> 
    </TabItem> 
</TabControl> 

これはタブの色分けコードです。現時点では冗長なものがいくつかありますが、これは私が何をしようとしているかを示しています。

<Style x:Key="TabItemText" TargetType="{x:Type Border}"> 
    <Style.Triggers> 
     <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="True"> 
      <Setter Property="BorderBrush" Value="#57B481"/> 
      <Setter Property="BorderThickness" Value="0 0 0 4"/> 
      <Setter Property="Margin" Value="0 0 0 -3"/> 
     </DataTrigger> 
     <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="False"> 
      <Setter Property="BorderThickness" Value="0 0 0 0"/> 
      <Setter Property="Margin" Value="0 0 0 -3"/> 
     </DataTrigger> 
    </Style.Triggers> 
</Style> 

Answer 1

TemplateをTabItemに変更できます。それにはBorderが含まれており、そのBorderThicknessを"0,0,0,2"のように修正する必要があります。最終値は、作成しようとしている緑色の枠線の高さを決定します。また、BorderBrushとBackgroundBrushを同じに設定する必要があります。トリガーIsSelected==TrueのBorderBrushを、選択した色に変更します。あなたの見出しのTabItemでBorderを使う必要はないことに注意してください。ただTexBlockを使用してTextWrappingなどを制御してください。次の例で私が説明するその他の小さな変更があります：

<TabControl HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch" x:Name="tabControl"> 
    <TabControl.Resources> 
     <LinearGradientBrush x:Key="LightBrush" StartPoint="0,0" EndPoint="0,1"> 
      <GradientBrush.GradientStops> 
       <GradientStopCollection> 
        <GradientStop Color="#FFF" Offset="0.0"/> 
        <GradientStop Color="#EEE" Offset="1.0"/> 
       </GradientStopCollection> 
      </GradientBrush.GradientStops> 
     </LinearGradientBrush> 
     <SolidColorBrush x:Key="SolidBorderBrush" Color="#888" /> 
     <SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" /> 
     <SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" /> 
     <SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" /> 
     <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" /> 
     <ControlTemplate x:Key="simpleTI" TargetType="TabItem"> 
      <Grid> 
       <Border Name="Border" 
          BorderThickness="0,0,0,2" 
          Background="{StaticResource LightBrush}" 
          BorderBrush="{StaticResource LightBrush}" 
          CornerRadius="0" > 
        <ContentPresenter x:Name="ContentSite" Margin="5,0" VerticalAlignment="Center" HorizontalAlignment="Center" 
              ContentSource="Header" RecognizesAccessKey="True"/> 
       </Border> 
      </Grid> 
      <ControlTemplate.Triggers> 
       <Trigger Property="IsSelected" Value="True"> 
        <Setter TargetName="Border" Property="BorderBrush" Value="#57B481" /> 
       </Trigger> 
       <Trigger Property="IsEnabled" Value="False"> 
        <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" /> 
        <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" /> 
        <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" /> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </TabControl.Resources> 


    <TabItem MaxWidth="55" HorizontalAlignment="Center" Background="White" Template="{StaticResource simpleTI}" > 
     <TabItem.Header> 
      <TextBlock TextAlignment="Center" Text="Actions Needed" TextWrapping="Wrap" /> 
     </TabItem.Header> 
    </TabItem> 
    <TabItem MaxWidth="55" HorizontalAlignment="Center" Background="White" Template="{StaticResource simpleTI}" > 
     <TabItem.Header> 
      <TextBlock TextAlignment="Center" Text="Actions Needed 1" TextWrapping="Wrap" /> 
     </TabItem.Header> 
    </TabItem> 
    <TabItem MaxWidth="55" HorizontalAlignment="Center" Background="White" Template="{StaticResource simpleTI}" > 
     <TabItem.Header> 
      <TextBlock TextAlignment="Center" Text="Actions Needed 2" TextWrapping="Wrap" /> 
     </TabItem.Header> 
    </TabItem> 
</TabControl> 

Answer 2

これを達成するには、TabItemまたはTabControlのコントロールテンプレートをオーバーライドする必要があります。開始点については、https://msdn.microsoft.com/en-us/library/ms752032.aspxを参照してください。