Does VS2010 show data in UserControls during design time?

Question

I have a trivial user control:

<UserControl x:Class="Xxx.SimpleUserControl.SimpleTextUserControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         x:Name="root">
    <StackPanel Background="Blue">
        <TextBlock x:Name="TitleTextBlock" Text="{Binding ElementName=root, Path=Title}" Background="White" Width="200" Height="30" Margin="5" />
        <TextBlock Text="{Binding ElementName=root, Path=Time}" Background="White" Width="200" Height="30" Margin="9" />
    </StackPanel>
</UserControl>

and the code behind:

using System;
using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;

namespace Xxx.SimpleUserControl
{
    /// <summary>
    /// Interaction logic for UserControl1.xaml
    /// </summary>
    public partial class SimpleTextUserControl : UserControl
    {
    public SimpleTextUserControl()
    {
        InitializeComponent();
    }

    [Browsable(true)]
    [Category("SimpleControl")]
    public string Title
    {
        get { return (string)GetValue(TitleProperty); }
        set { SetValue(TitleProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Title.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty TitleProperty =
        DependencyProperty.Register("Title", typeof(string), typeof(SimpleTextUserControl), new FrameworkPropertyMetadata("hello"));

    [Browsable(true)]
    [Category("SimpleControl")]
    public DateTime Time
    {
        get { return (DateTime)GetValue(TimeProperty); }
        set { SetValue(TimeProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Time.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty TimeProperty =
        DependencyProperty.Register("Time", typeof(DateTime), typeof(SimpleTextUserControl), new UIPropertyMetadata(DateTime.Now));

    }
}

I naively expect the VS2010 designer for the UserControl to display my default metadata values for my two controls - "hello" in one textblock, and today's date and time in other, but they are empty.

If I compile, and drop the control in to a WPF application, it renders fine, but not whilst in the UserControl project xaml view/designer.

I've tried changing the datacontext around, binding in different ways, implementing OnPropertyChanged etc., but nothing makes the data render in the UserControl project's design view.

Does anyone know the answer to this one? I've searched around, and either it's so obvious I'm missing it, or it's 'just the way it is'.

Answer 1

I think you'll need to use a "DesignTime" DataContext. Add the following to your UserControl Xaml file

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:YourNamespace"
mc:Ignorable="d"

And then set the DesignTime DataContext with

d:DataContext="{d:DesignInstance local:SimpleTextUserControl,
                                 IsDesignTimeCreatable=True}"

And remove ElementName from the Bindings

<UserControl x:Class="YourNamespace.SimpleTextUserControl"
             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"
             xmlns:local="clr-namespace:YourNamespace"
             mc:Ignorable="d"
             x:Name="root"
             d:DataContext="{d:DesignInstance local:SimpleTextUserControl,
                                               IsDesignTimeCreatable=True}">
    <StackPanel Background="Blue">
        <TextBlock x:Name="TitleTextBlock" Text="{Binding Path=Title}" Background="White" Width="200" Height="30" Margin="5" />
        <TextBlock Text="{Binding Path=Time}" Background="White" Width="200" Height="30" Margin="9" />
    </StackPanel>
</UserControl>

If you're still having problems getting this to work I uploaded a small sample project which you can compare to: http://www.mediafire.com/?gan28oeel4qf7ik