讓WPF自定義的Tabcontrol頭堆棧垂直

Question

我一直在試圖讓我的TabControl頭堆垂直向上，但無論我做什麼，它不會只是正常工作

這就是我想要的：

它很有趣，因爲這個顯示是由於Visual Studio Editor的一些錯誤造成的。

但是，這是我所得到的

我嘗試這個代碼

<DockPanel> 
    <Menu DockPanel.Dock="Top"> 
     <MenuItem Header="File"> 
      <MenuItem Header="Prepare Report"></MenuItem> 
      <MenuItem Header="Print PDF"></MenuItem> 
      <Separator/> 
      <MenuItem Header="Exit"></MenuItem> 
     </MenuItem> 
     <MenuItem Header="Configurations"> 
      <MenuItem Header="Pay Grade"></MenuItem> 
      <MenuItem Header="Staff Levels"></MenuItem> 
      <MenuItem Header="Departments"></MenuItem> 
      <MenuItem Header="Authroizations"></MenuItem> 
     </MenuItem> 
     <MenuItem Header="Help"> 
      <MenuItem Header="Help Content"/> 
      <Separator/> 
      <MenuItem Header="About Software"/> 
     </MenuItem> 
    </Menu> 
    <StackPanel Orientation="Horizontal"></StackPanel> 
    <TabControl TabStripPlacement="Left" DockPanel.Dock="Top" Style="{DynamicResource NavigationMenu}" Margin="20 0"> 
     <TabControl.Resources> 
      <Style TargetType="{x:Type TabItem}"> 
       <Setter Property="HeaderTemplate"> 
        <Setter.Value> 
         <DataTemplate> 
          <ContentPresenter Content="{TemplateBinding Content}"> 
           <ContentPresenter.LayoutTransform> 
            <RotateTransform Angle="-360" /> 
           </ContentPresenter.LayoutTransform> 
          </ContentPresenter> 
         </DataTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
     </TabControl.Resources> 
     <TabItem x:Name="Dashboard"> 
      <TabItem.Header><TextBlock Text="DASHBOARD" FontSize="20" ></TextBlock></TabItem.Header> 
     </TabItem> 
     <TabItem x:Name="Staffs"> 
      <TabItem.Header> 
       <TextBlock Text="STAFFS" ></TextBlock> 
      </TabItem.Header> 
     </TabItem> 
     <TabItem x:Name="Departments"> 
      <TabItem.Header> 
       <TextBlock Text="DEPARTMENTS" ></TextBlock> 
      </TabItem.Header> 
     </TabItem> 
     <TabItem x:Name="Settings"> 
      <TabItem.Header> 
       <TextBlock Text="SETTINGS" ></TextBlock> 
      </TabItem.Header> 
     </TabItem> 
    </TabControl> 
</DockPanel> 

但它打破了我的用戶界面，並顯示這樣

深色部分是不應該在那裏，我甚至不知道它來自哪裏

Answer 1

您應該能夠通過刪除你的數據模板/風格來解決這個問題，並簡單地通過設置的TabControl到Left

或通過風格二傳手，像這樣的TabStripPlacement屬性：

<Style TargetType="TabControl"> 
    <Setter Property="TabStripPlacement" Value="Left"></Setter> 
</Style> 

默認 TabStrip（實際上是一個TabPanel）只是一個模板內的StackPanel。 TabStripPlacement改變了TabControl內TabStrip的位置 - 同時也將StackPanel從水平切換到垂直方向......這應該給你你正在尋找的結果。

Answer 2

我希望以下內容能讓您瞭解您的需求如何實現。基本的想法是從TabPanel切換到TabControl樣式的StackPanel，不要使用任何背景顏色，並以TabItem樣式旋轉標題。

<Window x:Class="ShowScroller.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" 
     Width="525" 
     Height="421"> 
    <Window.Resources> 
     <Style TargetType="{x:Type TabControl}"> 
      <Setter Property="OverridesDefaultStyle" Value="True" /> 
      <Setter Property="SnapsToDevicePixels" Value="True" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type TabControl}"> 
         <Grid KeyboardNavigation.TabNavigation="Local"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="Auto" /> 
           <ColumnDefinition Width="*" /> 
          </Grid.ColumnDefinitions> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualState x:Name="Disabled"> 
             <Storyboard> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"> 
               <EasingColorKeyFrame KeyTime="0" Value="#FFAAAAAA" /> 
              </ColorAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <ContentPresenter x:Name="PART_SelectedContentHost" 
               Grid.Column="1" 
               Margin="0" 
               ContentSource="SelectedContent" /> 
          <StackPanel x:Name="HeaderPanel" 
             Grid.Row="0" 
             Margin="0,0,4,-1" 
             Panel.ZIndex="1" 
             Background="Transparent" 
             IsItemsHost="True" 
             KeyboardNavigation.TabIndex="1" /> 
          <Border x:Name="Border" 
            Grid.Row="1" 
            BorderThickness="1" 
            CornerRadius="2" 
            KeyboardNavigation.DirectionalNavigation="Contained" 
            KeyboardNavigation.TabIndex="2" 
            KeyboardNavigation.TabNavigation="Local" /> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

     <Style TargetType="{x:Type TabItem}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type TabItem}"> 
         <Grid x:Name="Root"> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="SelectionStates"> 
            <VisualState x:Name="Unselected" /> 
            <VisualState x:Name="Selected"> 
             <Storyboard> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"> 
               <EasingColorKeyFrame KeyTime="0" Value="#FF0000FF" /> 
              </ColorAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualState x:Name="Normal" /> 
            <VisualState x:Name="MouseOver" /> 
            <VisualState x:Name="Disabled" /> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <Border x:Name="Border" 
            Margin="0,0,0,0" 
            BorderBrush="Gainsboro" 
            BorderThickness="0,0,2,0" /> 
          <TextBlock Margin="12,10,12,10" Text="{TemplateBinding Header}"> 
           <TextBlock.LayoutTransform> 
            <TransformGroup> 
             <ScaleTransform /> 
             <SkewTransform /> 
             <RotateTransform Angle="-90" /> 
             <TranslateTransform /> 
            </TransformGroup> 
           </TextBlock.LayoutTransform> 
          </TextBlock> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Window.Resources> 
    <Grid> 
     <TabControl Width="391" 
        Height="324" 
        Margin="49,43,0,0" 
        HorizontalAlignment="Left" 
        VerticalAlignment="Top"> 
      <TabItem FontSize="20" 
        Header="TabItem" 
        RenderTransformOrigin="0.5,0.5"> 
       <Grid Background="#FFF5E5E5"> 
        <TextBlock Margin="55,107,0,0" 
           HorizontalAlignment="Left" 
           VerticalAlignment="Top" 
           Text="TextBlock 1" 
           TextWrapping="Wrap" /> 
       </Grid> 
      </TabItem> 
      <TabItem Header="TabItem"> 
       <Grid Background="#FFE5E5F5"> 
        <TextBlock Margin="54,98,0,0" 
           HorizontalAlignment="Left" 
           VerticalAlignment="Top" 
           Text="TextBlock 2" 
           TextWrapping="Wrap" /> 
       </Grid> 
      </TabItem> 
      <TabItem Header="TabItem"> 
       <Grid Background="#FFEBF5E5"> 
        <TextBlock Margin="54,98,0,0" 
           HorizontalAlignment="Left" 
           VerticalAlignment="Top" 
           Text="TextBlock 3" 
           TextWrapping="Wrap" /> 
       </Grid> 
      </TabItem> 
     </TabControl> 
    </Grid> 
</Window>