Black Background for XAML Editor

Question

I am currently working on a user control that has white text and a transparent background. Unfortunately because the XAML design view within VS2010 has a white background I cannot see anything that I am designing!

I have been through all the settings dialogs I can think of, but have been unable to find a setting that changes the background colour of the XAML designer.

Does anyone know how this can be done?

Yeah - I do use the XML view almost all the time, although I find it hard to visualise things like font size in XML view! — ColinE, Mar 03 '11 at 21:14
True, the designer does have its uses. I was just being obnoxious. — stone, Mar 03 '11 at 21:38
There should be a fix available for vs2013. source: https://connect.microsoft.com/VisualStudio/feedback/details/758745/wpf-designer-unusable-in-dark-theme — Johannes, Jun 06 '16 at 08:39

score 28 · Answer 1 · answered Jan 13 '14 at 22:43

28

Alternatively, as of VS 2013, you can do this in Tools -> Options -> Fonts and Colors, XAML UI Designer.

The editable foreground / background colors there are the colors of the checkerboard background. I just set them both to a darkish grey color that seems to work for both light and dark theme'd background stuff.

answered Jan 13 '14 at 22:43

John Gardner

24,225
5
58
76

1

So simple, yet so good as it involves no code changes at all - this is what I use – Johan Danforth Jun 23 '14 at 09:44
I did that and its the simplest fix so far but I can't see text now ? – Aindriú Dec 31 '15 at 11:55
you'll have to find some set of colors that works specifically for what you are doing. the default behavior really only works with either white on black or black on white controls, it doesn't really work very well for anything transparent – John Gardner Jul 11 '16 at 18:05

Metro Smurf · Accepted Answer · 2011-03-03T23:19:35.153

In your XAML, set your background to black. Then in your user control, use the DesignerProperties to set the background at runtime:

XAML

<UserControl .... Background="Black" .... >

Code Behind

public YourUserControl()
{
  InitializeComponent();

  if( !System.ComponentModel.DesignerProperties.GetIsInDesignMode( this ) )
  {
    this.Background = Brushes.Transparent;
  }

}

Alternate Method

UserControl:

In your user control, do not declare a background color:

<UserControl ... namespaces ...>

UserControl Code Behind:

In your user control's constructor, use the DesignTime method as above, but check to see if it is Design Mode (opposite check from other method):

public YourUserControl()
{
  InitializeComponent();

  if( System.ComponentModel.DesignerProperties.GetIsInDesignMode( this ) )
  {
    this.Background = Brushes.Black;
  }

}

App.xaml:

Finally, in your App.xaml, add a style to set a background color for UserControls:

<Application.Resources>
  <Style TargetType="{x:Type UserControl}">
    <Setter Property="Background" Value="Black" />
  </Style>
</Application.Resources>

Here's what's happening:

The App.xaml will effect the UserControl at design time because a typed style is applied on an object automatically, but it is not applied to a derived object (UserControl in this case). So, at design time, VS thinks it should apply the style, but at runtime, it will be ignored.
The GetIsInDesignMode check will effect the UserControl when viewing the control in a Window that is using the UserControl because VS is compiling the UserControl at design time in order to render it in the Visual Designer.

HTH's

Still hacky, but at least your alternate method is low effort, +1 and 'tick' - thanks! — ColinE, Mar 04 '11 at 06:14
One small improvement may be to set clear the Background property instead of setting it to Transparent unless you literally want Transparent instead of Null by calling ClearValue(BackgroundProperty) in your constructor. Note that the two values differ in terms of mouse handling and it seems that by default Background is null for a UserControl. — jpierson, May 28 '13 at 03:53

score 5 · Answer 3 · edited May 23 '17 at 11:46

As shown in this post, you can condense the code to a single style by using a trigger, since DesignerProperties.IsInDesignMode is an attached property.

Actually, the code there isn't quite right. It defines an implicit style for TargetType="{x:Type UserControl}", which would be ignored at runtime anyway because your UserControl is actually a derived class -- as Metro Smurf points out in his first point:

The App.xaml will effect the UserControl at design time because a typed style is applied on an object automatically, but it is not applied to a derived object (UserControl in this case). So, at design time, VS thinks it should apply the style, but at runtime, it will be ignored.

The right way to do it would be to give it a key and apply it manually to your UserControls:

<Application
    ...
    xmlns:componentModel="clr-namespace:System.ComponentModel;assembly=PresentationFramework">
    ...
    <Application.Resources>
        ...
        <Style x:Key="DesignerBlackBackgroundStyle" TargetType="Control">
            <Style.Triggers>
                <Trigger Property="componentModel:DesignerProperties.IsInDesignMode"
                         Value="True">
                    <Setter Property="Background" Value="Black" />
                </Trigger>
            </Style.Triggers>
        </Style>

and:

<UserControl x:Class="MyUserControl"
             Style="{StaticResource ResourceKey=DesignerBlackBackgroundStyle}">

As a trigger, this has an extra benefit over setting the background in code-behind -- it will behave properly if the background is explicitly set somewhere else, such as from a containing UserControl:

<UserControl x:Class="ContainerUserControl" ...>
    ...
    <local:MyUserControl Background="Gray" />

Local values have precedence over style triggers, so on this screen the designer would use a gray background, whereas it would be black when designing MyUserControl stand-alone.

score 1 · Answer 4 · answered Mar 03 '11 at 17:35

1

Are you able to use Blend for designing? Blend has an option to switch between light and dark color schemes.

answered Mar 03 '11 at 17:35

grimus

3,175
2
18
26

I don't really want to bother with Blend on such a simple application. It is good to know you can fix this problem if you experience it in blend though, – ColinE Mar 03 '11 at 21:10
1

It is kind of ridiculous to switch the whole UI color just to get a white background though. What you want to do is not to change the scheme but the ArtBoard color in Options. – tofutim May 29 '13 at 17:57

stone · Answer 5 · 2011-03-03T21:37:29.193

0

Set the background color of the usercontrol to black in the XAML, then set it to transparent in code.

Edit: If you're not comfortable leaving the code this way, then you can revert this change before you release, once you are done with all the designer work, though there is no harm in leaving it in.

edited Mar 03 '11 at 21:37

answered Mar 03 '11 at 18:54

stone

8,422
5
54
66

Sorry - not a good answer, this means that every time I make a changed I have to set the background color! – ColinE Mar 03 '11 at 21:08
2

Looks like I didn't explain it clearly enough. My answer is the same as MetroSmurf's answer, which you said was good. Since it is hacky, you could consider reverting the change right before you release the software, though it won't do any harm to leave it in. – stone Mar 03 '11 at 21:31
Yep, you can even put a #if RELEASE / #if !DEBUG block around it if you don't want to have to remember to take the code out before creating a release build. – jpierson May 28 '13 at 04:06

score 0 · Answer 6 · answered Sep 01 '22 at 11:37

Set the XAML Designer background color to Gray.

Tools > Options> Fonts and Colors:

Show settings for: XAML Designer,
Display items: Artboard Background,
Item foreground/background: Gray. Now you can see text in XAML Designer

It's a shame there is this inconvenience.

Black Background for XAML Editor

6 Answers6

Alternate Method

Linked