Tabs Studio Blog (organizing Visual Studio document tabs)

There are 4 text elements in a tab: name, extension, name modification marker and extension modification marker. These elements are normally having the same color. Plus, in Visual Studio 2012, close tab button and open preview tab button are drawings also normally having the same color with the text elements. It is much easier to customize colors for all these elements in the new Tabs Studio version.

All elements now by default bind to the tab foreground color. Just set tab foreground color in a style and you are done:

<Style TargetType="TabsStudio:Tab" BasedOn="{StaticResource DefaultTabStyle}">
      <Setter Property="Foreground" Value="Red"/>
</Style>

As always, you can change the color for a specific element too. Plus in VS 2012 you can now change it for the close tab button and the open preview tab button:

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

And now you can set tab foreground colors simply in the Tab Coloring Rule dialog depending on tab properties state:

Tab background and foreground rule setup

You can set only background, only foreground or both colors. In the tab coloring rules list, the visible color will be background, foreground and both colors correspondingly:

Visible colors in the tab coloring rules list

I’ve added suggestions to the Tab Coloring Rule dialog. Each field in the dialog now has a corresponding samples button that lets you quickly define tab coloring rules:

Tab Coloring Rule dialog with suggestion buttons

Let me remind you, that you can start adding a tab coloring rule from two places. From the tab context menu Set color… command and from the Tabs Studio Presentation options page. In the first case the suggestions will be tailored for the tab you selected to color and in the second case all open tabs appear in the suggestions.

For example, Project name regex suggestions for the selected tab contain tab’s project:

Project name regex suggestions for the selected tab

Selecting the exact match sets the regex to ^WpfApplication1$ and selecting the Contains option sets the regex to WpfApplication1. While you rarely have other projects containing selected project name, it shows how easily you can set the regex for example to Wpf and have a distinct color for all your WPF projects.

If you opened the dialog from Tabs Studio options, all project names from all open tabs appear in the suggestions. The names are alphabetically sorted and the first name has the prebuild regex for the exact match:

Project name regex suggestions for all tabs

I should clarify that while suggestions are different for one tab and all tabs, the rule created works exactly the same. All that matter is actual text in a regex filed.

Tab extensions regex suggestions show extensions from the selected tab or from all tabs:

Tab extensions regex suggestions

Coloring by file extension can also be done using Document paths regex, but only with the tab extensions regex you can target tabs like [Design]. Selecting an extension suggestion creates a regex like \.vb \[Design]\$. All special regex characters are automatically escaped (it works for all regex fields). \$ forces exact match on extension end.

Tab name regex suggestions work like Project name regex suggestions and Document paths regex suggestions work like Tab extensions regex suggestions.

Custom conditions suggestions show most common currently available tab properties (with current values in one tab mode):

Custom conditions suggestions

The list of suggestions is filtered depending on what version of Visual Studio you are running, active Tabs Studio add-ins and whether you have one or more tab groups open. Selecting a suggestion adds a condition like <ConditionX IsTabSelected=”True”/>. It is a shortened form that I use only for this text edit control. The normal form of a WPF MultiDataTrigger condition (that I restore on dialog save) is this:

<Condition Binding="{Binding Path=IsTabSelected, RelativeSource={RelativeSource Self}}" Value="True"/>

Finally, Background suggestions let you select a template for a gradient or solid color brush:

Background suggestions