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>

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>

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>

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>

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>

7. Set tool tip show delay 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>

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>

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>

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>

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>

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>

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">
          <Grid>
            <Rectangle Width="{TemplateBinding Width}"
                       Height="{TemplateBinding Height}"
                       Fill="{TemplateBinding Background}"/>
            <ContentPresenter/>
          </Grid>
        </ScrollViewer>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Return to Style

Copyright 2009 - 2012 Sergey Vlasov