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.

Answer 1

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

Answer 2

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.