Home Screenshots Download Order Blog* Support
User Guide Style Tab Grouping Add-ins

Style examples

1. Set font family and font size for all tabs.

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

2. Set font style, font weight and text color for the selected tab.

<Style TargetType="TabsStudio:TabName" BasedOn="{StaticResource DefaultTabNameStyle}">
  <Style.Triggers>
    <Trigger Property="IsTabSelected" Value="True">
      <Setter Property="FontStyle" Value="Italic"/>
      <Setter Property="FontWeight" Value="Bold"/>
      <Setter Property="Foreground" Value="Blue"/>
    </Trigger>
  </Style.Triggers>
</Style>
Custom font style and font weight

3. Keep fixed tab width whether a document is modified or not.

By default, modified tab width is greater than non modified one due to additional asterisk. It may inconveniently cause tabs to change rows when editing and saving files. To reserve space for the asterisk when tab extension or tab name are not modified use the following style: 
<Style TargetType="TabsStudio:TabExtensionModificationMarker" 
       BasedOn="{StaticResource DefaultTabExtensionModificationMarkerStyle}">
    <Setter Property="Visibility" Value="Hidden"/>
</Style>
<Style TargetType="TabsStudio:TabNameModificationMarker" 
       BasedOn="{StaticResource DefaultTabNameModificationMarkerStyle}">
    <Setter Property="Visibility" Value="Hidden"/>
</Style>

4. Set the exclamation mark as the file modification marker.

<Style TargetType="TabsStudio:TabExtensionModificationMarker" 
       BasedOn="{StaticResource DefaultTabExtensionModificationMarkerStyle}">
	<Setter Property="Content" Value="!"/>
</Style>
<Style TargetType="TabsStudio:TabNameModificationMarker" 
       BasedOn="{StaticResource DefaultTabNameModificationMarkerStyle}">
	<Setter Property="Content" Value="!"/>
</Style>
The exclamation mark as the file modification marker

5. Set red color for modified tab title.

<Style TargetType="TabsStudio:TabExtensionModificationMarker"
    BasedOn="{StaticResource DefaultTabExtensionModificationMarkerStyle}">
    <Style.Triggers>
        <Trigger Property="IsExtensionModified" Value="True">
            <Setter Property="Visibility" Value="Collapsed"/>
        </Trigger>
    </Style.Triggers>
</Style>
<Style TargetType="TabsStudio:TabExtension"
    BasedOn="{StaticResource DefaultTabExtensionStyle}">
    <Style.Triggers>
        <Trigger Property="IsExtensionModified" Value="True">
            <Setter Property="Foreground" Value="Red"/>
        </Trigger>
    </Style.Triggers>
</Style>

<Style TargetType="TabsStudio:TabNameModificationMarker"
    BasedOn="{StaticResource DefaultTabNameModificationMarkerStyle}">
    <Style.Triggers>
        <Trigger Property="IsNameModified" Value="True">
            <Setter Property="Visibility" Value="Collapsed"/>
        </Trigger>
    </Style.Triggers>
</Style>
<Style TargetType="TabsStudio:TabName"
    BasedOn="{StaticResource DefaultTabNameStyle}">
    <Style.Triggers>
        <Trigger Property="IsNameModified" Value="True">
            <Setter Property="Foreground" Value="Red"/>
        </Trigger>
    </Style.Triggers>
</Style>
Red color for modified tab title

6. Set a custom icon for read-only documents.

<Style TargetType="TabsStudio:TabNameReadOnlyImage" 
       BasedOn="{StaticResource DefaultTabNameReadOnlyImageStyle}">
    <Setter Property="Source" Value="file://c:/GoldLock.png"/>
</Style>

<Style TargetType="TabsStudio:TabExtensionReadOnlyImage" 
       BasedOn="{StaticResource DefaultTabExtensionReadOnlyImageStyle}">
    <Setter Property="Source" Value="file://c:/GoldLock.png"/>
</Style>
Custom icon for read-only documents

7. Set tool tip show delay to 1500 ms (default delay is 500 ms).

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

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

8. Set aliased text rendering mode for tabs in Visual Studio 2010.

<Style TargetType="TabsStudio:Tabs" BasedOn="{StaticResource DefaultTabsStyle}">
    <Setter Property="TextOptions.TextFormattingMode" Value="Display"/>
    <Setter Property="TextOptions.TextRenderingMode" Value="Aliased"/>
</Style>
Text with display aliased options

9. Show the close file button for each extension on the selected tab.

<Style TargetType="TabsStudio:TabExtensionCloseButton" 
       BasedOn="{StaticResource DefaultTabExtensionCloseButtonStyle}">
  <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>
Close file buttons in SSMS

10. Remove default left and right margins of 1 pixel for tabs in a separate Visual Studio 2010 window.

<Style TargetType="TabsStudio:Tabs" BasedOn="{StaticResource DefaultTabsStyle}">
  <Setter Property="Margin" Value="0,0,0,0"/>
</Style>
Excessive tabs margins removed

11. Show the close tab button on an inactive tab when mouse is over the tab.

