Style

Introduction

Style allows you to customize visual representation of tabs: font, color, position and visibility of each tab element. See Styling and Templating MSDN page for the great introduction to this topic. For example, following style sets tooltip show delay for the whole tab and extensions to 500 ms (default delay is 1500 ms):

While editing style, live preview immediately shows updated settings for sample tabs. In the Quick Style window you can select preferred options and automatically generate corresponding XAML style. Quick Style can't selectively modify existing style and thus most useful when customizing Tabs Studio add-in for the first time:

Examples

1. 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>

2. Change 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 -1, 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>

3. Show individual close file buttons on the selected tab:

<Style TargetType="TabsStudio:TabExtensionCloseButton" BasedOn="{StaticResource DefaultTabExtensionCloseButton}">
  <Style.Triggers>
    <Trigger Property="IsTabSelected" Value="True">
      <Setter Property="Visibility" Value="Visible"/>
    </Trigger>
  </Style.Triggers>
</Style>

<Style TargetType="TabsStudio:CloseTabButton" BasedOn="{StaticResource DefaultCloseTabButtonStyle}">
  <Style.Triggers>
    <Trigger Property="IsMultiExtensions" Value="True">
      <Setter Property="Visibility" Value="Collapsed"/>
    </Trigger>
  </Style.Triggers>
</Style>

Community styles

1. Roger Peters's style:

Source

2. Jameel Al-Aziz's Visual Studio 2010 style:

Source

3. Jameel Al-Aziz's Visual Studio 2010 Silver theme style:

Source

Specification

Tabs style is a part of WPF ResourceDictionary after namespaces definitions, default Tabs Studio styles and before the ResourceDictionary closing tag. You can look at default styles definition file for VS 2008 and default styles definition file for VS 2010 for more styling ideas. Below is the tree of Tabs Studio controls with base types and additional properties:

Tabs : Panel (IsGroupSelected, IsGroupFocused for VS 2010, IsGroupWithLastActiveDocument for VS 2010)
|
 - Tab : TabItem (IsTabSelected, IsPreviouslySelectedTab, IsDocument, IsMultiExtensions)
   |
    - TabToolTip : ToolTip
   |
    - TabInternals : DockPanel
      |
       - TabNameGroup : StackPanel (IsNameReadOnly, IsNameModified, IsNameExecuting, IsNameDebugging)
      |  |
      |   - TabName : Label
      |  |
      |   - TabNameModificationMarker : Label
      |  |
      |   - TabNameReadOnlyImage : Image
      |  |
      |   - TabNameExecutingDebuggingImage : Image
      |
       - TabExtensionGroup : StackPanel (IsExtensionActive, IsExtensionReadOnly, IsExtensionModified,
      |  |                               IsExtensionExecuting, IsExtensionDebugging)
      |  |
      |   - TabExtension : Label
      |  |  |
      |  |   - TabExtensionToolTip : ToolTip
      |  |
      |   - TabExtensionModificationMarker : Label
      |  |
      |   - TabExtensionReadOnlyImage : Image
      |  |
      |   - TabExtensionExecutingDebuggingImage : Image
      |  |
      |   - TabExtensionCloseButton: Button
      |
       - CloseTabButton : Button

IsMultiExtensions property is true when tab is a group of two or more extensions. IsDocument property is false for Start Page, Class View, Object Browser etc.

Copyright 2009 - 2010 Sergey Vlasov