Difference between DesignWidth and Width in UserControl in WPF

Question

When I create a new UserControl in WPF, studio creates some XAML:

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

    <Grid>

    </Grid>
</UserControl>

In UserContol I can also add Width property. What is difference between DesignWidth and Width?

Answer 1

d:DesignHeight and d.DesignWidth are for the Designer (the WYSIWYG), in Visual Studio or in Expression Blend. Height and Width are actually for runtime.

Answer 2

Properties d:DesignHeight and d:DesignWidth="300" are used because (Source):

• 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

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.

All that is used in the prefix d: is used to design mode, these include properties such as:

d:DesignWidth

d:DesignHeight

d:LayoutOverrides