<Style TargetType="TabsStudio:CloseTabButton" BasedOn="{StaticResource DefaultCloseTabButtonStyle}">
    <Style.Triggers>
        <Trigger Property="IsTabSelected" Value="False">
            <Setter Property="Visibility" Value="Hidden"/>
        </Trigger>
        <DataTrigger Binding="{Binding Path=IsMouseOver, 
                     RelativeSource={RelativeSource AncestorType=TabsStudio:Tab}}" Value="True">
            <Setter Property="Visibility" Value="Visible"/>
        </DataTrigger>
    </Style.Triggers>
</Style>
The close tab button on an inactive tab when mouse is over the tab

12. Disable blue inactive tab background on mouse over.

<Style TargetType="TabsStudio:Tab" BasedOn="{StaticResource DefaultTabStyle}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TabsStudio:Tab}">
        <Border Background="{TemplateBinding Background}" Padding="5,1,5,1" 
                      BorderThickness="1,1,1,0" BorderBrush="Gray">
        <ContentPresenter Name="Content" ContentSource="Header"
              HorizontalAlignment="{Binding Path=HorizontalContentAlignment, 
                RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
Disabled blue inactive tab background on mouse over

13. Add vertical scroll bar to the separate tabs window.

<Style TargetType="TabsStudio:TabsHost" BasedOn="{StaticResource DefaultTabsHostStyle}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TabsStudio:TabsHost}">
        <ScrollViewer HorizontalScrollBarVisibility="Disabled"
                      VerticalScrollBarVisibility="Auto"
                      Focusable="False">
          <Grid>
            <Rectangle Width="{TemplateBinding Width}"
                       Height="{TemplateBinding Height}"
                       Fill="{TemplateBinding Background}"/>
            <ContentPresenter/>
          </Grid>
        </ScrollViewer>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
Tabs window with a vertical scrollbar

14. Set custom color for specific extensions.

<Style TargetType="TabsStudio:TabExtension"
    BasedOn="{StaticResource DefaultTabExtensionStyle}">
    <Style.Triggers>
        <Trigger Property="Content" Value=".vb">
            <Setter Property="Foreground" Value="Blue"/>
        </Trigger>
        <Trigger Property="Content" Value=".vb [Design]">
            <Setter Property="Foreground" Value="Red"/>
        </Trigger>
    </Style.Triggers>
</Style>
Custom colors for extensions

15. Underline the selected tab.

<Style TargetType="TabsStudio:TabName" BasedOn="{StaticResource DefaultTabNameStyle}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TabsStudio:TabName}">
        <ControlTemplate.Triggers>
          <Trigger Property="IsTabSelected" Value="True">
            <Setter TargetName="NameBlock" Property="TextBlock.TextDecorations" Value="Underline"/>
          </Trigger>
        </ControlTemplate.Triggers>
       <TextBlock Name="NameBlock" Padding="0,2,0,2">
         <ContentPresenter />
       </TextBlock>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
Underline the selected tab

16. Limit tab name width to always show the close tab button in vertical mode.

<Style TargetType="TabsStudio:TabName" BasedOn="{StaticResource DefaultTabNameStyle}">
       <Setter Property="MaxWidth" Value="200"/>
</Style>
Limited tab name width

17. Minimize tab width padding when multiple rows are visible.

<Style TargetType="TabsStudio:Tabs" BasedOn="{StaticResource DefaultTabsStyle}">
  <Setter Property="LessRowsPriority" Value="100"/>
  <Setter Property="ShortTabsPriority" Value="100"/>
</Style>

18. Set custom color for active extension.

<Style TargetType="TabsStudio:TabExtension" BasedOn="{StaticResource DefaultTabExtensionStyle}">
	<Style.Triggers>
		<MultiTrigger>
			<MultiTrigger.Conditions>
				<Condition Property="IsTabSelected" Value="True" />
				<Condition Property="IsExtensionActive" Value="True" />
			</MultiTrigger.Conditions>
			<Setter Property="Foreground" Value="Red" />
		</MultiTrigger>
	</Style.Triggers>
</Style>

19. Underline the active extension.

<Style TargetType="TabsStudio:TabExtension"
    BasedOn="{StaticResource DefaultTabExtensionStyle}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TabsStudio:TabExtension}">
        <Grid>
          <Border Name="Border" BorderBrush="Transparent" BorderThickness="1" CornerRadius="2">
            <TextBlock Name="LabelText" Text="{TemplateBinding ContentControl.Content}" Padding="2,1,2,1"/>
          </Border>
        </Grid>
        <ControlTemplate.Triggers>
        
          <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="Border" Property="BorderBrush">
              <Setter.Value>
                <SolidColorBrush Color="Gray" Opacity="1"/>
              </Setter.Value>
            </Setter>
            <Setter TargetName="LabelText" Property="Background" Value="White"/>
            <Setter TargetName="LabelText" Property="Foreground" Value="Black"/>
          </Trigger>

                <MultiTrigger>
                        <MultiTrigger.Conditions>
                                <Condition Property="IsTabSelected" Value="True" />
                                <Condition Property="IsExtensionActive" Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="LabelText" Property="TextBlock.TextDecorations" Value="Underline"/>
                </MultiTrigger>
                
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Return to Style

Copyright 2009 - 2024 Vlasov Studio (Visual Studio extensions and tools)