如何在XAML设计器中预览WPF DataGridTemplateColumn的显示效果？

当然可以！XAML设计器默认因为没有数据上下文支撑，所以不会渲染DataGridTemplateColumn的内容，但有几种简单的技巧能让你轻松预览它的呈现效果：

方法1：给DataGrid设置设计时数据上下文 #

首先在你的XAML根元素中添加设计专用的命名空间（这是启用多数设计时特性的基础）：

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

接着给DataGrid添加d:DataContext属性，指向一个设计时可用的数据类型实例。假设你的DataGrid绑定的是YourDataItem类型的数据，你可以这样写：

<DataGrid d:DataContext="{d:DesignInstance Type=local:YourDataItem, IsDesignTimeCreatable=True}">
    <!-- 你的DataGridTemplateColumn代码 -->
    <DataGridTemplateColumn>
        <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <Button Margin="2" BorderThickness="0" Background="Transparent">
                    <Button.Content>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="/WpfImages;component/images/16x16/wheels.png" Width="16" Height="16" ToolTip="Show wheels" />
                        </StackPanel>
                    </Button.Content>
                </Button>
            </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>
</DataGrid>

只要YourDataItem有默认构造函数，设计器就会自动创建一个实例，这样就能看到DataGridTemplateColumn的渲染效果了。

方法2：临时添加设计时数据项 #

如果不想折腾数据类型，也可以直接在DataGrid里手动加几个模拟数据项，设计器会直接渲染这些行：

<DataGrid>
    <DataGrid.Items>
        <local:YourDataItem />
        <local:YourDataItem />
    </DataGrid.Items>
    <!-- 你的DataGridTemplateColumn代码 -->
    <DataGridTemplateColumn>
        <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <Button Margin="2" BorderThickness="0" Background="Transparent">
                    <Button.Content>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="/WpfImages;component/images/16x16/wheels.png" Width="16" Height="16" ToolTip="Show wheels" />
                        </StackPanel>
                    </Button.Content>
                </Button>
            </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>
</DataGrid>

这种方法最直观，你能直接看到列在实际行中的样子，调试完成后记得把这些模拟的Items删掉就好。

额外小提示 #

如果你的图片在设计器里不显示，检查一下图片文件的Build Action是否设置为Resource——只有这样设计器才能正确加载内嵌的资源文件。

内容的提问来源于stack exchange，提问作者Beetlejuice