How to change background color of XAML designer in vs2012?

Question

I just try to view the result after XAML code in Designer. However, it's hard to recognize the black letters when I use a dark theme in vs2012.

My question is how to change designer background to white color without modifying the dark theme. Seems to change several options in tools?

Thanks

Please skim over all the answers. All have different approaches and it may be that the later ones will suit your needs better.

score 102 · Accepted Answer · edited Nov 28 '18 at 13:23

102

In VS 2013 you can change XAML designer background. Go to:

Tools -> Options -> Environment -> Fonts and Colors

In the combobox at the top of the panel, select:

Show settings for: XAML UI Designer

Then set:

Item foreground : white
Item background : white or very light grey (custom)

edited Nov 28 '18 at 13:23

Stealth Rabbi

10,156
22
100
176

answered Apr 04 '14 at 15:43

VisualStudioEspresso

1,099
1
8
3

1

When I did this I got a checkered background. Anything other than Defaults or Automatic for background or foreground caused checked background. – faldeland Apr 10 '14 at 13:27
7

You should get checkered background if foreground is different from background, and this is to differentiate design canvas from user control. You may choose white for both if you prefer. Do you use default VS dark theme? – VisualStudioEspresso Apr 11 '14 at 17:54
3

In my opinion this should be marked as correct answer. :) THX – Stefan Vasiljevic Feb 25 '15 at 15:58
3

Correct, use White for Item foreground and Custom RGB(245,245,245) for Item background to exactly replicate the color scheme of the regular light theme. – Fernando Espinosa Apr 23 '15 at 20:21
Still valid for VS 2019 :) – dgellow Apr 15 '21 at 07:45

score 41 · Answer 2 · answered Jan 16 '17 at 00:18

41

As of Visual Studio 2017 the XAML designer has a "Toggle artboard background" button, which has the effect of changing the transparent from a black checkerboard to a white checkerboard.

The benefit of this is there is no need to modify your XAML files.

answered Jan 16 '17 at 00:18

Jack Ukleja

13,061
11
72
113

1

WOW, that's really a good news!!! Cannot image this question was viewed 12672 times in the past 4 years. – Ted Corleone Jan 16 '17 at 06:04
3

I'm using Visual Studio 2017 but can't find this button for some reason. It's the only one missing. – Baptiste Candellier Jan 04 '18 at 13:53
Was this feature only added in more recent VS versions? It works so perfectly that I'm shocked it took years for someone to suggest it. – ShadowLiberal Oct 30 '18 at 19:02
Why isn't this higher? I tried all of the above before (almost accidentally) reading this. And this is exactly what I needed! – jumbo Apr 16 '19 at 09:49
I dont have this button in VS 2019. Only the buttons left and right to it. – Welcor Dec 02 '19 at 09:33

score 34 · Answer 3 · edited Mar 10 '23 at 15:50

Alternate approach that doesn't involve code:

Install the "Visual Studio Color Theme Editor" Extension

Create a new custom theme based on the one you want to modify. (2013-specific help image below)
Click the "Show All Elements" filter button in the upper-left of the theme editor
Type "artboard" in the search-box in the upper-right of the theme editor
Set the "Cider -> ArtboardBackground" color to a different color of your choice.

VS2013 also introduces a second value "Cider -> ArtboardSecondaryBackground" to create a helpful checker-boarding effect.

Yay! :D

Note: The "Cider -> ArtboardBackground" color theme field is found in VS2012 but I cannot confirm whether it has the same name in VS2010.

Edits: Added link to VS2013 (thank you @treaschf for the note!) official extension, although I think its an "RC" version. Also, added handy pictures.

Please don't post exactly the same answer to several questions. If the same answer applies to more than one question it's a good sign the questions are duplicate. You should be flagging (or closing if you have enough reputation), not answering. — ChrisF, Mar 13 '13 at 22:45
Apparently this extension includes "Light With Dark Editor" theme. Just what I was looking for. Also fixes the dark designer background problem. — michaelr524, Oct 06 '13 at 07:46
Note that `Cider` is the WPF XAML Designer and that the `XAML UI Designer` is the xaml designer for all other xaml platforms. You might have to update both if you use both technologies. — Owen Johnson, Jul 22 '15 at 16:01

score 29 · Answer 4 · edited Sep 06 '16 at 11:44

29

I've had the same problem and came across a very useful blog post which details how to use a trigger for a style in the App.xaml

<Style TargetType="{x:Type UserControl}">
    <Style.Triggers>
        <Trigger Property="ComponentModel:DesignerProperties.IsInDesignMode"
                 Value="true">
            <Setter Property="Background"
                    Value="White" />
        </Trigger>
    </Style.Triggers>
</Style>

http://caraulean.com/2012/visual-studio-2012-dark-theme-tip/

edited Sep 06 '16 at 11:44

Abbas

3,872
6
36
63

answered Jan 11 '13 at 17:52

Antony Scott

21,690
12
62
94

It's pretty good to use a trigger in App.xaml and seems no other methods here. Hope that it could be fixed in next version by Microsoft. Dark theme is really cool actually. Thanks for your share. – Ted Corleone Jan 12 '13 at 04:32
7

XMLNS xmlns:ComponentModel="clr-namespace:System.ComponentModel;assembly=PresentationFramework" – Evalds Urtans Apr 29 '14 at 08:22
For this style to work, it needs to be wrapped in a tag ``, and placed just below the `` tag. – Contango Mar 17 '16 at 14:33
As an aside, this tag is only relevant to a `UserControl`, as a `ResourceDictionary` does not support XAML preview. – Contango Mar 17 '16 at 14:36

How to change background color of XAML designer in vs2012?

4 Answers4

Linked