Xaml design-time DataContext

System.Windows.Data Error: 40 : BindingExpression path error: 'Emial' property not found on 'object' ''Customer' (HashCode=49475561)'. BindingExpression:Path=Emial; DataItem='Customer' (HashCode=49475561); target element is 'Label' (Name=''); target property is 'Content' (type 'Object')

This is one of the most frustrating binding errors that happen while writing bindings in xaml. Sometimes, if not careful enough, it might easily get lost in the Visual Studio output window. To reduce the number of such errors and to design the UI more easily, one may benefit of the support of auto-completion while writing xaml bindings in Visual Studio.

To add a design time DataContext:

<Window x:Class="Sample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:Sample.ViewModels"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        Title="MainWindow" Height="350" Width="525"
        mc:Ignorable="d"
        d:DataContext="{d:DesignInstance Type=vm:Customer, IsDesignTimeCreatable=True}">
    <Grid>
        <StackPanel>
            <Label Content="{Binding Emial}" />
        </StackPanel>
    </Grid>
</Window>

Lines 6 and 9 are the ones that do the trick. The Visual Studio designer will use this DataContext object at design time.
Lines 5 and 8 are also needed to instruct the real xaml compiler to ignore this DataContext attribute.

Although I didn’t find any official documentation over the DesignInstance, this extension supports three parameters:

Type – this is the type of the object you want to use as a DataContext at design time (in my case here, I have a simple Customer view-model that has some Name, Address and Email properties).

IsDesignTimeCreatable – if this is true the designer will simply instantiate the type and use it; if it is  false the designer will generate a type with the same properties as the one specified and instantiate that type.

To be “design time creatable” the type must have a constructor with no parameters. If it has, the designer can instantiate it and use it. If the type does not have a default constructor, the designer doesn’t know what parameters to pass to the other constructors so here is where IsDesignTimeCreatable = false helps.

The drawback of using IsDesignTimeCreatable = false is that any properties set in the original type are not visible in the dummy type created and instantiated.

There are some workarounds for using IsDesignTimeCreatable = true like adding a parameterless constructor (perhaps in a derived class and using that class instead), but it all depends on the exact scenario.

CreateList – if true the designer will create a collection of your type and that can be used for bindings to the ItemsSource properties, for example or in another place where a collection is expected.

Now Intellisense shows auto-completion for DataContext members:

xaml-datacontext-designtime