WPF Tips：Using d:DataContext design time expression

这是一个很实用的小技巧，和IDE相关，它对运行时无任何影响，仅影响设计时（Design time）。在Visual Studio 2010及更高版本中适用。

问题

先看下面这个小例子。我们写一个很简单的user control，如下：

<UserControl x:Class="UIElements.GenericView"             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">        <Border BorderBrush="DarkGray" BorderThickness="1">                <Grid>                        <Grid.RowDefinitions>                <RowDefinition Height="28"/>                <RowDefinition Height="*"/>                <RowDefinition Height="40"/>            </Grid.RowDefinitions>            <!-- Header -->            <TextBlock Grid.Row="0" Height="20" Margin="4,4,4,4"                       Style="{DynamicResource HeadertextBlockStyle}"                        Text="{Binding Header}" />        </Grid>            </Border></UserControl>

上面这段XAML用到了数据绑定。我们已经为它设计好了View model，如下：

namespace UIElements{    public class GenericViewModel : ViewModelBase    {        private string header = string.Empty;        public string Header        {            get            {                return this.header;            }            set            {                if (!string.Equals(this.header, value))                {                    this.header = value;                    this.RaisePropertyChangedEvent("Header");                }            }        }    }}

其中这个ViewModelBase在这篇文章里有介绍：《WPF Tips：ViewModelBase》http://blog.csdn.net/yapingxin/article/details/23947779

对于了解WPF、XAML的朋友来说这个例子已经足够简单到不需要任何解释了吧。
然而，在Visual Studio中当我们想查看这一段XAML的效果时，怎么办呢？

直接打开XAML文件然后切换到Design视图将看不到任何有用的东西。截图如下：

从Desgn视图中我们看不到任何效果，对吧。

虽说我们可以实际地调用它然后看一下运行效果，但这看上去很不make sense。有什么更有效的办法呢？

解决方案

所以，为了在设计时（Design time），也就是切换到Design视图的时候能看到设计的效果，我们这样做：

1. 引入Design time相关的namespace

在 User control 的root节点中加入以下namespace：

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

2. d:DesignHeight、d:DesignWidth的使用

在 User control 的root节点中加入：

d:DesignHeight="480" d:DesignWidth="640"

这样，在Design视图中我们看到的就不再是一个拧成一团的效果，而是展开到宽640高480的效果了。这两个属性仅在设计视图中有效，运行时（Run time）不受影响。

3. d:DataContext、d:DesignData的使用

重头戏来了。

XAML中绑定了一个属性Title，但是在设计视图中由于这个值还没有被绑定一个有效值，所以看不到任何关于它的字体、间距等效果。

现在我们创建一个独立的XAML文件来作为测试数据：

测试数据文件名：GenericExpanderViewDesignTimeData.xaml

<GenericViewModel xmlns="clr-namespace:UIElements"                  Header="Sample header | Equipment Catalog Management"></GenericViewModel>

在XAML文件要进行数据绑定的根节点中，加入以下属性：

d:DataContext="{d:DesignData Source=GenericExpanderViewDesignTimeData.xaml}"

现在，整个XAML文件就变成了：

<UserControl x:Class="UIElements.GenericView"             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="480" d:DesignWidth="640">        <Border BorderBrush="DarkGray" BorderThickness="1"            d:DataContext="{d:DesignData Source=GenericExpanderViewDesignTimeData.xaml}">                <Grid>                        <Grid.RowDefinitions>                <RowDefinition Height="28"/>                <RowDefinition Height="*"/>                <RowDefinition Height="40"/>            </Grid.RowDefinitions>            <!-- Header -->            <TextBlock Grid.Row="0" Height="20" Margin="4,4,4,4"                       Style="{DynamicResource HeadertextBlockStyle}"                        Text="{Binding Header}" />        </Grid>            </Border></UserControl>

请仔细观察我们都做了哪些改动。

4. 设计视图效果

当我们再次切换到设计视图时，看到的就是下面这个样子了：

怎么样，和我们刚才看到的设计视图，已经有了翻天覆地的变化了吧。

5. 注意事项

对于测试数据文件：GenericExpanderViewDesignTimeData.xaml，它的Build Action属性可以设置为 DesignData 或者 DesignDataWithDesignTimeCreatableTypes。

也就是：

或者：

参考阅读：

• Walkthrough: Using a DesignInstance to Bind to Data in the Designer http://msdn.microsoft.com/en-us/library/dd490796(VS.100).aspx
  
• Visual Studio 2010 Beta2 Sample Data Project Templates http://karlshifflett.wordpress.com/2009/10/21/visual-studio-2010-beta2-sample-data-project-templates/
  
• d:DesignInstance, d:DesignData in Visual Studio 2010 Beta2 http://www.codeproject.com/Articles/43335/d-DesignInstance-d-DesignData-in-Visual-Studio
  
• DesignData MVVM support in Blend, VS2010 and WPF/Silverlight http://blogs.msdn.com/b/mcsuksoldev/archive/2010/08/27/designdata-mvvm-support-in-blend-vs2010-and-wpf-silverlight.aspx
  
• Walkthrough: Using a DesignInstance to Bind to Data in the Silverlight Designer http://msdn.microsoft.com/en-us/library/ff602274(v=vs.95).aspx
  
• Using d:DataContext design time expression with Visual Studio 2010 Xaml file editing http://consultingblogs.emc.com/merrickchaffer/archive/2010/05/04/using-d-datacontext-design-time-expression-with-visual-studio-2010-xaml-file-editing.aspx
  
• Design DataContext - not working in designer http://social.msdn.microsoft.com/Forums/en-US/e08b5959-6bac-4812-bc37-ff085140e8a7/design-datacontext-not-working-in-designer?forum=wpf