Tabs Studio Blog (organizing Visual Studio document tabs)

November 24, 2009

Tabs Studio 2010 style by Jameel Al-Aziz

Filed under: Uncategorized — Tags: , — Sergey Vlasov @ 5:45 pm

Jameel did a great work designing Tabs Studio style perfectly matching Visual Studio 2010 theme:

Visual Studio 2010 style by Jameel Al-Aziz

Visual Studio 2010 style by Jameel Al-Aziz


His style requires Visual Studio 2010 Beta 2 and Tabs Studio v1.7.6. You can get this style here.

November 10, 2009

Animation effects

Filed under: Uncategorized — Tags: — Sergey Vlasov @ 9:05 pm

You can use WPF animation effects to customize Tabs Studio presentation. Tabs Studio v1.7.3 demonstrates fade effect for the yellow extension background when mouse is over it and transition effect between states for the close tab button. You can turn on these two effects in the Quick Style window:

Quick Style animate option

Quick Style animate option


For example, fade-in effect for an extension starts on mouse enter event, during 0.2 seconds it changes border color from transparent to gray and it changes yellow background from transparent to opaque:

  
<EventTrigger RoutedEvent="Control.MouseEnter">
  <EventTrigger.Actions>
    <BeginStoryboard>
      <Storyboard>
        <ColorAnimation  Duration="0:0:0.2" Storyboard.TargetName="Border"    Storyboard.TargetProperty="BorderBrush.Color"  To="Gray"/>
        <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="LabelText" Storyboard.TargetProperty="Background.Opacity" To="1"/>
      </Storyboard>
    </BeginStoryboard>
  </EventTrigger.Actions>
</EventTrigger>

Full sample effects definitions are available when you turn on animation and generate style in the Quick Style window. I think the most common customization for the sample effects provided will be adjustment of animation duration.

October 27, 2009

Updated tab extension style

Filed under: Uncategorized — Tags: — Sergey Vlasov @ 5:29 pm

I’ve updated default TabExtension style to ease extension selection. When mouse is over extension it is highlighted with yellow background now, there is no more shadow for extension and there is more padding around tab extension and tab name:

Updated tab extension style

Updated tab extension style

October 23, 2009

Improved text rendering in .NET 4.0 Beta 2

Filed under: Uncategorized — Tags: — Sergey Vlasov @ 9:35 am

WPF 4.0 introduces new text rendering options. You can customize Tabs Studio text with these new options in Visual Studio 2010 Beta 2 using a style like this one:

<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

Text with display aliased options


Text with display aliased options 3x zoom

Text with display aliased options 3x zoom


It would be great to make sharper text works in Visual Studio 2008 as well, but right now I don’t see a good solution. Simply installing .NET 4.0 Beta 2 runtime on a Visual Studio 2008 machine doesn’t make these new options available to Tabs Studio automatically.

October 13, 2009

Quick style

Filed under: Uncategorized — Tags: — Sergey Vlasov @ 7:58 pm

I’ve combined common style templates into the Quick Style dialog:

Quick Style dialog

Quick Style dialog


You can select preferred options and automatically generate corresponding XAML style. This dialog will be available from the Style tab:
Quick style button on Style tab

Quick style button on Style tab


The Quick Style dialog can’t modify existing style and most useful when customizing Tabs Studio for the first time.

September 2, 2009

Decorator add-in

Filed under: Uncategorized — Tags: , — Sergey Vlasov @ 7:14 pm

Decorator is an example of custom properties usage. It sets distinct color for tabs that belong to the project having the most opened tabs. I.e. if 2 opened tabs are for documents from Project1, 5 tabs from Project2 and 3 tabs from Project3, then tabs from Project2 will be colored blue.

TabsStudioDecorator.Properties class defines custom dependency property IsTopProjectProperty, registers it using the RegisterAttached method and provides two static set and get methods for it.

Main Decorator class recalculates the top project when a tab is created or destroyed. Then it sets IsTopProjectProperty to true for all tabs belonging to the top project (if number of tabs in the top project is greater than 3) and to false for the rest of tabs.

