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?

Answer 1

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.

Answer 2

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:

1. 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.
2. 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

Answer 3

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.

Answer 4

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