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 cann

Answer 1

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 2

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.

Answer 3

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 4

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

Answer 5

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.