WPF Tips：Using d:DataContext design time expression

最新推荐文章于 2025-02-25 17:47:49 发布

YapingXin

最新推荐文章于 2025-02-25 17:47:49 发布

阅读量1w

点赞数

分类专栏： .Net WPF

本文链接：https://blog.csdn.net/yapingxin/article/details/23942923

版权

.Net 同时被 2 个专栏收录

47 篇文章

订阅专栏

WPF

11 篇文章

订阅专栏

这是一个很实用的小技巧，和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>

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