WPF vertical TabItem border 문제

Question

방금 ​​WPF로 시작했고 TabControl을 왼쪽 및 회전 TabItem 텍스트 머리글을 90 도로 표시 한 후 시각적 문제에 직면하고 있습니다.

문제는 TabItem 헤더의 위쪽 테두리가 표시되지 않는다는 것입니다. 코드는 다음과 같습니다.

<Window x:Class="WPF_Exemplo1.Window1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="Window1" Height="675" Width="900" ResizeMode="NoResize" WindowStyle="None" WindowState="Maximized"> 
    <Grid> 
     <TabControl Margin="12,85.74,98.601,167.193" Name="tabControl1" TabStripPlacement="Left"> 
      <TabItem Name="tabItem1" FlowDirection="LeftToRight" FontSize="22" Height="60"> 
       <TabItem.Header> 
        <StackPanel Orientation="Horizontal"> 
         <Image Height="40" Width="40" Margin="20,0,0,0" VerticalAlignment="Center"></Image> 
         <TextBlock Margin="25,0,25,0" VerticalAlignment="Center">Item 1</TextBlock> 
        </StackPanel> 
       </TabItem.Header> 
       <TabItem.LayoutTransform> 
        <TransformGroup> 
         <RotateTransform Angle="-90"/> 
        </TransformGroup> 
       </TabItem.LayoutTransform> 
       <Grid /> 
      </TabItem> 
     </TabControl> 
    </Grid> 
</Window> 

Answer 1

기본적으로 탭 항목은 선택시 오른쪽 테두리를 숨 깁니다. 이렇게하면 탭 컨텐트에 블렌딩 된 시각적 모양이 만들어집니다. 그러나 탭 항목을 90도 회전하면 더 이상이 용도로 사용되지 않습니다. 올바른 시각적 반응을 얻으려면 TabItem의 ControlTemplate을 편집해야합니다. 가장 쉬운 방법은 템플릿 복사본으로 시작하는 것입니다 (Blend가있는 경우 템플릿 복사 편집으로 간단하게 이동할 수 있습니다). 블렌드가 없다면 블렌드 버전 (아래)에서 생성 된 기본 리소스를 사용할 수 있습니다. 그런 다음 올바른 경계선 특성을 편집하여 원하는 시각적 효과를 만듭니다.

<Window.Resources> 
    <Style x:Key="TabItemFocusVisual"> 
     <Setter Property="Control.Template"> 
      <Setter.Value> 
       <ControlTemplate> 
        <Rectangle SnapsToDevicePixels="true" Margin="3,3,3,1" Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1"/> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94"/> 
    <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0"> 
     <GradientStop Color="#F3F3F3" Offset="0"/> 
     <GradientStop Color="#EBEBEB" Offset="0.5"/> 
     <GradientStop Color="#DDDDDD" Offset="0.5"/> 
     <GradientStop Color="#CDCDCD" Offset="1"/> 
    </LinearGradientBrush> 
    <LinearGradientBrush x:Key="TabItemHotBackground" EndPoint="0,1" StartPoint="0,0"> 
     <GradientStop Color="#EAF6FD" Offset="0.15"/> 
     <GradientStop Color="#D9F0FC" Offset=".5"/> 
     <GradientStop Color="#BEE6FD" Offset=".5"/> 
     <GradientStop Color="#A7D9F5" Offset="1"/> 
    </LinearGradientBrush> 
    <SolidColorBrush x:Key="TabItemSelectedBackground" Color="#F9F9F9"/> 
    <SolidColorBrush x:Key="TabItemHotBorderBrush" Color="#3C7FB1"/> 
    <SolidColorBrush x:Key="TabItemDisabledBackground" Color="#F4F4F4"/> 
    <SolidColorBrush x:Key="TabItemDisabledBorderBrush" Color="#FFC9C7BA"/> 
    <Style x:Key="TabItemStyle1" TargetType="{x:Type TabItem}"> 
     <Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusVisual}"/> 
     <Setter Property="Foreground" Value="Black"/> 
     <Setter Property="Padding" Value="6,1,6,1"/> 
     <Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/> 
     <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/> 
     <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
     <Setter Property="VerticalContentAlignment" Value="Stretch"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type TabItem}"> 
        <Grid SnapsToDevicePixels="true"> 
         <Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Padding="{TemplateBinding Padding}"> 
          <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" x:Name="Content" VerticalAlignment="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" ContentSource="Header" RecognizesAccessKey="True"/> 
         </Border> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsMouseOver" Value="true"> 
          <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemHotBackground}"/> 
         </Trigger> 
         <Trigger Property="IsSelected" Value="true"> 
          <Setter Property="Panel.ZIndex" Value="1"/> 
          <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemSelectedBackground}"/> 
         </Trigger> 
         <MultiTrigger> 
          <MultiTrigger.Conditions> 
           <Condition Property="IsSelected" Value="false"/> 
           <Condition Property="IsMouseOver" Value="true"/> 
          </MultiTrigger.Conditions> 
          <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemHotBorderBrush}"/> 
         </MultiTrigger> 
         <Trigger Property="TabStripPlacement" Value="Bottom"> 
          <Setter Property="BorderThickness" TargetName="Bd" Value="1,0,1,1"/> 
         </Trigger> 
         <Trigger Property="TabStripPlacement" Value="Left"> 
          <Setter Property="BorderThickness" TargetName="Bd" Value="1,1,0,1"/> 
         </Trigger> 
         <Trigger Property="TabStripPlacement" Value="Right"> 
          <Setter Property="BorderThickness" TargetName="Bd" Value="0,1,1,1"/> 
         </Trigger> 
         <MultiTrigger> 
          <MultiTrigger.Conditions> 
           <Condition Property="IsSelected" Value="true"/> 
           <Condition Property="TabStripPlacement" Value="Top"/> 
          </MultiTrigger.Conditions> 
          <Setter Property="Margin" Value="-2,-2,-2,-1"/> 
          <Setter Property="Margin" TargetName="Content" Value="0,0,0,1"/> 
         </MultiTrigger> 
         <MultiTrigger> 
          <MultiTrigger.Conditions> 
           <Condition Property="IsSelected" Value="true"/> 
           <Condition Property="TabStripPlacement" Value="Bottom"/> 
          </MultiTrigger.Conditions> 
          <Setter Property="Margin" Value="-2,-1,-2,-2"/> 
          <Setter Property="Margin" TargetName="Content" Value="0,1,0,0"/> 
         </MultiTrigger> 
         <MultiTrigger> 
          <MultiTrigger.Conditions> 
           <Condition Property="IsSelected" Value="true"/> 
           <Condition Property="TabStripPlacement" Value="Left"/> 
          </MultiTrigger.Conditions> 
          <Setter Property="Margin" Value="-2,-2,-1,-2"/> 
          <Setter Property="Margin" TargetName="Content" Value="0,0,1,0"/> 
         </MultiTrigger> 
         <MultiTrigger> 
          <MultiTrigger.Conditions> 
           <Condition Property="IsSelected" Value="true"/> 
           <Condition Property="TabStripPlacement" Value="Right"/> 
          </MultiTrigger.Conditions> 
          <Setter Property="Margin" Value="-1,-2,-2,-2"/> 
          <Setter Property="Margin" TargetName="Content" Value="1,0,0,0"/> 
         </MultiTrigger> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemDisabledBackground}"/> 
          <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemDisabledBorderBrush}"/> 
          <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources>