Tabs Studio Blog (organizing Visual Studio document tabs)

May 8, 2009

More styling examples

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

1. Change tool tip show delay for the whole tab and extensions 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>

2. Add XP like top orange adornment for the selected tab:

<Style TargetType="TabsStudio:Tab" BasedOn="{StaticResource DefaultTabStyle}">
    <Style.Triggers>
        <Trigger Property="IsTabSelected" Value="True">
            <Setter Property="Background">
              <Setter.Value>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Color="Orange" Offset="0"/>
                    <GradientStop Color="White" Offset="0.2"/>
                </LinearGradientBrush>
              </Setter.Value>
            </Setter>
            <Setter Property="Margin" Value="0,-1,0,0"/>
        </Trigger>
    </Style.Triggers>
</Style>
Top orange adornment for selected tab

Top orange adornment for selected tab

Updated styling examples for v1.0.6

Filed under: Uncategorized — Tags: — Sergey Vlasov @ 4:09 am

As styling syntax was changing during development, I’m updating old examples for the latest Tabs Studio version 1.0.6.

Change tabs font family to Consolas and increase tabs font size to 12 points:

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

Custom tabs font family and size

Set Italic font style only for the selected tab name:

<Style TargetType="TabsStudio:TabName" BasedOn="{StaticResource DefaultTabNameStyle}">
    <Style.Triggers>
        <Trigger Property="IsTabSelected" Value="True">
            <Setter Property="FontStyle" Value="Italic"/>
        </Trigger>
    </Style.Triggers>
</Style>
Italic font style for selected tab name

Italic font style for selected tab name

Default custom style example

Filed under: Uncategorized — Tags: — Sergey Vlasov @ 3:15 am

I’m going to remove the commented example of how to change tabs font size from the Tabs Studio Settings dialog. It’s no good to store such information in user’s settings file after Save button is clicked. In user’s settings file it will sooner or later become outdated and I will not be able to update it.

<!-- An example of how to change tabs font size:
<Style TargetType="TabsStudio:Tabs" BasedOn="{StaticResource DefaultTabsStyle}">
    <Setter Property="Control.FontSize" Value="12pt"/>
</Style>
-->

Other ways to provide examples I’m thinking of are adding them to documentation, creating dedicated styles gallery on Tabs Studio site, creating listbox with styling examples names and Insert button that pastes markup in the style text box.

May 7, 2009

Tabs Studio v1.0.6 is released

Filed under: Releases — Sergey Vlasov @ 5:04 pm

Tabs Studio v1.0.6 is released – added missing IsMultiExtensions property to TabToolTip, TabInternals and CloseTabButton controls; fixed tabs rows on selection; added Remove path from tab name option.

Removing path from tab name

Filed under: Uncategorized — Sergey Vlasov @ 7:26 am

Working on web projects, tab name can contain a path to a file and sometimes this path can be quite long:

Tab name with a path

Tab name with a path

So, I’ve added an option to remove path from tab name:

Remove path from tab name option

Remove path from tab name option


Tab name with a path removed

Tab name with a path removed

Fixing tabs rows on selection

Filed under: Uncategorized — Sergey Vlasov @ 1:42 am

When two or more tabs rows exist and you select tab in the top row this row goes to the bottom. Standard behavior, but confusing nevertheless. Not anymore! The rows are not affected by selection now:

Selected tab in the top row

Selected tab in the top row


Interesting side effect of this change is that when tab is selected and mouse is over it, tab’s background is a mix of white and blue colors on Vista:
Mouse over the selected tab

Mouse over the selected tab


Standard behavior is a white tab’s background in this case, but I don’t know yet how to achieve this with controls library I use. Accidental mix of white and blue colors is interesting, so I’m leaving it as it is for now.

May 6, 2009

Styling documentation

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

Below is the visual tree of Tabs Studio controls with base types and additional properties:

Tabs : TabPanel
|
 - Tab : TabItem (IsTabSelected, IsMultiExtensions)
   |
    - TabToolTip : ToolTip (IsTabSelected)
   |
    - TabInternals : DockPanel (IsTabSelected)
      |
       - TabNameGroup : StackPanel (IsTabSelected, IsMultiExtensions, IsNameReadOnly)
      |  |
      |   - TabName : Label  (IsTabSelected, IsMultiExtensions, IsNameReadOnly)
      |  |
      |   - TabNameReadOnlyImage : Image (IsTabSelected, IsMultiExtensions, IsNameReadOnly)
      |
       - TabExtensionGroup : StackPanel (IsTabSelected, IsExtensionActive, IsExtensionReadOnly)
      |  |
      |   - TabExtension : Label (IsTabSelected, IsExtensionActive, IsExtensionReadOnly)
      |  |  |
      |  |   - TabExtensionToolTip : ToolTip (IsTabSelected, IsExtensionActive, IsExtensionReadOnly) 
      |  |
      |   - TabExtensionReadOnlyImage : Image (IsTabSelected, IsExtensionActive, IsExtensionReadOnly)
      |
       - CloseTabButton : Image (IsTabSelected)

TabToolTip, TabInternals and CloseTabButton are missing IsMultiExtensions property – I’ll fix it in the next version. IsMultiExtensions is true when tab is a group of 2 or more extensions.

You can also look at default styles definition file for more styling ideas.

Tabs Studio v1.0.5 is released

Filed under: Releases — Sergey Vlasov @ 4:37 am

Tabs Studio v1.0.5 is released – added styles support and close tab button.

May 3, 2009

Close tab button

Filed under: Uncategorized — Sergey Vlasov @ 11:40 am

I’ve added close tab button to tabs with default style that displays it only for the selected tab:

Close tab button on the selected tab

Close tab button on the selected tab

You can customize it with style to show close tab button on all tabs:

<Style TargetType="TabsStudio:CloseTabButton" BasedOn="{StaticResource DefaultCloseTabButtonStyle}">
    <Style.Triggers>
        <Trigger Property="IsTabSelected" Value="False">
            <Setter Property="Visibility" Value="Visible"/>
        </Trigger>
    </Style.Triggers>
</Style>
Close tab button on all tabs

Close tab button on all tabs

Of course, you can hide close tab button from all tabs if you like:

<Style TargetType="TabsStudio:CloseTabButton" BasedOn="{StaticResource DefaultCloseTabButtonStyle}">
    <Setter Property="Visibility" Value="Collapsed"/>
</Style>

Another interesting customization is ability to increase close tab button size. For example, if you use larger font size for tabs:

<Style TargetType="TabPanel" BasedOn="{StaticResource DefaultTabPanelStyle}">
    <Setter Property="Control.FontSize" Value="12pt"/>
</Style>
<Style TargetType="TabsStudio:CloseTabButton" BasedOn="{StaticResource DefaultCloseTabButtonStyle}">
    <Setter Property="LayoutTransform">
        <Setter.Value>
            <ScaleTransform ScaleX="1.00" ScaleY="1.00" />
        </Setter.Value>
    </Setter>
</Style>

Larger font size and larger close tab button

Larger font size and larger close tab button


(Default ScaleX and ScaleY for close tab button is 0.75)

May 1, 2009

Default and custom styles

Filed under: Uncategorized — Tags: — Sergey Vlasov @ 6:49 pm

I’ve made final (I hope) changes to the styling engine to support seamless transition from default to custom style. Syntax for our usual example to change global tabs’ font family and font size is following now:

Style resources settings

Style resources settings


Custom tabs style based on default style

Custom tabs style based on default style

Let’s see how styles were applied in this example. Without any styles tabs’ font size and font family have default values and unoccupied by tabs space is black:

Tabs without style

Tabs without style

Tabs Studio has default TabPanel style that sets unoccupied by tabs space to grey on default Windows theme:

<Style x:Key="DefaultTabPanelStyle" TargetType="TabPanel">
            <Setter Property="Background" Value="{x:Static SystemColors.ControlBrush}"/>
</Style>

Default tabs style with unoccupied by tabs space

Default tabs style with unoccupied by tabs space


When custom TabPanel style is based on DefaultTabPanelStyle unoccupied by tabs space is grey. It is possible to define custom style from scratch and does not use default settings:

<Style TargetType="TabPanel">
    <Setter Property="Control.FontStyle" Value="Italic"/>
</Style>
Custom tabs style not using default settings

Custom tabs style not using default settings

Notice how unoccupied by tabs space is black again when custom TabPanel style is not based on DefaultTabPanelStyle.

Finally, explanation of what WPF XAML resources for TabPanel content means in WPF terms. It is part of ResourceDictionary after namespaces definitions, default Tabs Studio styles and before ResourceDictionary closing tag.

« Newer Posts

Blog at WordPress.com.