How can I match Visual Studio's theme when creating a VSIX tool window?

Question

I am creating an extension for Visual Studio (2012+) that involves a tool window. I was hoping to style the window identically to match the current theme of Visual Studio. However, I am having a great deal of trouble figuring out how to do it.

This post suggests that applying no style at all is all that is required, but that does not match my experience thus far (even creating a default VSIX project in VS2017 and adding a tool window shows a button that I would argue is standard WPF in theme and not VS themed, at least when using the dark VS theme in VS2017).

This post asked a similar question, and the solution at the time seemed to be to create similar controls using a free toolkit. However, that was for VS2012 and 6 years ago, and I'm hoping a solution is more available these days. It doesn't seem very future proof to take this route.

Another solution is to apply Visual Studio's VsBrushes and VsColors to WPF controls. This probably gets me some way to the solution - but styles are more than colors, so it doesn't seem very satisfactory.

Is there a way to apply Visual Studio's basic controls styles (button, text box, listview, treeview, etc.) to my VSIX tool window to make it look and feel at home in Visual Studio?

Thanks for any suggestions!

Oscular

How about binding to static VS resources? #18913708 – Aphra

That is the solution I have settled on. It's basically a slightly easier solution than using VsColors and VsBrushes. I think I can get close to the look and feel of VS, but it won't be exactly the same without using the exact XAML that VS uses. – Oscular

Answer 1

How can I match Visual Studio's theme when creating a VSIX tool window?

You can try to binding to static VS resources:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vs_shell="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Shell.11.0">
<Style TargetType="Label">
    <Setter Property="Foreground" Value="{DynamicResource {x:Static vs_shell:EnvironmentColors.ToolWindowTextBrushKey}}"/>
</Style>
<Style TargetType="TextBox">
    <Setter Property="Foreground" Value="{DynamicResource {x:Static vs_shell:EnvironmentColors.ToolWindowTextBrushKey}}"/>
    <Setter Property="Background" Value="{DynamicResource {x:Static vs_shell:EnvironmentColors.ToolWindowBackgroundBrushKey}}"/>
</Style>
</ResourceDictionary>

See EnvironmentColors Class for more details.

Note: To get the exactly the same theme, you need use the exact XAML that VS uses. Thanks @GrantTheAnt.

Aphra

Answer 2

I know this is an old question, but I decided to expand on the answers. Suddenly it will be useful to someone.

In addition to color assignment, you can also assign styles to standard components (Button, ComboBox, etc.). All styles are in the VsResourceKeys class.

For example:

<Button Style="{DynamicResource {x:Static vsshell:VsResourceKeys.ButtonStyleKey}}" />

Also here you can see all the colors in one picture for different color schemes (dark, light, blue).

Chiseler

Answer 3

As another follow up to this, when writing my Visual Studio extension, I really wanted to have my tool window appear as much like a Visual Studio window as possible. At times, I found it incredibly difficult to find the correct EnvironmentColors value. At a minimum, the correct color value should work across the default/provided Visual Studio themes. So, frustrated, I wrote a little application to help me figure out the right value, which I’ve made available at http://niahtextfilter.com/environmentcolorsfinder/. To use it, you specify the RGB color value that you want, and the application will display the most likely EnvironmentColors candidates. To get the most accurate candidates, you can provide the color you want to display per theme (dark, regular, blue) - this is easy to achieve if you take a screenshot of a sample Visual Studio UI element in each theme, and color drop the pixel you need.

It helped me match my tool window to Visual Studio reasonably well:

I hope it helps others too!

Oscular

This looks very helpful, but what shell version is this based on? It's giving me back EnvironmentColors that can't be found in Microsoft.VisualStudio.Shell.15.0. – Polynices

Do you care to make it open-source so someone can update it? – Polynices

Sure, I'll see if I can put it into a public bitbucket repo. – Oscular

I put it here: bitbucket.org/grantdavies/vsenvironmentcolorsfinder/src/master – Oscular

I put an updated version of your app on GitHub. Nice bonus: it allows picking a color directly from the screen, so one doesn't have to take screenshots anymore :) Please let me know if you feel this infringes your copyright or you'd like to see this merged into the original repo. – Polynices

Great work! The color dropper is a really nice QOL improvement. – Oscular

Answer 4

I feel as though the correct answer to this question is: you're not supposed to / Microsoft doesn't want you to do this. This post outlines the rationale behind this. The TLDR of the post seems to be that MS doesn't want third party windows looking like official VS windows, because it may cause confusion for users. I guess that's fair enough, but the flipside to that is that VS winds up looking pretty ugly with differently themed/styled windows.

If - like me - you still want to push on and style your windows like VS, the best option seems to be to go with @Leo's post above and use EnvironmentColors. You won't get the styles but you can get pretty close with the colors at least. This is a good blog which outlines some more depth on this.

I'll accept Leo's answer on the basis that it's the best solution available.

Oscular