XAML : How to change background color only in Design mode?

Question

I have a control with white text foreground color and transparent background color. Later on this usercontrol will be added into a different control that carries the real background color.

However during designing this, control due white foreground on white background in VS 2010, I can't obviously see anything. In there anyway to define a different color for just the design time?

I have tried this:

if (System.ComponentModel.DesignerProperties.IsInDesignTool)
{
    LayoutRoot.Background = new SolidColorBrush(Colors.Blue);
}

But this doesn't work. Any tips?

UPDATE:

I dont understand how this works for you guys. I have created a new Silverlight 4.0 Application and have inserted this line of code into the ctor:

public MainPage()
        {
            InitializeComponent();
            LayoutRoot.Background = new SolidColorBrush(Colors.Blue);

        }

<UserControl x:Class="SilverlightApplication3.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot">

    </Grid>
</UserControl>

When I go into Designer, I still dont see it as blue. And I dont even have any isInDesignTime Condition there. What I am missing here?

Thanks, Kave

Answer 1

Here's one way:

if (System.ComponentModel.DesignerProperties.IsInDesignTool)
{
    LayoutRoot.Background = new SolidColorBrush(Colors.Yellow);
}

If you switch to creating a templated control, you'll need to wait to set things up in OnApplyTemplate, like in this example:

public override void OnApplyTemplate()
{
    base.OnApplyTemplate();
    Border b = this.GetTemplateChild("backBorder") as Border;
    if (b != null && System.ComponentModel.DesignerProperties.IsInDesignTool)
    {
        b.Background = new SolidColorBrush(Colors.Orange);
    }
}

Assuming this is the template:

<Style TargetType="local:TemplatedControl1">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:TemplatedControl1">
                <Border x:Name="backBorder"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I also like to add conditional compile directives around code like this, as it's only for the developer/designer and is never needed at run-time.

#if DEBUG
if (System.ComponentModel.DesignerProperties.IsInDesignTool)
{
    LayoutRoot.Background = new SolidColorBrush(Colors.Yellow);
}
#endif

Note that this entire technique works only when the UserControl you're creating is used within* another* UserControl/Control at design time. So, if the code I suggested above is placed in a UserControl named UserControlWithDesignMode, then you must have another UserControl, UserControlHost, that contains an instance of the UserControlWithDesignMode control to see the behavior work at design time. The code-behind for the currently edited control does not execute when you're editing it. It only executes when it's contained within another host (in Silverlight, another UserControl for example).

Answer 2

One option would be to give the UserControl a background color, and then override that where you use it. So when you're editing the UserControl in isolation, it would have a background color; but when you're editing a control that contains that UserControl, you would see it with the transparent background like you want.

So the UserControl's XAML file would look like this:

<UserControl x:Class="MyUserControl" ... Background="DarkBlue">

And then in some other screen, where you use it, you could do:

<my:MyUserControl Background="Transparent" ...>

Inelegant, but simple.

Answer 3

Alternate approach that doesn't involve code:

1. Install the "Visual Studio 2012 Color Theme Editor" found here: http://visualstudiogallery.msdn.microsoft.com/366ad100-0003-4c9a-81a8-337d4e7ace05
   • Or for 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.
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.
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