Tabs Studio Blog (organizing Visual Studio document tabs)

Decorator is an example of custom properties usage. It sets distinct color for tabs that belong to the project having the most opened tabs. I.e. if 2 opened tabs are for documents from Project1, 5 tabs from Project2 and 3 tabs from Project3, then tabs from Project2 will be colored blue.

TabsStudioDecorator.Properties class defines custom dependency property IsTopProjectProperty, registers it using the RegisterAttached method and provides two static set and get methods for it.

Main Decorator class recalculates the top project when a tab is created or destroyed. Then it sets IsTopProjectProperty to true for all tabs belonging to the top project (if number of tabs in the top project is greater than 3) and to false for the rest of tabs.

Main Decorator class also implements the TabsStudioExt.IStyler interface and returns definition for the TabsStudioDecorator namespace from the GetNamespacesForResourceDictionary method.

Following style is used to color top project tabs that are not currently selected to white-blue gradient:

<Style TargetType="TabsStudio:Tab" BasedOn="{StaticResource DefaultTabStyle}">
    <Style.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="TabsStudioDecorator:Properties.IsTopProject" 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="#B0B0F0" Offset="1"/>
                     </LinearGradientBrush>
                </Setter.Value>
            </Setter>  
        </MultiTrigger>
    </Style.Triggers>
</Style>

Four tabs belonging to WebSite2 project are colored blue

Download Decorator v1.0.0 for Tabs Studio v1.5.7.

Currently in style triggers only predetermined in Tabs Studio (IsDocument, IsTabSelected) and in WPF (IsMouseOver) properties can be used. For the next Tabs Studio version I’ve added ability for an add-in to add and set its own custom properties to any tab element and use it in style triggers.

These custom properties are WPF Attached Properties. An add-in should define custom static DependencyProperty in a class (I recommend to use separate dedicated class for it), initialize this property using the RegisterAttached method and define two static methods to set and get the property.

After a custom property is defined and registered, an add-in can set it for any tab element when needed:

Properties.SetIsTopProject(tab.TabItem, isTopProject);

Where Properties is a class containing the property, SetIsTopProject is a static set method for the property, tab.TabItem is a tab element we set property for, isTopProject is a value for the property.

On the style side we use this new property in a trigger almost as usual:

<Trigger Property="TabsStudioDecorator:Properties.IsTopProject" Value="True">

We must additionally specify the XAML namespace and the class where the property is defined. Defining this custom XAML namespace is an add-in’s job. Main add-in class must implement the TabsStudioExt.IStyler interface – return a string from the GetNamespacesForResourceDictionary method with required namespace(s) definition(s):

public string GetNamespacesForResourceDictionary()
{
    return "xmlns:TabsStudioDecorator=\"clr-namespace:TabsStudioDecorator;assembly=Decorator\"";
}