Tabs Studio Blog (organizing Visual Studio document tabs)

When many tabs are opened they are not used equally. Some are used more often, some have been used recently. It would be nice to highlight these more used tabs to reduce time to look for them among less used tabs. Thus, I was thinking about adding tab rating indexes for usage frequency and recent usage. These ratings would be implemented as tab control properties and would be available for styling.

On the other hand, there is a risk to create too much distracting workspace and there is uncertainty whether it would be helpful at all. So, to experiment with this idea a little I’ve added IsPreviouslySelectedTab property that is true for the previously selected tab. Default style doesn’t change color for previously selected tab, but custom styling with this property works exactly the same as with IsTabSelected property:

<Style TargetType="TabsStudio:Tab" BasedOn="{StaticResource DefaultTabStyle}">
    <Style.Triggers>
        <Trigger Property="IsPreviouslySelectedTab" Value="True">
            <Setter Property="Background" Value="#F5F5FF"/>
        </Trigger>
    </Style.Triggers>
</Style>

Oftentimes you can switch to previously selected tab using standard Ctrl+Tab shortcut. But not always, as previous Ctrl+Tab window can be an extension on the currently selected tab for example. Plus, when you close selected or previously selected tab, current implementation doesn’t show next previously selected tab.

XAML supports styles with control templates that can completely change control look. Following example changes tabs shape:

<Style TargetType="{x:Type TabsStudio:Tab}" BasedOn="{StaticResource DefaultTabStyle}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabsStudio:Tab}">
                <Grid>
                    <Border Name="Border" BorderBrush="Black" BorderThickness="1,1,1,1" CornerRadius="6,6,0,0">
                        <ContentPresenter ContentSource="Header" Margin="12,2,12,2"/>
                    </Border>
                    <Polygon Points="0 22, 9 0, 0 0" Fill="{x:Static SystemColors.ControlBrush}"/>
                    <Line X1="0" Y1="22" X2="9" Y2="0" Stroke="Black" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsTabSelected" Value="True">
                        <Setter TargetName="Border" Property="Background" Value="White"/>
                    </Trigger>
                    <Trigger Property="IsTabSelected" Value="False">
                        <Setter TargetName="Border" Property="Background" Value="LightGray" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

While extra powerful, control templates in particular require nontrivial XAML skills and persistence to produce desired result.

I’ve added live style preview when editing it:

1. Change tool tip show delay for the whole tab and extensions to 500 ms (default delay is 1500 ms):

<Style TargetType="TabsStudio:Tab" BasedOn="{StaticResource DefaultTabStyle}">
    <Setter Property="ToolTipService.InitialShowDelay" Value="500"/>
</Style>
<Style TargetType="TabsStudio:TabExtension" BasedOn="{StaticResource DefaultTabExtensionStyle}">
    <Setter Property="ToolTipService.InitialShowDelay" Value="500"/>
</Style>

2. Add XP like top orange adornment for the selected tab:

<Style TargetType="TabsStudio:Tab" BasedOn="{StaticResource DefaultTabStyle}">
    <Style.Triggers>
        <Trigger Property="IsTabSelected" Value="True">
            <Setter Property="Background">
              <Setter.Value>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Color="Orange" Offset="0"/>
                    <GradientStop Color="White" Offset="0.2"/>
                </LinearGradientBrush>
              </Setter.Value>
            </Setter>
            <Setter Property="Margin" Value="0,-1,0,0"/>
        </Trigger>
    </Style.Triggers>
</Style>

As styling syntax was changing during development, I’m updating old examples for the latest Tabs Studio version 1.0.6.

Change tabs font family to Consolas and increase tabs font size to 12 points:

<Style TargetType="TabsStudio:Tabs" BasedOn="{StaticResource DefaultTabsStyle}">
    <Setter Property="Control.FontFamily" Value="Consolas"/>
    <Setter Property="Control.FontSize" Value="12pt"/>
</Style>

Set Italic font style only for the selected tab name:

<Style TargetType="TabsStudio:TabName" BasedOn="{StaticResource DefaultTabNameStyle}">
    <Style.Triggers>
        <Trigger Property="IsTabSelected" Value="True">
            <Setter Property="FontStyle" Value="Italic"/>
        </Trigger>
    </Style.Triggers>
</Style>

I’m going to remove the commented example of how to change tabs font size from the Tabs Studio Settings dialog. It’s no good to store such information in user’s settings file after Save button is clicked. In user’s settings file it will sooner or later become outdated and I will not be able to update it.

<!-- An example of how to change tabs font size:
<Style TargetType="TabsStudio:Tabs" BasedOn="{StaticResource DefaultTabsStyle}">
    <Setter Property="Control.FontSize" Value="12pt"/>
</Style>
-->

Other ways to provide examples I’m thinking of are adding them to documentation, creating dedicated styles gallery on Tabs Studio site, creating listbox with styling examples names and Insert button that pastes markup in the style text box.