Tabs Studio Blog (organizing Visual Studio document tabs)

Please, read the Overlapping sloped tabs post first for the general approach to tab shape customization. Let’s have a closer look at default tabs in Visual Studio 2008:

Below the tabs you can see the frame border that is overlapped by the selected tab. Tabs Studio window with tabs overlaps default tabs and two pixels of this border. In the Visual Studio 2008 style for Tabs Studio we are going to recreate overlapped top of the border:

<Border Height="2" BorderBrush="#69A1BF" BorderThickness="1,1,1,0" Background="White"/>

Selected tab needs to overlap the border. For that we increase z-index for tabs panel with background from 0 to 1 and later specify bottom margin for the selected tab as -2:

          <Grid Panel.ZIndex="1">
          ...
          <Trigger Property="IsTabSelected" Value="True">                           <!--Selected tab-->
            <Setter Property="Margin" Value="0,2,-9,-2"/>

Right margin for tabs is set to -9: it is amount of horizontal overlap between the adjacent tabs. With negative right margin the right border of tabs also overlaps the last tab in a row. To prevent overlap of the last tab in a row, we set buffering right margin of tabs to 10:

<Style TargetType="TabsStudio:Tabs" BasedOn="{StaticResource DefaultTabsStyle}">
  <Setter Property="Margin" Value="0,0,10,0"/>
</Style>

The selected tab has different shape, background and border comparing to default tabs. We create separate descriptions for these properties depending on the value of the IsTabSelected property. For the selected tab, the left side geometry is the following figure:

                <PathGeometry>
                  <PathFigure StartPoint="4 21">
                    <LineSegment Point="-16 21" IsStroked="false"/>
                    <LineSegment Point="-16 18.5" IsStroked="false"/>
                    <BezierSegment Point1="-1 1" Point2="-1 1" Point3="4 0" IsStroked="true" IsSmoothJoin="true"/>
                  </PathFigure>
                </PathGeometry>

The top bound of this figure is 0 – this is the rule for sides in Shaper. The right bound of this figure is 4 – making the slope overlap the tab contents by 4 pixels. An additional segment is automatically added by WPF from the end point to the start point to close the figure. For choosing Bezier control point values (Point1 and Point2) you can try the BezierExperimenter sample code from the “Applications = Code + Markup” book, chapter 28 (C# download, VB download).

The left bound of the right side figure is -3 – making the right side figure overlap the tab contents by 3 pixels (it doesn’t actually overlap the tab name because tab content has right margin 4):

                <PathGeometry>
                  <PathFigure StartPoint="-3 21">
                    <LineSegment Point="-1 21" IsStroked="false"/>
                    <LineSegment Point="-1 18.5" IsStroked="false"/>
                    <LineSegment Point="-1 2" IsStroked="true"/>
                    <LineSegment Point="-3 0" IsStroked="true"/>
                  </PathFigure>
                </PathGeometry>

The selected tab is 2 pixels higher than normal tabs – it has top margin 2 while normal tabs have top margin 4. Finally, selected tab font is bold and there is no close tab button:

<Style TargetType="TabsStudio:TabName" BasedOn="{StaticResource DefaultTabNameStyle}">
  <Style.Triggers>
    <Trigger Property="IsTabSelected" Value="True">
      <Setter Property="Control.FontWeight" Value="Bold"/>
    </Trigger>
  </Style.Triggers>
</Style>

<Style TargetType="TabsStudio:CloseTabButton" BasedOn="{StaticResource DefaultCloseTabButtonStyle}">
  <Setter Property="Visibility" Value="Collapsed"/>
</Style>

Here is the final Visual Studio 2008 style: