WPF TabItem tête Styling

Question

J'essaie de style un TabControl et ont obtenu 75% du chemin, mais je vais avoir du mal coiffer les TabItems de réelles:

Ce que je suis en train de Le but est de supprimer le ContentPresenter par défaut afin que je puisse rendre les éléments de l'onglet partiellement transparents avec des bords arrondis au lieu de la place rouge et verte que j'ai maintenant.

Je suis sûr que ce n'est probablement pas si difficile, mais je n'arrive tout simplement pas à comprendre pourquoi toute aide serait la bienvenue!

Voici le XAML pour TabControl jusqu'à présent:

<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

Essayez ce style à la place, il modifie le modèle lui-même. Là-dedans, vous pouvez changer tout ce que vous devez transparent:

<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

Lors de la recherche d'un moyen pour arrondir les onglets, je trouve la réponse de Carlo et il a aidé, mais il me fallait un peu plus. Voici ce que j'ai mis en place, basé sur son travail. Cela a été fait avec MS Visual Studio 2015.

Le code:

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

Screenshot: