Tabs Studio Blog (organizing Visual Studio document tabs)

I’ve created the MvcGroup add-in that groups ASP.NET MVC controller and view tabs near each other (a controller is placed before views). This add-in also adds IsController, IsView and GroupName properties that can be used to color MVC tabs by type and/or by group name. See the following two examples:

<Style TargetType="TabsStudio:Tab" BasedOn="{StaticResource DefaultTabStyle}">
  <Style.Triggers>
    <MultiTrigger>
      <MultiTrigger.Conditions>
        <Condition Property="TabsStudioMvcGroup:Properties.IsController" Value="True"/>
        <Condition Property="IsTabSelected" Value="False"/>
      </MultiTrigger.Conditions>
      <Setter Property="Background">
        <Setter.Value>
          <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="#F5F5F5" Offset="0"/>
            <GradientStop Color="#B0D0B0" Offset="1"/>
          </LinearGradientBrush>
        </Setter.Value>
      </Setter>
    </MultiTrigger>
    <MultiTrigger>
      <MultiTrigger.Conditions>
        <Condition Property="TabsStudioMvcGroup:Properties.IsView" Value="True"/>
        <Condition Property="IsTabSelected" Value="False"/>
      </MultiTrigger.Conditions>
      <Setter Property="Background">
        <Setter.Value>
          <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="#F5F5F5" Offset="0"/>
            <GradientStop Color="#B0B0D0" Offset="1"/>
          </LinearGradientBrush>
        </Setter.Value>
      </Setter>
    </MultiTrigger>
  </Style.Triggers>
</Style>

ASP.NET MVC tabs grouping and coloring by type

<Style TargetType="TabsStudio:Tab" BasedOn="{StaticResource DefaultTabStyle}">
  <Style.Triggers>
    <MultiTrigger>
      <MultiTrigger.Conditions>
        <Condition Property="TabsStudioMvcGroup:Properties.GroupName" Value="Account"/>
        <Condition Property="IsTabSelected" Value="False"/>
      </MultiTrigger.Conditions>
      <Setter Property="Background">
        <Setter.Value>
          <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="#F5F5F5" Offset="0"/>
            <GradientStop Color="#B0D0B0" Offset="1"/>
          </LinearGradientBrush>
        </Setter.Value>
      </Setter>
    </MultiTrigger>
    <MultiTrigger>
      <MultiTrigger.Conditions>
        <Condition Property="TabsStudioMvcGroup:Properties.GroupName" Value="Home"/>
        <Condition Property="IsTabSelected" Value="False"/>
      </MultiTrigger.Conditions>
      <Setter Property="Background">
        <Setter.Value>
          <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="#F5F5F5" Offset="0"/>
            <GradientStop Color="#B0B0D0" Offset="1"/>
          </LinearGradientBrush>
        </Setter.Value>
      </Setter>
    </MultiTrigger>
  </Style.Triggers>
</Style>

ASP.NET MVC tabs grouping and coloring by group name

Download link: MvcGroup v1.0.0.

As the Decorator add-in demonstrated, it is easy to add project properties to tabs and use it for coloring. I decided to write the separate Projector add-in that explicitly adds the project name property to tabs.

With the Projector installed, to color tabs for the ClassLibrary2 project with purple you can use the following style:

<Style TargetType="TabsStudio:Tab" BasedOn="{StaticResource DefaultTabStyle}">
    <Style.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="TabsStudioProjector:Properties.ProjectName" Value="ClassLibrary2"/>
                <Condition Property="IsTabSelected" Value="False"/>
            </MultiTrigger.Conditions>
            <Setter Property="Background">
                <Setter.Value>
                     <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                         <GradientStop Color="#F5F5F5" Offset="0"/>
                         <GradientStop Color="#B0B0F0" Offset="1"/>
                     </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </MultiTrigger>
    </Style.Triggers>
</Style>

Purple tab from the ClassLibrary2 project

Finding and assigning a distinct color for each project in a solution could be hard. Assigning a single color to a group of projects is more practical, except WPF doesn’t have direct capability to trigger match between a project name and a list of names. Projector adds custom IsAnyOfConverter inherited from System.Windows.Data.IValueConverter to support this scenario. The custom Convert function of the converter receives tab’s project name as the value parameter, comma separated list of project names for a color as the parameter parameter and returns true if tab’s project name is in the list:

public object Convert(object value, System.Type targetType,
    object parameter, System.Globalization.CultureInfo culture)
{
    string[] allowedValues = ((string)parameter).Split(new System.Char[] { ',' });
    return ((System.Collections.Generic.IList)allowedValues).Contains((string)value);
}

To use this converter in XAML we define it as a static resource and invoke in a data trigger:

<TabsStudioProjector:IsAnyOfConverter x:Key="IsAnyOf" />

<Style TargetType="TabsStudio:Tab" BasedOn="{StaticResource DefaultTabStyle}">
    <Style.Triggers>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Path=(TabsStudioProjector:Properties.ProjectName), 
                        RelativeSource={RelativeSource Self}, 
                        Converter={StaticResource IsAnyOf},
                        ConverterParameter='ClassLibrary3,ClassLibrary4'}" 
                        Value="True"/>
                <Condition Binding="{Binding Path=IsTabSelected, RelativeSource={RelativeSource Self}}" Value="False"/>
            </MultiDataTrigger.Conditions>
            <Setter Property="Background">
                <Setter.Value>
                     <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                         <GradientStop Color="#F5F5F5" Offset="0"/>
                         <GradientStop Color="#A0C0A0" Offset="1"/>
                     </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </MultiDataTrigger>
    </Style.Triggers>
</Style>

Green tabs from the ClassLibrary3 and ClassLibrary4 projects

Using the same technique it is possible, for example, to create a regex converter matching tab’s project name with a regular expression specified as the parameter.

Download link: Projector v1.0.