WPF TabItem Tiêu đề Styling

Question

Tôi đang cố gắng để tạo kiểu một TabControl và đã có 75% số đường có, nhưng tôi đang gặp khó khăn styling TabItems thực tế:

Những gì tôi đang cố gắng để đạt được là loại bỏ mặc định ContentPresenter để tôi có thể làm cho các mục tab một phần trong suốt với các cạnh tròn thay vì giữ chỗ màu đỏ và màu xanh lá cây tôi có bây giờ.

Tôi chắc rằng điều đó có thể không khó, nhưng tôi không thể hình dung nó ra để mọi trợ giúp sẽ được đánh giá cao nhất!

Đây là XAML cho TabControl cho đến nay:

<TabControl TabStripPlacement="Left" HorizontalAlignment="Stretch" BorderBrush="#41020202"> 
    <TabControl.BitmapEffect> 
    <DropShadowBitmapEffect Color="Black" Direction="270"/> 
    </TabControl.BitmapEffect> 
    <TabControl.Resources>  
    <Style TargetType="{x:Type TabItem}"> 
     <Setter Property="BorderThickness" Value="0"/>  
     <Setter Property="Padding" Value="0" />  
     <Setter Property="HeaderTemplate">   
     <Setter.Value>   
      <DataTemplate>   
      <Border x:Name="grid" Background="Red"> 
       <ContentPresenter> 
       <ContentPresenter.Content> 
        <TextBlock Margin="4" FontSize="15" Text="{TemplateBinding Content}"/> 
       </ContentPresenter.Content>    
       <ContentPresenter.LayoutTransform>     
        <RotateTransform Angle="270" />    
       </ContentPresenter.LayoutTransform>    
       </ContentPresenter> 
      </Border>   
      <DataTemplate.Triggers> 
       <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TabItem}},Path=IsSelected}" Value="True"> 
       <Setter TargetName="grid" Property="Background" Value="Green"/> 
       </DataTrigger> 
      </DataTemplate.Triggers> 
      </DataTemplate>   
     </Setter.Value>  
     </Setter>  
    </Style> 
    </TabControl.Resources> 
    <TabControl.Background> 
    <RadialGradientBrush Center="-0.047,0.553" GradientOrigin="-0.047,0.553" RadiusY="1.231" RadiusX="0.8"> 
     <GradientStop Offset="1" Color="#06FFFFFF"/> 
     <GradientStop Color="#14FFFFFF"/> 
    </RadialGradientBrush> 
    </TabControl.Background> 
    <TabItem Header="Tab Item 1" /> 
    <TabItem Header="Tab Item 2" /> 
    <TabItem Header="Tab Item 3" /> 
    <TabItem Header="Tab Item 4" /> 
</TabControl> 

Answer 1

Hãy thử phong cách này thay vào đó, nó sẽ thay đổi mẫu riêng của mình. Ở đó bạn có thể thay đổi mọi thứ bạn cần để minh bạch:

<Style TargetType="{x:Type TabItem}"> 
    <Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="{x:Type TabItem}"> 
     <Grid> 
      <Border Name="Border" Margin="0,0,0,0" Background="Transparent" 
        BorderBrush="Black" BorderThickness="1,1,1,1" CornerRadius="5"> 
      <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" 
           HorizontalAlignment="Center" 
           ContentSource="Header" Margin="12,2,12,2" 
           RecognizesAccessKey="True"> 
       <ContentPresenter.LayoutTransform> 
      <RotateTransform Angle="270" /> 
      </ContentPresenter.LayoutTransform> 
     </ContentPresenter> 
      </Border> 
     </Grid> 
     <ControlTemplate.Triggers> 
      <Trigger Property="IsSelected" Value="True"> 
      <Setter Property="Panel.ZIndex" Value="100" /> 
      <Setter TargetName="Border" Property="Background" Value="Red" /> 
      <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" /> 
      </Trigger> 
      <Trigger Property="IsEnabled" Value="False"> 
      <Setter TargetName="Border" Property="Background" Value="DarkRed" /> 
      <Setter TargetName="Border" Property="BorderBrush" Value="Black" /> 
      <Setter Property="Foreground" Value="DarkGray" /> 
      </Trigger> 
     </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
</Style> 

Answer 2

Khi tìm kiếm cách làm tròn các tab, tôi tìm thấy câu trả lời của Carlo và nó đã giúp nhưng tôi cần thêm một chút. Đây là những gì tôi đặt lại với nhau, dựa trên công việc của anh ấy. Điều này đã được thực hiện với MS Visual Studio 2015.

