Tabs Studio Blog (organizing Visual Studio document tabs)

I’ve extended Tabs Studio and created the Shaper add-in to make it possible to create customizable sloped tabs in Tabs Studio. To test the new capabilities, I tried to emulate default tabs of Visual Studio 2008 and Google Chrome. The results look almost exactly the same:

Tabs in Visual Studio 2008

Visual Studio 2008 style in Tabs Studio

Tabs in Google Chrome

Chrome style in Tabs Studio

I’ll describe the new Visual Studio 2008 style in the next post. For now, let’s see what was added to Tabs Studio and how Shaper works.

TabsHost in Tabs Studio

Control tree now has a new root element TabsHost. The new root of the style specification is now:

TabsHost : ContentControl
|
 - Tabs : Panel (IsGroupSelected, IsGroupFocused for VS 2010, IsGroupWithLastActiveDocument for VS 2010)
   |
   ...

Introduction of TabsHost allows a tabs panel to be shifted and makes possible addition of other visual elements and controls at the tabs panel level. The DefaultTabsHostStyle is already a template using a rectangle behind the tabs to draw a background:

<Style x:Key="DefaultTabsHostStyle" TargetType="TabsStudio:TabsHost">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TabsStudio:TabsHost}">
        <Grid>
          <Rectangle Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
                     Fill="{TemplateBinding Background}"/>
          <ContentPresenter/>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Shaper

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>

Download links

• Tabs Studio v2.1.1,
• Shaper v1.0.0,
• Visual Studio 2008 style,
• Chrome style.