Design-time Attributes

  • Article

When you build WPF or Silverlight applications by using the WPF Designer for Visual Studio, you sometimes need to provide information to make Design view behave correctly. You specify this kind of information by using design-time attributes. For example, design-time attributes enable sizing the root window with specific values to accommodate layout design, while retaining content-driven sizing at run time. Design-time attributes are ignored during compilation and have no effect at run time.

Design-time Attributes

The WPF Designer provides the following design-time attributes.

Design-time Attribute

Description

Example Usage

d:DesignHeight

Specifies the height of the root element at design time, independently of the height at run time. Automatically added when you click the root size tag (root size tag).

 
<Window x:Class="DesignDataDemo.MainWindow"
        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:DesignDataDemo"
        Title="MainWindow" mc:Ignorable="d" xmlns:d="https://schemas.microsoft.com/expression/blend/2008" xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="350" d:DesignWidth="525" SizeToContent="WidthAndHeight">

d:DesignWidth

Specifies the width of the root element at design time, independently of the width at run time. Automatically added when you click the root size tag (root size tag).

 
<Window x:Class="DesignDataDemo.MainWindow"
        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:DesignDataDemo"
        Title="MainWindow" mc:Ignorable="d" xmlns:d="https://schemas.microsoft.com/expression/blend/2008" xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="350" d:DesignWidth="525" SizeToContent="WidthAndHeight">

d:DataContext

Specifies a design-time data context for a control and its children. A common pattern is to declare control bindings in XAML view, and to set the DataContext that is used to populate the bindings at run time. If you are using this pattern, you can set d:DataContext so that the designer is aware of the shape of your types. This enables you to use the data binding builder to create bindings in Design view. For more information, see Walkthrough: Creating a Data Binding by Using the WPF Designer.

 
<Grid d:DataContext="{d:DesignInstance Type=local:Customer}" Name="_grid">

d:DesignInstance

Used as part of a d:DataContext or d:DesignSource declaration. Specifies the type that you can use as a data source for binding to controls in the designer. The type does not need to be creatable in XAML. For more information, see Walkthrough: Using a DesignInstance to Bind to Data in the Designer.

 
<Grid d:DataContext="{d:DesignInstance Type=local:Customer}" Name="_grid">

d:DesignData

Used as part of a d:DataContext or d:DesignSource declaration. Specifies a XAML file that contains sample data for use at design time. Use the DesignData or DesignDataWithDesignTimeCreatableTypes build actions to integrate your sample data with your project. Read-only properties can be assigned values. For more information, see Walkthrough: Using Sample Data in the WPF Designer.

 
<StackPanel d:DataContext="{d:DesignData Source=./DesignData/SampleCustomer.xaml}" Grid.Row="0"></StackPanel>

d:DesignSource

Specifies a design-time data source for a CollectionViewSource. This makes the designer aware of the shape of your types. This enables you to use the data binding builder to create bindings.

 
<CollectionViewSource x:Key="CustomerViewSource" d:DesignSource="{d:DesignInstance local:Customer, CreateList=True}" />

d:IsDesignTimeCreatable

In the d:DesignInstance markup extension, specifies that the design instance is created from your type, instead of a designer-generated substitute type.

 
<Grid d:DataContext="{d:DesignInstance local:Customer, IsDesignTimeCreatable=True}">

d:CreateList

In the d:DesignInstance markup extension, specifies that the design instance is a list of the specified type.

 
<CollectionViewSource x:Key="CustomerViewSource" d:DesignSource="{d:DesignInstance local:Customer, CreateList=True}" />

d:Type

In the d:DesignInstance markup extension, specifies the type to create. Use d:IsDesignTimeCreatable to specify whether an instance or your type or a designer-generated substitute type is created.

 
<CollectionViewSource x:Key="CustomerViewSource" d:DesignSource="{d:DesignInstance Type=local:Customer, CreateList=True}" />

Accessing Design-time Attributes

You access the design-time attributes through the https://schemas.microsoft.com/expression/blend/2008 namespace. The namespace is automatically mapped when you click the root size tag (root size tag) at the lower-right of MainWindow in Design view.

Build Actions

To enable d:DesignData, you set build actions on the XAML files that contain your sample data. The following table describes the build actions. For more information, see Walkthrough: Using Sample Data in the WPF Designer.

Build Action

Description

DesignData

Use this build action when the sample data types are not creatable or have read-only properties that you want to define sample data values for. The WPF and Silverlight Designer creates substitute types that have the same properties as your business object types. Your types do not need to be creatable. This eliminates complexity around factory methods, abstract types, and database connections. Read-only properties can be assigned values.

DesignDataWithDesignTimeCreatableTypes

Use this build action when the sample data types are creatable by using their default empty constructors. The WPF and Silverlight Designer creates instances of your types that are defined in the sample data file. Your types must be creatable in XAML.

See Also

Tasks

Walkthrough: Creating a Data Binding by Using the WPF Designer

Walkthrough: Using a DesignInstance to Bind to Data in the Designer

Walkthrough: Using Sample Data in the WPF Designer