WPFのTabItemのヘッダースタイリング

Question

私はTabControlののスタイルをしようとしていると、そこに道の75％を持っているが、私は困難実際TabItemsのスタイリングを持っている：

私がしようとしていますどのような実現するのはデフォルトのContentPresenterを削除することで、今ではプレースホルダーの赤と緑ではなく、丸いエッジでタブ項目を部分的に透明にすることができます。

私はそれがおそらくそれほど難しくないと確信していますが、私はそれを理解することができないので、どんな助けでも大歓迎です！ここで

は、これまでのTabControlのためのXAMLです：

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

スクリーンショット：