Community.VisualStudio.Toolkit
Community.VisualStudio.Toolkit copied to clipboard
UseVsTheme applies incorrect style for TabControl.TabItem in the dark mode
TabItems (TabControl) do not follow standard VS colours for tabs, see screenshot (top row). An active tab is hardly readable in the dark mode.
Visual Studio's brushes defined in EnvironmentColors
don't seem to be correct (or maybe I'm using the wrong brushes). I've defined this:
<Style TargetType="TabItem">
<Setter Property="BorderBrush" Value="{DynamicResource {x:Static platform:EnvironmentColors.ToolWindowTabBorderBrushKey}}" />
<Setter Property="Background" Value="{DynamicResource {x:Static platform:EnvironmentColors.ToolWindowTabGradientBrushKey}}" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static platform:EnvironmentColors.ToolWindowTabTextBrushKey}}" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="{DynamicResource {x:Static platform:EnvironmentColors.ToolWindowTabMouseOverBorderBrushKey}}" />
<Setter Property="Background" Value="{DynamicResource {x:Static platform:EnvironmentColors.ToolWindowTabMouseOverBackgroundGradientBrushKey}}" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static platform:EnvironmentColors.ToolWindowTabMouseOverTextBrushKey}}" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderBrush" Value="{DynamicResource {x:Static platform:EnvironmentColors.ToolWindowTabSelectedBorderBrushKey}}" />
<Setter Property="Background" Value="{DynamicResource {x:Static platform:EnvironmentColors.ToolWindowTabSelectedTabBrushKey}}" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static platform:EnvironmentColors.ToolWindowTabSelectedTextBrushKey}}" />
</Trigger>
</Style.Triggers>
</Style>
This is what it looks like in the Blue theme:
Not bad, but not great either. There doesn't seem to be any colors specifically for disabled tabs. However, the dark theme is just awful:
It looks similar to what you posted, so perhaps you've defined simiar styles.
I don't know whether a different tab layout would be suitable for you, but you could try using these styles that Visual Studio provides:
<ResourceDictionary>
<Style TargetType="TabControl" BasedOn="{StaticResource {x:Static shell:VsResourceKeys.ThemedDialogTabControlNavigationStyleKey}}"/>
<Style TargetType="TabItem" BasedOn="{StaticResource {x:Static shell:VsResourceKeys.ThemedDialogTabItemNavigationStyleKey}}"/>
</ResourceDictionary>
The shell
namespace is xmlns:shell="clr-namespace:Microsoft.VisualStudio.Shell;assembly=Microsoft.VisualStudio.Shell.15.0"
.
It gives you a vertical tab strip on the left-hand side and looks like this:
I'm not sure where that style is actually used in Visual Studio, but it looks similar to what you see when you open Build -> Publish Selection.
In Start Page+ I based my styles on VsColors
from Microsoft.VisualStudio.Shell
like so:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vsshell="clr-namespace:Microsoft.VisualStudio.Shell;assembly=Microsoft.VisualStudio.Shell.15.0"
>
<!-- Menu -->
<SolidColorBrush x:Key="MenuActiveBrush"
Color="{DynamicResource {x:Static vsshell:VsColors.ToolWindowTabSelectedTextKey}}"
/>
<SolidColorBrush x:Key="MenuInactiveBrush"
Color="{DynamicResource {x:Static vsshell:VsColors.ToolWindowTabSelectedTextKey}}"
/>
<SolidColorBrush x:Key="MenuBackgroundBrush"
Color="{DynamicResource {x:Static vsshell:VsColors.ToolWindowBackgroundKey}}"
/>
etc
I have added a Menu and Tab Control to my tool window and I am using madskristensen's VsTheme.cs file. Since the menu and tab control did not theme properly, I added two new styles as follows but that didn't affect the styling at all.
allResources[typeof(Menu)] = new Style
{
TargetType = typeof(Menu),
BasedOn = (Style)shellResources[typeof(MenuItem)],
Setters =
{
new Setter(Control.PaddingProperty, new Thickness(2, 3, 2, 3))
}
};
allResources[typeof(TabControl)] = new Style
{
TargetType = typeof(TabControl),
BasedOn = (Style)shellResources[typeof(TabItem)],
Setters =
{
new Setter(Control.PaddingProperty, new Thickness(2,3,2,3))
}
};
Since menu and tabcontrol are both containers of sorts it appears that I may need to define a new theme resource but I can't figure how to do that.