Tabs Studio Blog (organizing Visual Studio document tabs)

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>

Top orange adornment for selected tab

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>

Custom tabs font family and size

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>

Italic font style for selected tab name

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.

Below is the visual tree of Tabs Studio controls with base types and additional properties:

Tabs : TabPanel
|
 - Tab : TabItem (IsTabSelected, IsMultiExtensions)
   |
    - TabToolTip : ToolTip (IsTabSelected)
   |
    - TabInternals : DockPanel (IsTabSelected)
      |
       - TabNameGroup : StackPanel (IsTabSelected, IsMultiExtensions, IsNameReadOnly)
      |  |
      |   - TabName : Label  (IsTabSelected, IsMultiExtensions, IsNameReadOnly)
      |  |
      |   - TabNameReadOnlyImage : Image (IsTabSelected, IsMultiExtensions, IsNameReadOnly)
      |
       - TabExtensionGroup : StackPanel (IsTabSelected, IsExtensionActive, IsExtensionReadOnly)
      |  |
      |   - TabExtension : Label (IsTabSelected, IsExtensionActive, IsExtensionReadOnly)
      |  |  |
      |  |   - TabExtensionToolTip : ToolTip (IsTabSelected, IsExtensionActive, IsExtensionReadOnly) 
      |  |
      |   - TabExtensionReadOnlyImage : Image (IsTabSelected, IsExtensionActive, IsExtensionReadOnly)
      |
       - CloseTabButton : Image (IsTabSelected)

TabToolTip, TabInternals and CloseTabButton are missing IsMultiExtensions property – I’ll fix it in the next version. IsMultiExtensions is true when tab is a group of 2 or more extensions.

You can also look at default styles definition file for more styling ideas.