Tabs Studio Blog (organizing Visual Studio document tabs) » Style

Dark theme for Visual Studio 2010

Sergey Vlasov — Fri, 16 Dec 2011 07:32:02 +0000

If you like the original Visual Studio 2010 tabs theme you can use the excellent Visual Studio 2010 style for Tabs Studio by Jameel Al-Aziz. But, as this style changes many aspects of tabs presentation, it also overrides custom colors that you assign with tab coloring rules in Tabs Studio presentation options. (Of course, you can implement all coloring rules as style rules, it just requires working directly with XAML). Below is a simple style that closer to the overall Visual Studio 2010 theme and still supports additional tab coloring rules.

The following style changes tab text color from default black to white for not selected and not highlighted tabs:

Plus you need to create a tab coloring rule for not selected tabs with transparent background:

Transparent background for not selected tabs

It is very important that this rule be the first one in your tab coloring rules so that additional tab coloring rules could override it with custom colors. Below is the new tabs look:

Dark tabs theme in Visual Studio 2010

Now you can for example set a specific color for a project with Tab coloring rules. As tab text is white, you need to use dark colors for background or use normal colors with transparency (to set transparency level, use the Opacity slider in the Color Picker dialog):

Project tab coloring rule with transparency

Dark theme with custom transparent colors for two projects

Additionally you can set selected but unfocused tab background to gray as in the original Visual Studio 2010 theme:

Gray color rule for selected but unfocused tab

Gray selected tab when Solution Explorer is active

Update: Added white color to modification markers in the style.

Less rows priority

Sergey Vlasov — Tue, 18 Oct 2011 03:50:23 +0000

Sometimes you get tabs arranged in more rows than necessary:

Tabs in 4 rows

The same tabs in 3 rows

This is because the current tab layout algorithm first of all tries to minimize distracting tab movement between rows (keeping tab in the last position, reserving a row buffer for new tabs and changes in tab width).

I’ve added the new LessRowsPriority property to let you customize this behavior. (Remember also the RowBuffer property.) The larger LessRowsPriority value the more actively Tabs Studio will try to minimize number of rows. It is a double with default value of 1. Value of 10 is kind of high priority and value of 100 – very high priority. You can set it in a custom style like this:

Highlighting palette

Sergey Vlasov — Sun, 17 Jul 2011 15:38:21 +0000

I’ve added the ability to highlight tabs with different colors from Tabs Studio context menu:

Highlighting colors in Tabs Studio context menu

If you use just one color (still accessible with Ctrl+Click), but want to change it, the custom style is slightly different now (note the new HighlightIndex property):

In this Marker update I’ve also removed a small gradient transition in underline, fixed occasional loss of first tab highlighting after loading a solution in VS 2010, slightly changed highlight commands placement in the context menu.

Download link: Marker v1.0.4.

Vertical scrollbar for the separate tabs window

Sergey Vlasov — Sat, 11 Jun 2011 04:53:44 +0000

When using the separate tabs window in stack mode, sometime you can open more tabs than fit in the docked window. One possible solution is to add a vertical scrollbar to scroll through the windows:

Tabs window with a vertical scrollbar

The following style adds ScrollViewer with vertical scroll bar visibility set to Auto, i.e. it is visible only when tabs don’t fit without scrolling:

Special color for designer tabs

Sergey Vlasov — Thu, 05 May 2011 11:27:56 +0000

Usually you set color for tabs using the tab name and project name regular expressions in the Tab Coloring Rule dialog. If you want to color tabs by type (for example .cs or .xaml) you can use the document paths regex. But then there are form designer [Design] tabs that can’t be matched using the existing rules.

I’ve added the Tab extensions regex rule that complements the Tab name regex rule and lets you assign tab background depending on opened extensions in a tab group:

Tab coloring rule for designer tabs

Designer tabs with a special color

I’ve added the TabExtensions property to the Tab control that consists of the extensions list separated by ‘$’. For example, “Form2 .cs .cs [Design]” tab has “TabName=Form2″ and “TabExtensions=.cs$.cs [Design]$”. Note, that a single tab like “Class1.cs” still has the name “Class1″ and the extensions “.cs$”.

Download link: Tabs Studio v2.3.5.

Highlight tabs with Marker

Sergey Vlasov — Fri, 04 Mar 2011 09:42:30 +0000

David Peris suggested an interesting idea for Tabs Studio: “For people like me working in huge solutions, with a bunch of projects and files, sometimes we need to highlight a few tabs, temporarily, to quickly come back to them. Color rules would make the trick if the tabs share some criteria, but they can be slow to setup just for temporary highlighting. It would be great to be able to quick color some tabs, like for example Ctrl+click a tab would highlight it, and Ctrl+click again would de-highlight it. Maybe an option in the right click menu as “Remove highlights” or something like that would be the perfect complement to this option.”

I’ve created the new Marker add-in for this functionality. Ctrl+Click a tab highlights it and Ctrl+Click again removes highlighting. No additional context menu options yet, but it can be added later:

Several tabs highlighted with the default style

The default highlighting style provided by Marker decorates TabInternals with the red gradient background. You can choose to decorate another tab element or just change the highlighting color in a custom Tabs Studio style:

Tabs highlighted with the custom green color

Download link: Marker v1.0.0.

Horizontal tab alignment

Sergey Vlasov — Sat, 26 Feb 2011 16:07:17 +0000

In Visual Studio 2010 horizontal tab alignment is a little off, note the close tab button is near the tab name instead of being docked to the right:

Left tab alignment in Visual Studio 2010

In Visual Studio 2008 and even in the Visual Studio 2010 floating tool window tab alignment is correct:

