Shaper add-in

The Shaper add-in makes it possible to create customizable sloped tabs in Tabs Studio:

Visual Studio 2008 style in Tabs Studio

Chrome style in Tabs Studio

The first function of the Shaper add-in is to manage z-order of tabs so that tab #1 overlaps tab #2, tab #2 overlaps tab #3 and so on (default z-order is inverse). Shaper also sets z-index for the selected tab to overlap all others.

The second function of Shaper is the TabShape control. It is similar to the Border control, but specialized for trapezoid tabs. TabShape has LeftSide and RightSide properties of type Geometry plus Background Brush and Border Pen properties.

TabShape draws the central rectangular part of the trapezoid scaled to the tab content, draws the top border, draws sides and places tab content in the "middle". Specifying negative and positive coordinates for left and right sides you control how sides overlap the content. All TabShape properties can be dynamically customized in style depending for example on whether tab is selected or not. Here is an example of the LeftSide geometry for the selected tab from the Visual Studio 2008 style (IsStroked property for each segment controls whether it drawn or not):

<Setter TargetName="TabShape" Property="LeftSide">
  <Setter.Value>
    <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>
  </Setter.Value>
</Setter>

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

Visual Studio 2008 style in Tabs Studio (2x zoom)

Return to Add-ins