Main Decorator class also implements the TabsStudioExt.IStyler interface and returns definition for the TabsStudioDecorator namespace from the GetNamespacesForResourceDictionary method.

Following style is used to color top project tabs that are not currently selected to white-blue gradient:

<Style TargetType="TabsStudio:Tab" BasedOn="{StaticResource DefaultTabStyle}">
    <Style.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="TabsStudioDecorator:Properties.IsTopProject" Value="True"/>
                <Condition Property="IsTabSelected" Value="False"/>
            </MultiTrigger.Conditions>
            <Setter Property="Background">
                <Setter.Value>
                     <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                         <GradientStop Color="#F5F5F5" Offset="0"/>
                         <GradientStop Color="#B0B0F0" Offset="1"/>
                     </LinearGradientBrush>
                </Setter.Value>
            </Setter>  
        </MultiTrigger>
    </Style.Triggers>
</Style>
Four tabs belonging to WebSite2 project are colored blue

Four tabs belonging to WebSite2 project are colored blue

Download Decorator v1.0.0 for Tabs Studio v1.5.7.

Using attached properties in an add-in for advanced styling

Filed under: Uncategorized — Tags: , — Sergey Vlasov @ 9:15 am

Currently in style triggers only predetermined in Tabs Studio (IsDocument, IsTabSelected) and in WPF (IsMouseOver) properties can be used. For the next Tabs Studio version I’ve added ability for an add-in to add and set its own custom properties to any tab element and use it in style triggers.

These custom properties are WPF Attached Properties. An add-in should define custom static DependencyProperty in a class (I recommend to use separate dedicated class for it), initialize this property using the RegisterAttached method and define two static methods to set and get the property.

After a custom property is defined and registered, an add-in can set it for any tab element when needed:

Properties.SetIsTopProject(tab.TabItem, isTopProject);

Where Properties is a class containing the property, SetIsTopProject is a static set method for the property, tab.TabItem is a tab element we set property for, isTopProject is a value for the property.

On the style side we use this new property in a trigger almost as usual:

<Trigger Property="TabsStudioDecorator:Properties.IsTopProject" Value="True">

We must additionally specify the XAML namespace and the class where the property is defined. Defining this custom XAML namespace is an add-in’s job. Main add-in class must implement the TabsStudioExt.IStyler interface – return a string from the GetNamespacesForResourceDictionary method with required namespace(s) definition(s):

public string GetNamespacesForResourceDictionary()
{
    return "xmlns:TabsStudioDecorator=\"clr-namespace:TabsStudioDecorator;assembly=Decorator\"";
}

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

July 11, 2009

Custom style from smartyp

Filed under: Uncategorized — Tags: — Sergey Vlasov @ 8:37 am

smartyp posted his style for Tabs Studio:

smartyp's style

smartyp's style

May 18, 2009

Document and non document tabs

Filed under: Uncategorized — Tags: — Sergey Vlasov @ 3:43 pm

One way to differentiate tabs is by document/non document property. Document tabs are source files, designers and resources. Non document tabs are Start Page, Class View, Object Browser etc. I’ve added IsDocument property to all tab controls reflecting this dichotomy. Default style doesn’t use this property.

Custom style that sets different color for non document tabs should also take into account conditions when non document tab is selected and when non document tab was previously selected. It is possible to set different color for each case. It is also possible to use custom color for non document tab only if it is not selected and was not previously selected, as demonstrated in the following example:

<Style TargetType="TabsStudio:Tab" BasedOn="{StaticResource DefaultTabStyle}">
    <Style.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsDocument" Value="False"/>
                <Condition Property="IsTabSelected" Value="False"/>
                <Condition Property="IsPreviouslySelectedTab" Value="False"/>
            </MultiTrigger.Conditions>
            <Setter Property="Background">
                <Setter.Value>
                     <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                         <GradientStop Color="#F5F5F5" Offset="0"/>
                         <GradientStop Color="#B0D0B0" Offset="1"/>
                     </LinearGradientBrush>
                </Setter.Value>
            </Setter>  
        </MultiTrigger>
    </Style.Triggers>
</Style>
Custom color for non document tab

Custom color for non document tab

« Newer PostsOlder Posts »

Blog at WordPress.com.