Tabs Studio Blog (organizing Visual Studio document tabs)

February 25, 2011

Selected tab overlay

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

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:

Tab coloring rule for the WpfApplication5 project

Tab coloring rule for the WpfApplication5 project


Tab coloring rule for the WpfApplication6 project

Tab coloring rule for the WpfApplication6 project


Selected tab from the WpfApplication5 project

Selected tab from the WpfApplication5 project


Selected tab from the WpfApplication6 project

Selected tab from the WpfApplication6 project

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:
Tab coloring rule for the selected tab in the WpfApplication5 project

Tab coloring rule for the selected tab in the WpfApplication5 project


Selected tab from the WpfApplication5 project showing project's color

Selected tab from the WpfApplication5 project showing project's color


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:
Tab coloring rule for the WpfApplication5 project including the tab selected state

Tab coloring rule for the WpfApplication5 project including the tab selected state


Then add the following custom style:
Simple TabInternals overlay for the selected tab

Simple TabInternals overlay for the selected tab


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>-->
Final selected tab overlay

Final selected tab overlay

Blog at WordPress.com.