Tabs Studio Blog (organizing Visual Studio document tabs)

Traditionally Tabs Studio used asterisk as file modification marker. I’ve added additional controls for tab and tab extension modification markers to allow their XAML styling:

TabNameModificationMarker Label control was added before TabNameReadOnlyImage with the following default style:

<Style x:Key="DefaultTabNameModificationMarkerStyle" TargetType="TabsStudio:TabNameModificationMarker">
    <Setter Property="Margin" Value="0,0,0,0"/>
    <Setter Property="Padding" Value="0,0,0,0"/>
    <Setter Property="Content" Value="*"/>
    <Setter Property="Visibility" Value="Collapsed"/>
    <Style.Triggers>
        <Trigger Property="IsNameModified" Value="True">
            <Setter Property="Visibility" Value="Visible"/>
        </Trigger>
    </Style.Triggers>
</Style>

TabExtensionModificationMarker Label control was added before TabExtensionReadOnlyImage with the following default style:

<Style x:Key="DefaultTabExtensionModificationMarkerStyle" TargetType="TabsStudio:TabExtensionModificationMarker">
    <Setter Property="Margin" Value="0,0,0,0"/>
    <Setter Property="Padding" Value="0,0,0,0"/>
    <Setter Property="Content" Value="*"/>
    <Setter Property="Visibility" Value="Collapsed"/>
    <Style.Triggers>
        <Trigger Property="IsExtensionModified" Value="True">
            <Setter Property="Visibility" Value="Visible"/>
        </Trigger>
    </Style.Triggers>
</Style>

Let’s see some new styling examples that are possible now.

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 is not modified use the following style (same approach can be used for tab name):

<Style TargetType="TabsStudio:TabExtensionModificationMarker" 
    BasedOn="{StaticResource DefaultTabExtensionModificationMarkerStyle}">
    <Setter Property="Visibility" Value="Hidden"/>
</Style>

A custom string (e.g. exclamation mark) can be used instead of asterisk as the file modification marker for tab extension (same approach can be used for tab name):

<Style TargetType="TabsStudio:TabExtensionModificationMarker" 
    BasedOn="{StaticResource DefaultTabExtensionModificationMarkerStyle}">
    <Setter Property="Content" Value="!"/>
</Style>

Instead of showing additional text marker, appearance of file name can be customized (e.g. setting red color for modified tab text):

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