WPF TabItem हैडर स्टाइलिंग

Question

मैं एक TabControl शैली कोशिश कर रहा हूँ और वहाँ जिस तरह का 75% मिल गया है, लेकिन मैं कठिनाई स्टाइल वास्तविक TabItems आ रही हैं:

क्या मैं कोशिश कर रहा हूँ प्राप्त करना डिफ़ॉल्ट सामग्री प्रस्तुतकर्ता को हटा देता है ताकि मैं टैब धारकों को जगह धारक लाल और हरे रंग के बजाय गोलाकार किनारों के साथ आंशिक रूप से पारदर्शी बना सकूं।

मुझे यकीन है कि शायद यह मुश्किल नहीं है, लेकिन मैं इसे समझ नहीं सकता हूं इसलिए किसी भी मदद की सराहना की जाएगी!

यहाँ 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

एक तरीका के लिए खोज टैब पूर्णांक बनाना है, मैं कार्लो के जवाब मिल गया है और यह मदद की थी, लेकिन मैं थोड़ा अधिक की जरूरत है। यहां उनके काम के आधार पर मैंने जो कुछ रखा है, वह है। यह एमएस दृश्य स्टूडियो 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> 

स्क्रीनशॉट: