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.

Answer 1

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)

Answer 2

Alternate approach that doesn't involve code:

1. Install the "Visual Studio Color Theme Editor" Extension

   • VS 2013 "RC": http://visualstudiogallery.msdn.microsoft.com/9e08e5d3-6eb4-4e73-a045-6ea2a5cbdabe
   • VS 2012 : http://visualstudiogallery.msdn.microsoft.com/366ad100-0003-4c9a-81a8-337d4e7ace05
   • VS 2010 : http://visualstudiogallery.msdn.microsoft.com/20cd93a2-c435-4d00-a797-499f16402378

     ---

2. Create a new custom theme based on the one you want to modify. (2013-specific help image below)

   

3. Click the "Show All Elements" filter button in the upper-left of the theme editor

   

4. Type "artboard" in the search-box in the upper-right of the theme editor

   

5. 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.
6. 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.

Answer 3

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/

Answer 4

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.