Stretch tab alignment in the floating Visual Studio 2010 tool window

Turns out horizontal tab alignment is Stretch by default in TabItem‘s control template, but also inherited from the HorizontalContentAlignment property of a ItemsControl visual ancestor. Tabs Studio doesn’t use ItemsControl (this is why in Visual Studio 2008 and in the separate Visual Studio 2010 window tab alignment is correct), but there is ItemsControl with HorizontalContentAlignment=Left in Visual Studio IDE that is found when tabs are above the code editor.

I’ve added ItemsControl to Tabs Studio controls tree:

TabsHost : ContentControl
|
 - TabsItemsControl : ItemsControl
   |
    - Tabs : Panel
     |
      - Tab : TabItem

With the default style:

In the next Tabs Studio release, horizontal tab alignment is Stretch by default in all scenarios:

Fixed stretch tab alignment in Visual Studio 2010

If you prefer old left alignment, you will be able to set it with the following custom style:

Selected tab overlay

Sergey Vlasov — Fri, 25 Feb 2011 10:23:42 +0000

If you use custom colors for your tabs, for example, different colors for tabs from different projects, what do you do with the selected tab from a particular project? In the simplest setup you create a project coloring rule that excludes the selected tab and the selected tab looks the same no matter which project it belongs to:

Tab coloring rule for the WpfApplication5 project

Tab coloring rule for the WpfApplication6 project

Selected tab from the WpfApplication5 project

Selected tab from the WpfApplication6 project

If you get used to project colors, you may want to show selected tab’s project too. You can add an additional selected tab rule for each project:

Tab coloring rule for the selected tab in the WpfApplication5 project

Selected tab from the WpfApplication5 project showing project's color

The obvious disadvantage is that now you have to provide two coloring rules for each project (three rules if you use distinct color for the previously selected tab too). It would be nice to specify a selected tab overlay only once. Tabs Studio doesn’t currently support coloring rule overlays or rule combinations, but you can use a custom style for the TabInternals element to achieve the same result. First you change the tab coloring rules for the WpfApplication5 and WpfApplication6 projects to include the tab selected state:

Tab coloring rule for the WpfApplication5 project including the tab selected state

Then add the following custom style:

Simple TabInternals overlay for the selected tab

Now this overlay works for all projects, but the red bar has some undesired padding around it. To remove this padding we remove Tab‘s padding, add TabNameGroup‘s left padding and add CloseTabButton‘s right padding (note that you need to uncomment one of the three CloseTabButton styles depending on your close tab button presentation setting):

Final selected tab overlay

Updating a style from add-ins

Sergey Vlasov — Thu, 18 Nov 2010 06:09:37 +0000

Continuing work on reducing necessity to manually craft a XAML style, I’ve added the ability to update a style from an add-in. For example, previously for SingleRow and Shaper add-ins you needed to copy sample styles from documentation and to use them together you needed to merge these styles. Newly updated SingleRow and Shaper programmatically apply default styles not cluttering the custom style:

Default SingleRow and Shaper styles

The only thing missing from the sample Chrome style for Shaper is the grey line under the tabs, as currently only setters and triggers can be automatically merged, not control templates. To make it perfect, the following custom style can be used:

The manually merged TabsHost style for SingleRow and Shaper

Internally, the void UpdatePresentationStyles(string key, Presentation presentation) method was added to the TabsStudioExt.ITabsStudioEngine interface. It is possible to update styles dynamically, but right now SingleRow and Shaper do it only once in the OnConnection handler.

Triggers and setters for default Tabs Studio controls are added to the Styles property. For new controls (like TabsStudioSingleRow:HiddenTabs) a style resource and a default style usage are provided in the Presentation constructor:

private void UpdatePresentationStyle()
{
    TabsStudioExt.Presentation presentation = new TabsStudioExt.Presentation(
        LoadString("HiddenTabsStyle.xml"), LoadString("HiddenTabsUsage.xml"));
    {
        TabsStudioExt.PresentationStyle style = new TabsStudioExt.PresentationStyle();
        style.Triggers.Add(LoadString("TabTriggers.xml"));
        presentation.Styles.Add("TabsStudio:Tab", style);
    }
    {
        TabsStudioExt.PresentationStyle style = new TabsStudioExt.PresentationStyle();
        style.Setters.Add(LoadString("TabsHostTemplate.xml"));
        presentation.Styles.Add("TabsStudio:TabsHost", style);
    }
    engine.UpdatePresentationStyles("SingleRow", presentation);
}

The style parameter in the Presentation constructor can also add static resources for use in tab coloring rules. Theoretically it may be a custom brush or a generated color. These changes are included in the upcoming Tabs Studio release.

More tab coloring options

Sergey Vlasov — Mon, 15 Nov 2010 07:00:42 +0000

I’ve added Document paths regex and Custom conditions options to the Tab Coloring Rule dialog:

The Tab Coloring Rule dialog with new options

Document paths regex uses the newly added Paths tab item property consisting of document paths ending with ‘$’. For a tab “App .xaml .xaml.cs” Paths is something like “c:\Projects\WpfApplication1\app.xaml$c:\Projects\WpfApplication1\app.xaml.cs$”. If you want to set a color for all xaml and xaml.cs tabs, Document paths regex could be the following expression:

\.(xaml|xaml\.cs)\$

The Custom conditions option allows you to switch on tab item properties not listed in this dialog. For example, the MVCGroup add-in adds IsController and IsView attached tab properties. To color controller tabs you can use the following custom condition:

Another example is for the case when you want to change the color of a tab in Visual Studio 2010 when tabs are not focused:

Download link: TabsStudio v2.1.7.