Tabs Studio Blog (organizing Visual Studio document tabs)

August 26, 2009

Customizing file modification status

Filed under: Uncategorized — Tags: — Sergey Vlasov @ 5:42 am

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>

Default asterisk file modification status

Default asterisk file modification status


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>

Space reserved for file modification status

Space reserved for file modification status


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>

Exclamation mark as file modification marker

Exclamation mark as file modification marker


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>
Red text color as file modification status

Red text color as file modification status

Blog at WordPress.com.