Tabs Studio Blog (organizing Visual Studio document tabs)

September 17, 2012

Tab text color customization

Filed under: Uncategorized — Tags: — Sergey Vlasov @ 6:11 pm

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

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

Visible colors in the tab coloring rules list

Smart suggestions for tab coloring

Filed under: Uncategorized — Tags: — Sergey Vlasov @ 4:20 pm

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

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

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

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

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

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

Background suggestions

September 12, 2012

Visual Studio 2012 color themes support

Filed under: Uncategorized — Tags: , — Sergey Vlasov @ 4:31 pm

With the recent release of Visual Studio 2012 Color Theme Editor, in addition to the light and dark themes, you can now select from 5 more themes and even choose your own colors:

Theme selection in Visual Studio 2012

Theme selection in Visual Studio 2012

I’ve updated Tabs Studio to support custom Visual Studio 2012 colors. Instead of two hardcoded light and dark styles, Tabs Studio now uses a single VS 2012 styles collection with direct binding to current VS 2012 shell colors. Each change in Visual Studio 2012 tab colors is now immediately reflected in Tabs Studio tab colors. For example, this is how Tabs Studio looks after selecting the blue theme:

Visual Studio 2012 blue theme

Visual Studio 2012 blue theme

May 16, 2012

Short Tabs Priority

Filed under: Uncategorized — Tags: — Sergey Vlasov @ 9:32 am

The tabs layout algorithm in Tabs Studio tries to minimize number of rows, distribute tabs evenly between rows and minimize tab movements between rows as you add or remove tabs. The last goal to minimize tab movements between rows sometimes creates quite wide tabs:

Extra wide tabs in the top row

Extra wide tabs in the top row

For the new release I’ve reduced the priority of no tab movement and for the same tabs the new look is this:

More priority for shorter tabs in the new release

More priority for shorter tabs in the new release

Plus I’ve added the new ShortTabsPriority property that you can customize from a custom style. It is a double value. Value of 1 is old behavior. Default in the new release is 3. Value of 10 is a high priority and 100 is a very high priority. Following is an example that you can use to customize the tabs width/movement balance:

<Style TargetType="TabsStudio:Tabs" BasedOn="{StaticResource DefaultTabsStyle}">
  <Setter Property="ShortTabsPriority" Value="10"/>
</Style>
High priority of short tabs

High priority of short tabs

Download link: Tabs Studio v2.7.5.

December 16, 2011

Dark theme for Visual Studio 2010

Filed under: Uncategorized — Tags: , — Sergey Vlasov @ 12:32 pm

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:

<Style TargetType="TabsStudio:TabName" BasedOn="{StaticResource DefaultTabNameStyle}">
  <Style.Triggers>
  <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource AncestorType=TabsStudio:Tab}}" Value="False"/>
                <Condition Binding="{Binding Path=IsTabSelected, RelativeSource={RelativeSource AncestorType=TabsStudio:Tab}}" Value="False"/>
            </MultiDataTrigger.Conditions>
            <Setter Property="Foreground" Value="White"/>
      </MultiDataTrigger>
  </Style.Triggers>
</Style>

<Style TargetType="TabsStudio:TabExtension" BasedOn="{StaticResource DefaultTabExtensionStyle}">
  <Style.Triggers>
  <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource AncestorType=TabsStudio:Tab}}" Value="False"/>
                <Condition Binding="{Binding Path=IsTabSelected, RelativeSource={RelativeSource AncestorType=TabsStudio:Tab}}" Value="False"/>
            </MultiDataTrigger.Conditions>
            <Setter Property="Foreground" Value="White"/>
      </MultiDataTrigger>
  </Style.Triggers>
</Style>

<Style TargetType="TabsStudio:TabNameModificationMarker" BasedOn="{StaticResource DefaultTabNameModificationMarkerStyle}">
  <Style.Triggers>
  <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource AncestorType=TabsStudio:Tab}}" Value="False"/>
                <Condition Binding="{Binding Path=IsTabSelected, RelativeSource={RelativeSource AncestorType=TabsStudio:Tab}}" Value="False"/>
            </MultiDataTrigger.Conditions>
            <Setter Property="Foreground" Value="White"/>
      </MultiDataTrigger>
  </Style.Triggers>
</Style>