Bộ luật:

<Window x:Class="MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:local="clr-namespace:MealNinja" 
     mc:Ignorable="d" 
     Title="Rounded Tabs Example" Height="550" Width="700" WindowStartupLocation="CenterScreen" FontFamily="DokChampa" FontSize="13.333" ResizeMode="CanMinimize" BorderThickness="0"> 
    <Window.Effect> 
     <DropShadowEffect Opacity="0.5"/> 
    </Window.Effect> 
    <Grid Background="#FF423C3C"> 
     <TabControl x:Name="tabControl" TabStripPlacement="Left" Margin="6,10,10,10" BorderThickness="3"> 
      <TabControl.Resources> 
       <Style TargetType="{x:Type TabItem}"> 
        <Setter Property="Template"> 
         <Setter.Value> 
          <ControlTemplate TargetType="{x:Type TabItem}"> 
           <Grid> 
            <Border Name="Border" Background="#FF6E6C67" Margin="2,2,-8,0" BorderBrush="Black" BorderThickness="1,1,1,1" CornerRadius="10"> 
             <ContentPresenter x:Name="ContentSite" ContentSource="Header" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="2,2,12,2" RecognizesAccessKey="True"/> 
            </Border> 
            <Rectangle Height="100" Width="10" Margin="0,0,-10,0" Stroke="Black" VerticalAlignment="Bottom" HorizontalAlignment="Right" StrokeThickness="0" Fill="#FFD4D0C8"/> 
           </Grid> 
           <ControlTemplate.Triggers> 
            <Trigger Property="IsSelected" Value="True"> 
             <Setter Property="FontWeight" Value="Bold" /> 
             <Setter TargetName="ContentSite" Property="Width" Value="30" /> 
             <Setter TargetName="Border" Property="Background" Value="#FFD4D0C8" /> 
            </Trigger> 
            <Trigger Property="IsEnabled" Value="False"> 
             <Setter TargetName="Border" Property="Background" Value="#FF6E6C67" /> 
            </Trigger> 
            <Trigger Property="IsMouseOver" Value="true"> 
             <Setter Property="FontWeight" Value="Bold" /> 
            </Trigger> 
           </ControlTemplate.Triggers> 
          </ControlTemplate> 
         </Setter.Value> 
        </Setter> 
        <Setter Property="HeaderTemplate"> 
         <Setter.Value> 
          <DataTemplate> 
           <ContentPresenter Content="{TemplateBinding Content}"> 
            <ContentPresenter.LayoutTransform> 
             <RotateTransform Angle="270" /> 
            </ContentPresenter.LayoutTransform> 
           </ContentPresenter> 
          </DataTemplate> 
         </Setter.Value> 
        </Setter> 
        <Setter Property="Background" Value="#FF6E6C67" /> 
        <Setter Property="Height" Value="90" /> 
        <Setter Property="Margin" Value="0" /> 
        <Setter Property="Padding" Value="0" /> 
        <Setter Property="FontFamily" Value="DokChampa" /> 
        <Setter Property="FontSize" Value="16" /> 
        <Setter Property="VerticalAlignment" Value="Top" /> 
        <Setter Property="HorizontalAlignment" Value="Right" /> 
        <Setter Property="UseLayoutRounding" Value="False" /> 
       </Style> 
       <Style x:Key="tabGrids"> 
        <Setter Property="Grid.Background" Value="#FFE5E5E5" /> 
        <Setter Property="Grid.Margin" Value="6,10,10,10" /> 
       </Style> 
      </TabControl.Resources> 
      <TabItem Header="Planner"> 
       <Grid Style="{StaticResource tabGrids}"/> 
      </TabItem> 
      <TabItem Header="Section 2"> 
       <Grid Style="{StaticResource tabGrids}"/> 
      </TabItem> 
      <TabItem Header="Section III"> 
       <Grid Style="{StaticResource tabGrids}"/> 
      </TabItem> 
      <TabItem Header="Section 04"> 
       <Grid Style="{StaticResource tabGrids}"/> 
      </TabItem> 
      <TabItem Header="Tools"> 
       <Grid Style="{StaticResource tabGrids}"/> 
      </TabItem> 
     </TabControl> 
    </Grid> 
</Window> 

Ảnh chụp màn hình: