Tabs Studio Blog (organizing Visual Studio document tabs)

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"
                         Focusable="False">
          <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.

February 26, 2011

Horizontal tab alignment

Filed under: Uncategorized — Tags: , — Sergey Vlasov @ 9:07 pm

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

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

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:

<Style x:Key="DefaultTabsItemsControlStyle0" TargetType="TabsStudio:TabsItemsControl">
  <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</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

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:

<Style TargetType="TabsStudio:TabsItemsControl" BasedOn="{StaticResource DefaultTabsItemsControlStyle}">
  <Setter Property="HorizontalContentAlignment" Value="Left"/>
</Style>

February 25, 2011

Selected tab overlay

Filed under: Uncategorized — Tags: — Sergey Vlasov @ 3:23 pm

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 WpfApplication5 project


Tab coloring rule for the WpfApplication6 project

Tab coloring rule for the WpfApplication6 project


Selected tab from the WpfApplication5 project

Selected tab from the WpfApplication5 project


Selected tab from the WpfApplication6 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

Tab coloring rule for the selected tab in the WpfApplication5 project


Selected tab from the WpfApplication5 project showing project's color

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

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

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):

<Style TargetType="TabsStudio:TabInternals" BasedOn="{StaticResource DefaultTabInternalsStyle}">
  <Setter Property="Margin" Value="-1,-1,-1,0"/>
  <Style.Triggers>
    <Trigger Property="IsTabSelected" Value="True">
      <Setter Property="Background">
      <Setter.Value>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
          <GradientStop Color="Red" Offset="0"/>
          <GradientStop Color="Transparent" Offset="0.3"/>
        </LinearGradientBrush>
      </Setter.Value>
      </Setter>
    </Trigger>
  </Style.Triggers>
</Style>

<Style TargetType="TabsStudio:Tab" BasedOn="{StaticResource DefaultTabStyle}">
  <Setter Property="Padding" Value="0,0,0,1"/>  
</Style>

<Style TargetType="TabsStudio:TabNameGroup" BasedOn="{StaticResource DefaultTabNameGroupStyle}">
  <Setter Property="Margin" Value="5,0,0,0"/>  
</Style>

<!--Close tab button: Show on selected tab-->
<Style TargetType="TabsStudio:CloseTabButton" BasedOn="{StaticResource DefaultCloseTabButtonStyle}">
  <Setter Property="Margin" Value="2,0,1,0"/>
  <Style.Triggers>
    <Trigger Property="IsTabSelected" Value="False">
      <Setter Property="Width" Value="4"/>
      <Setter Property="Visibility" Value="Hidden"/>
    </Trigger>
  </Style.Triggers>
</Style>

<!--Close tab button: Show on all tabs-->
<!--<Style TargetType="TabsStudio:CloseTabButton" BasedOn="{StaticResource DefaultCloseTabButtonStyle}">
  <Setter Property="Margin" Value="2,0,1,0"/>
</Style>-->

<!--Close tab button: Don't show-->
<!--<Style TargetType="TabsStudio:CloseTabButton" BasedOn="{StaticResource DefaultCloseTabButtonStyle}">
  <Setter Property="Width" Value="9"/>
  <Setter Property="Visibility" Value="Hidden"/>
  <Style.Triggers>
    <Trigger Property="IsTabSelected" Value="False">
      <Setter Property="Visibility" Value="Hidden"/>
    </Trigger>
  </Style.Triggers>
</Style>-->
Final selected tab overlay

Final selected tab overlay

November 18, 2010

Updating a style from add-ins

Filed under: Uncategorized — Tags: , — Sergey Vlasov @ 11:09 am

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

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:

<Style TargetType="TabsStudio:TabsHost" BasedOn="{StaticResource DefaultTabsHostStyle}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TabsStudio:TabsHost}">
       <StackPanel>  
        <Grid Panel.ZIndex="1">
          <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>
      <Border Height="1" Background="#93979D"/>
      </StackPanel>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
The manually merged TabsHost style for SingleRow and Shaper

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.

November 15, 2010

More tab coloring options

Filed under: Uncategorized — Tags: — Sergey Vlasov @ 12:00 pm

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

The Tab Coloring Rule dialog with new options

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:

<Condition Binding="{Binding Path=(TabsStudioMvcGroup:Properties.IsController),
  RelativeSource={RelativeSource Self}}" Value="True"/>

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:

<Condition Binding="{Binding Path=IsGroupFocused, RelativeSource={RelativeSource Self}}" Value="False"/>

Download link: TabsStudio v2.1.7.

« Newer PostsOlder Posts »

Blog at WordPress.com.