<Style TargetType="TabsStudio:TabExtensionModificationMarker" BasedOn="{StaticResource DefaultTabExtensionModificationMarkerStyle}">
  <Style.Triggers>
  <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource AncestorType=TabsStudio:Tab}}" Value="False"/>
                <Condition Binding="{Binding Path=IsTabSelected, RelativeSource={RelativeSource AncestorType=TabsStudio:Tab}}" Value="False"/>
            </MultiDataTrigger.Conditions>
            <Setter Property="Foreground" Value="White"/>
      </MultiDataTrigger>
  </Style.Triggers>
</Style>

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

<SolidColorBrush Color="Transparent"/>

Transparent background for not selected tabs

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

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

Project tab coloring rule with transparency


Dark theme with custom transparent colors for two projects

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:

<Condition Binding="{Binding Path=IsGroupFocused, RelativeSource={RelativeSource Self}}" Value="False"/>
<Condition Binding="{Binding Path=IsGroupWithLastActiveDocument, RelativeSource={RelativeSource Self}}" Value="True"/>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
  <GradientStop Color="#FFFDFDFD" Offset="0"/>
  <GradientStop Color="#FFD5DAE3" Offset="0.49"/>
  <GradientStop Color="#FFCED4DF" Offset="0.5"/>
  <GradientStop Color="#FFCED4DF" Offset="1"/>
</LinearGradientBrush>

Gray color rule for selected but unfocused tab

Gray color rule for selected but unfocused tab


Gray selected tab when Solution Explorer is active

Gray selected tab when Solution Explorer is active

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

October 18, 2011

Less rows priority

Filed under: Uncategorized — Tags: — Sergey Vlasov @ 8:50 am

Sometimes you get tabs arranged in more rows than necessary:

Tabs in 4 rows

Tabs in 4 rows


The same tabs in 3 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:

<Style TargetType="TabsStudio:Tabs" BasedOn="{StaticResource DefaultTabsStyle}">
  <Setter Property="LessRowsPriority" Value="10"/>
</Style>

July 17, 2011

Highlighting palette

Filed under: Uncategorized — Tags: , — Sergey Vlasov @ 8:38 pm

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

Highlighting colors in 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):

<Style TargetType="TabsStudio:TabInternals" BasedOn="{StaticResource DefaultTabInternalsStyle}">
    <Style.Triggers>
      <DataTrigger Binding="{Binding Path=(TabsStudioMarker:Properties.HighlightIndex),
                 RelativeSource={RelativeSource AncestorType=TabsStudio:Tab}}" Value="1">
          <Setter Property="Background">
              <Setter.Value>
                   <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                       <GradientStop Color="Transparent" Offset="0.9"/>
                       <GradientStop Color="Green" Offset="0.9"/>
                   </LinearGradientBrush>
              </Setter.Value>
          </Setter>
      </DataTrigger>
  </Style.Triggers>
</Style>

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.

June 11, 2011

Vertical scrollbar for the separate tabs window

Filed under: Uncategorized — Tags: — Sergey Vlasov @ 9:53 am

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

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:

<Style TargetType="TabsStudio:TabsHost" BasedOn="{StaticResource DefaultTabsHostStyle}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TabsStudio:TabsHost}">
        <ScrollViewer HorizontalScrollBarVisibility="Disabled"
                                VerticalScrollBarVisibility="Auto">
          <Grid>
            <Rectangle Width="{TemplateBinding Width}"
                       Height="{TemplateBinding Height}"
                       Fill="{TemplateBinding Background}"/>
            <ContentPresenter/>
          </Grid>
        </ScrollViewer>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

May 5, 2011

Special color for designer tabs

Filed under: Uncategorized — Tags: — Sergey Vlasov @ 4:27 pm

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

Tab coloring rule for designer tabs


Designer tabs with a special color

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.

March 4, 2011

Highlight tabs with Marker

Filed under: Uncategorized — Tags: , — Sergey Vlasov @ 2:42 pm

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

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:

<Style TargetType="TabsStudio:TabInternals" BasedOn="{StaticResource DefaultTabInternalsStyle}">
    <Style.Triggers>
      <DataTrigger Binding="{Binding Path=(TabsStudioMarker:Properties.IsHighlighted), 
                 RelativeSource={RelativeSource AncestorType=TabsStudio:Tab}}" Value="True">
          <Setter Property="Background">
              <Setter.Value>
                   <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                       <GradientStop Color="Transparent" Offset="0.8"/>
                       <GradientStop Color="Green" Offset="1"/>
                   </LinearGradientBrush>
              </Setter.Value>
          </Setter>
      </DataTrigger>
  </Style.Triggers>
</Style>
Tabs highlighted with the custom green color

Tabs highlighted with the custom green color

Download link: Marker v1.0.0.

Older Posts »

Blog at WordPress.com.