Designtime vs. Runtime

Introduction

An application often looks great at runtime, but when you open it in a designer like VisualStudio or Expression Blend, the experience is quite different. The rason is that at designtime:

• UserControls are not embedded in a parent view
  • Width and Height are not set
• Constructor of the root-element is not called
  • Root Element is replaced by the designer
  • ViewModel is not created
• Controls behave different
  • No mouse and keyboard events
  • Design time extensions loaded

This can be kind of annoying, especially if you want to edit data templates or layout controls.

Designtime attributes

To improve the design experience, Microsoft provides special designtime attributes that can be added to any WPF element and serve as a hint for the design tool.
The designtime attributes are defined in a special namespace, that is usually mapped to the d: prefix. To tell the XAML parser not to interprete these attributes at runtime, the markup compatibility namespace is mapped to mc: and with the mc:Ignorable="d" instruction, the d: namespace is excluded.

 
<Window 
   xmlns:d ="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d" />
 
 

d:DesignHeight and d:DesignWidth

The d:DesignHeight and d:DesignWidth sets a fixed height and width for the element at designtime

 
<UserControl
    xmlns="http://schemas.microsoft.com/..."
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    d:DesignWidth="640" d:DesignHeight="480" >
<UserControl />
 
 

d:LayoutOverrides

If a property is set to a fixed value at runtime, but you want to override it at designtime, you can use the d:LayoutOverrides attribute. All properties that should be ignored at designtime can be listed, separated by a semicolon.

 
<Border Height="250" Width="160" d:LayoutOverrides="Width, Height" >
</Border>