WPF垂直TabItem邊框問題

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，你可以直接進入Edit Template Copy）。如果你沒有Blend，那麼你可以使用我的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>