Create properties that only apply on design time

Question

I am using visual studio dark theme. As a result when designing my views I cannot see the font if its black. A fix will be to set the background of the view to white. But our application has different themes so I cannot hard code that.

There are to great properties that I use when creating an usercontrol:

d:DesignWidth="1110" d:DesignHeight="400"

those properties are only affecting the view at design time. It will be great if I can create a property d:DesignBackground just so that I do not have to be adding and removing the background property every time I run the application.

Yes the background but on the mainwindow. I am working on the user control and it has no background. — Tono Nam, Sep 30 '15 at 18:06
One option is to change the Cider – ArtboardBackground, Have a look here: http://www.wrightfully.com/changing-visual-studio-2012-xaml-designer-background/. I had to check the “Show All Elements button on the editor. — sous2817, Sep 30 '15 at 20:51

Chris W. · Accepted Answer · 2019-02-01T19:16:36.513

22

Not sure if it's exactly what you're looking for, but what I do is just plop a trigger in the app.xaml to invoke using the IsInDesignMode property like;

Namespace (Thanks Tono Nam);

xmlns:componentModel="clr-namespace:System.ComponentModel;assembly=PresentationFramework"

XAML;

<Style TargetType="{x:Type UserControl}">
    <Style.Triggers>
        <Trigger Property="ComponentModel:DesignerProperties.IsInDesignMode"
                 Value="True">
            <Setter Property="Background"
                    Value="#FFFFFF" />
        </Trigger>
    </Style.Triggers>
</Style>

Simple, but works, and sometimes I target other dependency properties like font and stuff too depending on the need. Hope this helps.

PS - You can target other TargetType's with their own properties the same way, like for example, ChildWindows, Popups, Windows, whatever...

edited Feb 01 '19 at 19:16

answered Sep 30 '15 at 20:18

Chris W.

22,835
3
60
94

1

This could be used to style anything in design mode! Loved your answer thanks! – Tono Nam Oct 01 '15 at 16:20
7

If someone does not have resharper and need to know the namespace of ComponentModel here it is: `xmlns:componentModel="clr-namespace:System.ComponentModel;assembly=PresentationFramework"` – Tono Nam Oct 01 '15 at 16:21
2

For people experiencing weird _this namespace is not a valid xaml_ error - first, delete both namespace declaration and style, then paste namespace declaration as is above, delete _;as‌sembly=PresentationF‌ramework_ part from it, then add style and add _;as‌sembly=PresentationF‌ramework_ part back to namespace. Kind a _magic-like_ solution, but seems to solve this bug. – a'' Mar 03 '17 at 09:04
@erem Well that's a weird one. Glad you could share a workaround! – Chris W. Mar 03 '17 at 15:56

hcp · Answer 2 · 2015-09-30T20:45:03.707

You can create a static class with an attached property for design mode:

using System;
using System.ComponentModel;
using System.Diagnostics;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace Helpers.Wpf
{
    public static class DesignModeHelper
    {
        private static bool? inDesignMode;

        public static readonly DependencyProperty BackgroundProperty = DependencyProperty
            .RegisterAttached("Background", typeof (Brush), typeof (DesignModeHelper), new PropertyMetadata(BackgroundChanged));

        private static bool InDesignMode
        {
            get
            {
                if (inDesignMode == null)
                {
                    var prop = DesignerProperties.IsInDesignModeProperty;

                    inDesignMode = (bool) DependencyPropertyDescriptor
                        .FromProperty(prop, typeof (FrameworkElement))
                        .Metadata.DefaultValue;

                    if (!inDesignMode.GetValueOrDefault(false) && Process.GetCurrentProcess().ProcessName.StartsWith("devenv", StringComparison.Ordinal))
                        inDesignMode = true;
                }

                return inDesignMode.GetValueOrDefault(false);
            }
        }

        public static Brush GetBackground(DependencyObject dependencyObject)
        {
            return (Brush) dependencyObject.GetValue(BackgroundProperty);
        }

        public static void SetBackground(DependencyObject dependencyObject, Brush value)
        {
            dependencyObject.SetValue(BackgroundProperty, value);
        }

        private static void BackgroundChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (!InDesignMode)
                return;

            d.SetValue(Control.BackgroundProperty, e.NewValue);
        }
    }
}

And you can use it like this:

xmlns:wpf="clr-namespace:Helpers.Wpf;assembly=Helpers.Wpf"

<Grid Background="Black"
      wpf:DesignModeHelper.Background="White">
    <Button Content="Press me!"/>
</Grid>

You can use this approach to implement other property for design mode.

Sevenate · Answer 3 · 2022-07-12T13:49:28.213

In 2022 you actually can and almost guessed it:


d:Background="White"

Note you can set pretty much any other control properties differently for design-time when prefix them with d:, for example:


<TextBlock Text="{Binding TextFromViewModel}"
           Foreground="{StaticResource PrimaryBrush}"
           d:Text="Design-time text"
           d:Foreground="Black" />

Source: Use Design Time Data with the XAML Designer in Visual Studio

Create properties that only apply on design time

3 Answers3

Linked