WPF TabItem Заголовок Styling

Question

Я пытаюсь стилизация TabControl и получил 75% пути там, но у меня возникают трудности с моделированием реального TabItems:

То, что я пытаюсь достигнуть - удалить ContentPresenter по умолчанию, чтобы я мог сделать элементы вкладки частично прозрачными с закругленными краями, а не с держателем места красного и зеленого.

Я уверен, что это, вероятно, не так сложно, но я просто не могу понять это, поэтому любая помощь была бы очень признательна!

Вот XAML для TabControl до сих пор:

<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

Попробуйте этот стиль вместо этого, он изменяет сам шаблон. В то вы можете изменить все, что нужно прозрачна:

<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

В поисках пути к раунду язычков, я нашел ответ Карло, и это помогло, но мне нужно было немного больше. Вот что я собрал, основываясь на его работе. Это было сделано с MS Visual Studio 2015.

Кодекс:

<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> 

Скриншот: