Tabs Studio Blog (organizing Visual Studio document tabs)

If you use custom colors for your tabs, for example, different colors for tabs from different projects, what do you do with the selected tab from a particular project? In the simplest setup you create a project coloring rule that excludes the selected tab and the selected tab looks the same no matter which project it belongs to:

If you get used to project colors, you may want to show selected tab’s project too. You can add an additional selected tab rule for each project:


The obvious disadvantage is that now you have to provide two coloring rules for each project (three rules if you use distinct color for the previously selected tab too). It would be nice to specify a selected tab overlay only once. Tabs Studio doesn’t currently support coloring rule overlays or rule combinations, but you can use a custom style for the TabInternals element to achieve the same result. First you change the tab coloring rules for the WpfApplication5 and WpfApplication6 projects to include the tab selected state:

Then add the following custom style:

Now this overlay works for all projects, but the red bar has some undesired padding around it. To remove this padding we remove Tab‘s padding, add TabNameGroup‘s left padding and add CloseTabButton‘s right padding (note that you need to uncomment one of the three CloseTabButton styles depending on your close tab button presentation setting):

<Style TargetType="TabsStudio:TabInternals" BasedOn="{StaticResource DefaultTabInternalsStyle}">
  <Setter Property="Margin" Value="-1,-1,-1,0"/>
  <Style.Triggers>
    <Trigger Property="IsTabSelected" Value="True">
      <Setter Property="Background">
      <Setter.Value>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
          <GradientStop Color="Red" Offset="0"/>
          <GradientStop Color="Transparent" Offset="0.3"/>
        </LinearGradientBrush>
      </Setter.Value>
      </Setter>
    </Trigger>
  </Style.Triggers>
</Style>

<Style TargetType="TabsStudio:Tab" BasedOn="{StaticResource DefaultTabStyle}">
  <Setter Property="Padding" Value="0,0,0,1"/>  
</Style>

<Style TargetType="TabsStudio:TabNameGroup" BasedOn="{StaticResource DefaultTabNameGroupStyle}">
  <Setter Property="Margin" Value="5,0,0,0"/>  
</Style>

<!--Close tab button: Show on selected tab-->
<Style TargetType="TabsStudio:CloseTabButton" BasedOn="{StaticResource DefaultCloseTabButtonStyle}">
  <Setter Property="Margin" Value="2,0,1,0"/>
  <Style.Triggers>
    <Trigger Property="IsTabSelected" Value="False">
      <Setter Property="Width" Value="4"/>
      <Setter Property="Visibility" Value="Hidden"/>
    </Trigger>
  </Style.Triggers>
</Style>

<!--Close tab button: Show on all tabs-->
<!--<Style TargetType="TabsStudio:CloseTabButton" BasedOn="{StaticResource DefaultCloseTabButtonStyle}">
  <Setter Property="Margin" Value="2,0,1,0"/>
</Style>-->

<!--Close tab button: Don't show-->
<!--<Style TargetType="TabsStudio:CloseTabButton" BasedOn="{StaticResource DefaultCloseTabButtonStyle}">
  <Setter Property="Width" Value="9"/>
  <Setter Property="Visibility" Value="Hidden"/>
  <Style.Triggers>
    <Trigger Property="IsTabSelected" Value="False">
      <Setter Property="Visibility" Value="Hidden"/>
    </Trigger>
  </Style.Triggers>
</Style>-->