Tabs Studio Blog (organizing Visual Studio document tabs)

Due to popular demand and new tabs panel customization capabilities in Tabs Studio v2.1.2, I’ve created the SingleRow add-in that allows you to limit maximum number of tab rows and show remaining tabs in a drop-down list similar to default Visual Studio behavior:

A single row of tabs and the drop-down list of hidden tabs

The Wrap tabs layout option

<Style TargetType="TabsStudio:TabsHost" BasedOn="{StaticResource DefaultTabsHostStyle}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TabsStudio:TabsHost}">
        <Grid>
          <Rectangle Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
                     Fill="{TemplateBinding Background}"/>
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*"/>
              <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <ContentPresenter Grid.Column="0"/>
            <TabsStudioSingleRow:HiddenTabs Grid.Column="1" TabsPanel="{TemplateBinding ContentControl.Content}"/>
          </Grid>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style TargetType="TabsStudio:Tab" BasedOn="{StaticResource DefaultTabStyle}">
  <Style.Triggers>
    <Trigger Property="TabsStudioSingleRow:Properties.IsTabHidden" Value="True">
      <Setter Property="Visibility"  Value="Collapsed"/>
    </Trigger>
  </Style.Triggers>
</Style>

<Style TargetType="TabsStudioSingleRow:HiddenTabs">
  <Setter Property="Content" Value=">"/>
  <Setter Property="Margin" Value="2,0,2,0"/>
  <Setter Property="VerticalAlignment" Value="Center"/>
  <Style.Triggers>
    <Trigger Property="TabsStudioSingleRow:Properties.IsHiddenTabs" Value="False">
      <Setter Property="Visibility"  Value="Collapsed"/>
    </Trigger>
  </Style.Triggers>
</Style>

This style adds the TabsStudioSingleRow:HiddenTabs button to open the drop-down list and binds it to the corresponding TabsPanel. SingleRow doesn’t actually hide tabs – it only sets the IsTabHidden property for them. The style above sets tab visibility based on this property. HiddenTabs button’s appearance is also defined in this style and the button is collapsed when there are no hidden tabs.

Tabs are hidden in the least recently used order and don’t automatically reappear even when space becomes available. Hidden tabs in the drop-down list are sorted alphabetically.

Default number of tab rows is 1, but you can change it in the SingleRow add-in options dialog:

SingleRow options dialog

Two rows of tabs and the hidden tabs list

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.