title: WPF Customized TabControl
body: <p>I have to develop a customized tab control and decided to create it with WPF/XAML, because I planned to learn it anyway. It should look like this when it's finished:</p>
  
  <p><img src="https://imgur.com/l9R7x.jpg" alt="Target"></p>
  
  <p>I made good progress so far, but there are two issues left:</p>
  
  <ol>
  <li><p>Only the first/last tab item should have a rounded upper-left/bottom-left corner. Is it possible to modify the style of these items, similar to the way I did with the selected tab item?</p></li>
  <li><p>The selected tab item should not have a border on its right side. I tried to accomplish this with z-index and overlapping, but the results were rather disappointing. Is there any other way to do this?</p></li>
  </ol>
  
  <p><img src="https://imgur.com/rEccJ.jpg" alt="Current"></p>
  
  <p>XAML:</p>
  
  <pre><code>&lt;Window x:Class="MyProject.TestWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="TestWindow" Height="350" Width="500" Margin="5" Background="LightGray"&gt;
  &lt;Window.Resources&gt;
      &lt;LinearGradientBrush x:Key="SelectedBorderBrush" StartPoint="0,0" EndPoint="1,0"&gt;
          &lt;GradientBrush.GradientStops&gt;
              &lt;GradientStopCollection&gt;
                  &lt;GradientStop Color="Gray" Offset="0.965"/&gt;
                  &lt;GradientStop Color="WhiteSmoke" Offset="1.0"/&gt;
              &lt;/GradientStopCollection&gt;
          &lt;/GradientBrush.GradientStops&gt;
      &lt;/LinearGradientBrush&gt;
      &lt;Style TargetType="{x:Type TabControl}"&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="{x:Type TabControl}"&gt;
                      &lt;DockPanel&gt;
                          &lt;Border
                              Panel.ZIndex="50"
                              Margin="0,100,-1,0" 
                              Background="#FFAAAAAA"
                              BorderBrush="Gray"
                              CornerRadius="7,0,0,7"
                              BorderThickness="1"&gt;
                              &lt;TabPanel
                                  Margin="0,0,0,0"
                                  IsItemsHost="True" /&gt;
                          &lt;/Border&gt;
                          &lt;Border
                              Background="WhiteSmoke"
                              BorderBrush="Gray"
                              BorderThickness="1"
                              CornerRadius="7,7,7,0" &gt;
                              &lt;ContentPresenter 
                                  ContentSource="SelectedContent" /&gt;
                          &lt;/Border&gt;
                      &lt;/DockPanel&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
      &lt;Style TargetType="{x:Type TabItem}"&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="{x:Type TabItem}"&gt;
                      &lt;Grid&gt;
                          &lt;Border Name="Border" 
                              Background="#FFAAAAAA"
                              CornerRadius="7,0,0,0"
                              BorderBrush="Gray"
                              BorderThickness="0,0,0,1"
                              Panel.ZIndex="50"
                              Margin="0,0,0,0"
                                  &gt;
  
                              &lt;ContentPresenter x:Name="ContentSite"             
                                  VerticalAlignment="Center"
                                  HorizontalAlignment="Left"
                                  ContentSource="Header"
                                  Margin="10,10,10,10"/&gt;
                          &lt;/Border&gt;
                      &lt;/Grid&gt;
                      &lt;ControlTemplate.Triggers&gt;
                          &lt;Trigger Property="IsSelected" Value="True"&gt;
                              &lt;Setter Property="Panel.ZIndex" Value="100" /&gt;
                              &lt;Setter Property="Margin" Value="0,0,-2,0" /&gt;
                              &lt;Setter TargetName="Border" 
                                      Property="BorderBrush" 
                                      Value="{StaticResource SelectedBorderBrush}"/&gt;
                              &lt;Setter TargetName="Border" 
                                  Property="Background" 
                                  Value="WhiteSmoke" /&gt;
                              &lt;Setter TargetName="Border" 
                                  Property="CornerRadius" 
                                  Value="0,0,0,0" /&gt;
                          &lt;/Trigger&gt;
                      &lt;/ControlTemplate.Triggers&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
  &lt;/Window.Resources&gt;
  &lt;Grid&gt;
      &lt;TabControl Name="_menuTabControl" TabStripPlacement="Left" Margin="5"&gt;
          &lt;TabItem Name="_tabItem1" Header="First Tab Item" &gt;&lt;/TabItem&gt;
  
          &lt;TabItem Name="_tabItem2" Header="Second Tab Item" &gt;
              &lt;Grid /&gt;
          &lt;/TabItem&gt;
          &lt;TabItem Name="_tabItem3" Header="Third Tab Item" &gt;
              &lt;Grid /&gt;
          &lt;/TabItem&gt;
      &lt;/TabControl&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>
  
  <p>Edit: Thanks to Vlad, I could fix the second problem with a gradient border brush. See updates XAML for the solution.</p>
  
  <p>Edit: Vlad fixed the first problem.</p>