Design-time-only background color in WPF?

Question

In WPF XAML there is the convenient DesignHeight and DesignWidth, for instance in code as

<UserControl ... d:DesignHeight="500" d:DesignWidth="500" ... />

which is great because I can build the layout with a representative, but not locked-in, control size.

However, I'm often building dark UIs, where labels and so forth need to be white, but my controls still need a transparent background color. This creates a design-time inconvenience because white seems to be the default background color for transparent controls in the designer, leading to unreadable white-on-white labels.

Is there a way or strategy for setting the design-time background color, with similar convenience as DesignHeight/DesignWidth?

I'm not sure, by googling I found two documentation [here](http://msdn.microsoft.com/en-us/library/ee839627(VS.100).aspx) and [here](http://msdn.microsoft.com/en-us/library/ff602277(v=vs.95).aspx). May be they will be helpfull — Oybek, Jan 31 '12 at 08:26
See also: http://stackoverflow.com/questions/5183801/black-background-for-xaml-editor — ColinE, Jan 31 '12 at 08:34
Possible duplicate of [XAML : How to change background color only in Design mode?](https://stackoverflow.com/questions/4843276/xaml-how-to-change-background-color-only-in-design-mode) — Glenn Slayden, Dec 07 '17 at 21:58

score 58 · Answer 1 · edited Feb 24 '23 at 11:27

58

There's an undocumented property d:DesignStyle of type Style that you can set on a user control. This style is only applied in the designer and is not used at runtime.

You use it like this:

<UserControl ... d:DesignStyle="{StaticResource MyDesignStyle}" />

Or like this:

<UserControl ...>
    <d:DesignerProperties.DesignStyle>
        <Style TargetType="UserControl">
            <Setter Property="Background" Value="White" />
            <Setter Property="Height" Value="500" />
            <Setter Property="Width" Value="500" />
        </Style>
    </d:DesignerProperties.DesignStyle>
</UserControl>

The Background property is what you asked for. The Height and Width do replace your d:DesignHeight=500 and d:DesignWidth=500 in the <UserControl> tag. Then you have all your design properties at one place.

Note however, that any value set on the Style property (the one used at runtime) will also override the DesignStyle in the designer.

edited Feb 24 '23 at 11:27

Stefan

919
2
13
24

answered Nov 29 '16 at 13:18

Sebastien Pellizzari

1,015
7
10

1

This is really nice and way easier than the other answers. – gartenriese Jun 01 '17 at 12:33
What is a design style and how to initialize it? To make this easy how do you set `d:DesignStyle` to White? – The Muffin Man Sep 26 '17 at 15:18
3

@TheMuffinMan In the second example code section above add `` into the `Style` node to set the Background color to white. – FlyingFoX Sep 26 '18 at 11:48
5

Trying the second method in .NET Core WPF. I get wiggly line below `Style` saying "Object reference not set to an instance of object", and the background does not change. – Damn Vegetables Jul 26 '20 at 21:29

score 9 · Answer 2 · edited Jul 22 '16 at 15:22

9

I found that you can do one for yourself. Custom design-time attributes in Silverlight and WPF designer is a tutorial how to do it for both Silverlight and WPF.

edited Jul 22 '16 at 15:22

ΩmegaMan

29,542
12
100
122

answered Jan 31 '12 at 08:32

Oybek

7,016
5
29
49

1

This one is a bit nicer to me then the accepted answer, thanks. – Sevenate Nov 25 '13 at 09:54
1

This should be the accepted answer since it is much more modular and can be directly used in the designer without writing code for multiple controls. – Julian Sievers Dec 21 '14 at 13:41

score 8 · Accepted Answer · edited May 23 '17 at 12:00

8

My answer was found here: Black Background for XAML Editor. There are a number of choices including checking System.ComponentModel.DesignerProperties.GetIsInDesignMode(this) at runtime.

edited May 23 '17 at 12:00

Community

1
1

answered Jun 15 '12 at 01:25

DuckMaestro

15,232
11
67
85

score 3 · Answer 4 · answered Feb 01 '18 at 07:32

This is the complete solution for DesignBackground:

public class DesignTimeProperties : DependencyObject
    {
        private static readonly Type OwnerType = typeof(DesignTimeProperties);

        #region DesignBackground (attached property)

        public static Brush GetDesignBackground(DependencyObject obj)
        {
            return (Brush)obj.GetValue(DesignBackgroundProperty);
        }

        public static void SetDesignBackground(DependencyObject obj, Brush value)
        {
            obj.SetValue(DesignBackgroundProperty, value);
        }

        public static readonly DependencyProperty DesignBackgroundProperty =
            DependencyProperty.RegisterAttached(
                "DesignBackground",
                typeof (Brush),
                OwnerType,
                new FrameworkPropertyMetadata(Brushes.Transparent,
                    DesignBackgroundChangedCallback));

        public static void DesignBackgroundChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (IsInDesignMode)
            {
                var control = d as Control;
                var brush = e.NewValue as Brush;
                if (control != null && brush != null)
                {
                    control.Background = brush;
                }
            }
        }

        public static bool IsInDesignMode
        {
            get
            {
                return
                    ((bool)
                        DesignerProperties.IsInDesignModeProperty.GetMetadata(typeof (DependencyObject)).DefaultValue);
            }
        }

        #endregion

    }

Usage:

<UserControl ... infra:DesignTimeProperties.DesignBackground="Black" />

score 1 · Answer 5 · answered Dec 07 '17 at 21:55

The d:DesignerProperties.DesignStyle technique shown on this page works great for applying a WPF design-time-only style to a single control, but it doesn't appear to work for a Style in a ResourceDictionary that would apply to all of the appropriately-typed controls or elements under the scope of the dictionary. Below is simple solution I found for deploying a designer-only style into a ResourceDictionary.

Consider for example a Window containing a TreeView, where we want the TreeViewItem nodes to show as fully expanded—but only at design time. First, put the desired style in the XAML dictionary in the normal way.

<Window.Resources>
    <Style TargetType="TreeViewItem">
        <Setter Property="IsExpanded" Value="True" />
    </Style>
</Window.Resources>

Here, the Style is put in the ResourceDictionary of the Window but of course you could use any other subsuming dictionary instead. Next, in the C# code, remove the style from the ResourceDictionary when design mode is not detected. Do this is in the OnInitialized override:

protected override void OnInitialized(EventArgs e)
{
    if (DesignerProperties.GetIsInDesignMode(this) == false)
        Resources.Remove(typeof(TreeViewItem));

    base.OnInitialized(e);
}

Design Mode: Runtime Mode:

Design-time-only background color in WPF?

5 Answers5

Linked