企业官网建设流程全解析

简介：为WPF开发者提供的DataGrid自定义样式参考资源，旨在解决默认表格外观单一、无法贴合业务界面的问题。示例围绕ControlTemplate这一核心机制展开，从资源字典定义入手，讲解如何重写DataGridRow行模板、调整单元格样式、控制表头背景与边框，并加入悬停变色、选中高亮、交替行背景等常见交互效果，适合需要深度改造数据网格的初中级WPF开发者学习。压缩包共97个文件、约289KB，以C#源码和XAML样式文件为主，方便直接研究模板结构与绑定逻辑；dll、pdb可用于调试定位，exe可运行预览最终效果。工程还沿用Entity、DataAccess、Business三层结构组织数据访问与业务逻辑，使自定义样式与数据绑定并存时仍保持清晰层次，便于迁移到实际项目中。已有2511人浏览学习，尤其适合在WPF项目中需要精细定制DataGrid外观时作为参考。 很多年用下来，DataGrid 大概是 WPF 里“默认能用、但默认真丑”的典型代表。默认样式不算难看，可一旦碰上真实项目的界面要求，尤其是上位机、工业控制软件、管理系统这类对信息密度和操作手感都有要求的场景，默认那套灰底白字的表格基本都要推翻重做。

这篇文章说的自定义样式，不是教你把每个单元格边框换换颜色，而是讲清楚 DataGrid 的模板层次、控件结构、样式生效顺序，再给出一套经过实践验证的改造思路。涉及的知识点包括：默认模板结构、Header 样式、行与单元格的选中态、拖拽排序、MVVM 绑定下的样式处理，以及性能问题。适合正在做一个正经 WPF 项目、想把 DataGrid 做得更贴合自己产品风格的开发者参考。

1. 自定义样式的整体思路与拆解

1.1 先拿到默认模板，再谈自定义

大概有七成的自定义需求，最后都会死在一个问题上：自己画模板的时候把 DataGrid 原本的交互状态弄丢了。比如滚动条拉不动了、列宽拖拽没反应、选中行没有焦点态、编辑状态下单元格内容直接消失了。

所以我的习惯是，任何涉及 DataGrid 重样式的需求，第一步不是打开 XAML 写代码，而是先想办法把系统默认模板完整捞出来看一遍。怎么捞？三种方式：

• 在 Visual Studio 里选中 DataGrid，按 F12，会跳转到默认 XAML 中的 Template 定义。
• 用 Blend 的“编辑模板→编辑副本”功能，Blend 会把整套默认模板生成到你的资源文件里。
• 从开源项目里找公开的默认样式文件，比如某些 WPF 主题库项目里就带完整默认样式。

推荐用第二种。Blend 生成的副本有一个好处，它会连同相关的 Style、Brush、Trigger 一起给你，结构完整。缺点也很明显，代码量非常巨大，默认模板展开后通常有两三千行 XAML，看着就头大。

但再头大也得看，原因在于 DataGrid 的模板层级比普通控件深得多。它不是一个控件画布上直接摆行元素，而是由外层 DataGrid、内层 ScrollViewer、再内层 DataGridRowsPresenter 组成的嵌套结构。滚动、行生成、虚拟化这些核心机制全依赖这套嵌套关系。你在默认模板里能看到，ScrollViewer 的 Name 是DG_ScrollViewer，DataGridRowsPresenter 的 Name 是ItemsPresenter，这些命名不是随便起的，代码里到处都在用。

1.2 改造思路：局部替换，不要全盘推倒

看过默认模板的人基本都会明白，全手工重写一个 DataGrid 模板是多大的工作量，而且极容易在细节上出问题。所以我实际项目里的思路是：在默认模板的基础上做局部替换，目标是让视觉呈现符合需求，但保持滚动、编辑、虚拟化等底层机制不变。

打个比方，默认模板是一套毛坯房的结构框架，承重墙、管道、电路都已经布好了。你要做的是换换墙面材质、地面颜色、家具摆放，而不是把整栋楼拆了重盖。

具体到操作上，就是复制默认模板后，找关键部分的 x:Key 资源和 ControlTemplate，逐段替换。比如 ColumnHeaderStyle、RowStyle、CellStyle，这三个是最常动的地方。至于 DataGridTemplateColumn 里的 CellTemplate，那是每个项目千差万别的部分，根本不用统一模板去约束。这套思路下，常见的“表格样式改造”基本都能拿下。

1.3 准备一套可复用的样式资源字典

并不是每个界面都要重新写一遍样式。我会把 DataGrid 的自定义样式统一放进单独的 ResourceDictionary 文件里，在 App.xaml 中集中合并。这样多个窗口、多个用户控件可以共用同一套表格风格，后续要改主题时只需改这一个文件。

资源字典里我通常会同时定义：DataGrid默认 Style、DataGridColumnHeader的 Style、DataGridRow的 Style、DataGridCell的 Style，以及若干用于状态控制的 Brush 和 Converter。这样一套结构下来，界面层引用时只需要写<DataGrid Style="{StaticResource CustomDataGridStyle}" />，不用在每一个页面里重复定义样式。

2. DataGrid 的结构层级与模板关键点

2.1 可视化树结构：先摸清每一层是什么

DataGrid 的可视化树结构大致如下：

DataGrid ├── Border（边框、背景） │ └── ScrollViewer（滚动容器） │ ├── DataGridRowsPresenter（行集合） │ │ ├── DataGridRow │ │ │ ├── DataGridCellsPresenter │ │ │ │ └── DataGridCell │ │ │ └── DataGridDetailsPresenter（明细行） │ └── ScrollContentPresenter └── DataGridColumnHeadersPresenter（列标题）

可以观察到几个关键点。

外层 DataGrid 本身并不直接包含行列，而是通过 ScrollViewer 做视口控制。DataGridRowsPresenter 负责根据当前视口生成可见行，这也是 DataGrid 能支持大数据量显示的核心。列标题和行内容是分开的两个呈现器，所以它们可以独立滚动和定位。

模板改造的绝大多数问题，比如行高、列宽、单元格对齐、选中背景，都集中体现在 DataGridCell 和 DataGridRow 这两个层级上。而 Header 的自定义则聚焦在 DataGridColumnHeader 这一层。

2.2 DataGridCell 的模板入口与 DisplayTemplate 机制

DataGridCell 本身也是 Control，它有自己的一套 ControlTemplate。但和普通控件不同，DataGridCell 的内容显示逻辑由一个特殊机制控制，核心是DisplayTemplate。

如果你直接给 DataGridCell 的 Template 里放一个 ContentPresenter，默认情况下可能什么问题都看不到。原因就是 DataGridCell 不是简单地把数据内容显示出来，它有一个内部属性DisplayTemplate，会在不同的编辑状态、行状态、列类型下切换不同的模板。在自定义样式时，如果直接替掉了 ControlTemplate，内部的这些状态切换逻辑很容易被破坏。

踩过的坑是：手动重写 DataGridCell 模板后，双击单元格进入编辑模式时，原来应该显示的 TextBox 或 ComboBox 没有了，整个单元格直接空白。后来查了源码才发现，编辑状态下 DataGridCell 会切换到EditingElement对应的模板结构。所以自定义模板时要注意保留 ContentPresenter 用于显示普通内容，同时为DataGridCell.EditingElement保留绑定入口。

一个最简的 Cell 模板结构大概是：

<ControlTemplate TargetType="DataGridCell"> <Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <ContentPresenter VerticalAlignment="Center" /> </Border> </ControlTemplate>

注意这里的 ContentPresenter 必须保留，并且不要设置 ContentSource，让 DataGrid 自己管理内容。否则列模板里的绑定内容可能显示不出来。

2.3 DataGridColumnHeader 的排序、拖拽与视觉状态

Header 是自定义样式时改动最大、但功能最容易被破坏的区域。DataGridColumnHeader 里有一个很关键的子元素——Thumb，它的名字是PART_LeftHeaderGripper和PART_RightHeaderGripper，负责列宽拖拽。

默认模板中，这两个 Thumb 是水平方向排列在 Header 左右两侧的，鼠标移动到列边界时，光标变成左右调整箭头，然后拖拽调整列宽。如果你在自定义 Header 时把这个 Thumb 删了或者没有正确保留，列宽就不能拖动调整了。

同时，Header 的排序箭头状态由一个内部元素控制，通常叫SortIcon。如果你改了 Header 模板，排序箭头也不会自动出现，需要用一个触发器响应SortDirection属性，手动显示对应方向的箭头。

实际写法大概是：

<Style x:Key="CustomHeaderStyle" TargetType="DataGridColumnHeader"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="DataGridColumnHeader"> <Border x:Name="HeaderBorder" Background="#2D2D30" BorderBrush="#3F3F46" BorderThickness="0,0,1,1" Padding="12,4"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <ContentPresenter VerticalAlignment="Center" /> <Path x:Name="SortIcon" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Data="M0,0 L1,1 L2,0 Z" Fill="Transparent" Width="8" Height="8" Stretch="Fill" RenderTransformOrigin="0.5,0.5" /> </Grid> <ControlTemplate.Triggers> <Trigger Property="SortDirection" Value="Ascending"> <Setter TargetName="SortIcon" Property="Fill" Value="#FF6A9955" /> </Trigger> <Trigger Property="SortDirection" Value="Descending"> <Setter TargetName="SortIcon" Property="Fill" Value="#FF6A9955" /> <Setter TargetName="SortIcon" Property="LayoutTransform"> <Setter.Value> <RotateTransform Angle="180" /> </Setter.Value> </Setter> </Trigger> </ControlTemplate.Triggers> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>

这几段代码看着简单，但里面有两处容易栽跟头的地方。一是 Trigger 里对 SortDirection 的枚举值，默认模板里是Ascending/Descending，如果你写错一个单词，排序箭头就永远不会显示。二是 Path 的 Data 默认指向一个向上箭头，Descending 状态时需要旋转 180 度，直接用 LayoutTransform 就好，不要用 RenderTransform，否则动画和布局上会有偏差。

Header 的拖拽宽度功能之所以还能保留，是因为上面的模板里没有删除 Thumb，我再把默认模板里的 Thumb 塞回去：

<Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Width="6" Background="Transparent" Cursor="SizeWE" /> <Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Width="6" Background="Transparent" Cursor="SizeWE" />

这些 Thumb 不在视觉上显示，但负责整体列宽拖拽功能。少了这个细节，用户拖不了列宽，这表在客户那边基本是废的。

3. 实操过程：从默认模板到自定义风格

3.1 获取默认模板副本，逐个击破

具体动工前，我建议先把整个 DataGrid 默认模板生成成副本放到资源字典里，再从里面找到以下几段关键资源：

• DataGrid 基础控件模板（就是那个巨大的 ControlTemplate）
• DataGridColumnHeader 的默认样式
• DataGridRow 的默认样式
• DataGridCell 的默认样式
• DataGridRowHeader 的默认样式

生成后不急着删，先把默认的效果跑一遍。确认没什么破绽后，再开始改。

改的顺序建议是：

1. 先改外层 DataGrid 的背景、边框、网格线颜色。
2. 再改 ColumnHeader 的底色、文字对齐、排序箭头。
3. 然后改 Row 的悬停、选中态，以及行高。
4. 最后改 Cell 的 Padding、文字对齐、单元格边框。
5. 最后把编辑态（比如双击出现 TextBox）也套上自定义风格。

这个顺序的合理性在于，每改一层还能跑，不会出现改完所有东西后不知道是哪层引发的问题。

3.2 行高、列宽与单元格内边距的调节

信息管理系统里最常见的诉求就是“行高别那么挤”。在不改模板的情况下，调行高通常是用：

<DataGrid.RowStyle> <Style TargetType="DataGridRow"> <Setter Property="MinHeight" Value="36" /> <Setter Property="Padding" Value="8,0" /> </Style> </DataGrid.RowStyle>

但实际测下来，Padding在 DataGridRow 上并不总是生效。行容器的实际 Padding 由 DataGridRow 内部模板的 Border 决定，这个 Border 包在 DataGridCellsPresenter 或数据呈现区域外面。所以要给单元格内容留空间，最靠谱的方法还是设置 DataGridCell 的 Padding。

Cell 样式的 Padding 决定的是每个单元格内容与单元格边框的间距，比如：

<Style TargetType="DataGridCell"> <Setter Property="Padding" Value="12,0" /> <Setter Property="BorderThickness" Value="0,0,0,1" /> <Setter Property="BorderBrush" Value="#33000000" /> <Setter Property="Background" Value="Transparent" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="DataGridCell"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"> <ContentPresenter VerticalAlignment="Center" /> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>

这样改完之后，单元格文字统一垂直居中，视觉上整齐很多。如果用默认样式直接单纯调 Padding，你会发现左对齐的内容始终顶着格子边缘，很难看。

3.3 选中行、悬停行、焦点态的触发器设置

DataGrid 的行选中态有很多隐藏细节，这里最容易踩坑的地方是：选中行没有焦点时视觉上看不出在哪一行。

原因是默认模板里 DataGridRow 的选中态样式有一组触发器，区分IsSelected=True和IsSelected=True, IsKeyboardFocusWithin=True两种状态。焦点态用更亮的颜色表示当前键盘焦点所在的行，非焦点态用略暗的颜色表示仍然处于选中状态。

自定义时如果不区分这两种情况，都设成同一种高亮背景，那确实在任何状态下都能看到选中行。但产品经理或客户可能会说：“键盘上下键操作时，怎么看不到当前选中行在哪？”这就是焦点态没有被区分的后果。

推荐的做法是在 Row 的 ControlTemplate 里加一组触发器：

<Style x:Key="CustomRowStyle" TargetType="DataGridRow"> <Setter Property="Foreground" Value="#DDDDDD" /> <Setter Property="Background" Value="Transparent" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="DataGridRow"> <Border x:Name="RowBorder" Background="{TemplateBinding Background}" BorderThickness="0" SnapsToDevicePixels="True"> <DataGridCellsPresenter /> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="RowBorder" Property="Background" Value="#1F3F3F46" /> </Trigger> <Trigger Property="IsSelected" Value="True"> <Setter TargetName="RowBorder" Property="Background" Value="#FF007ACC" /> </Trigger> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsSelected" Value="True" /> <Condition Property="IsKeyboardFocusWithin" Value="False" /> </MultiTrigger.Conditions> <Setter TargetName="RowBorder" Property="Background" Value="#B2007ACC" /> </MultiTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>

注意这里有两个关键点。一是Template中必须放一个DataGridCellsPresenter，它是显示行内所有单元格内容的入口，不然整行空白。二是其实行内容不只包括 DataGridCells，还可能包含 RowDetails，但 RowDetails 默认折叠，所以这里不需要额外写，但如果你要支持展开明细行模板，就要同时保留DataGridDetailsPresenter并控制其 Visibility。

顺带说一个和选中态相关的经典坑：如果 Row 上设置了Background="White"，你会发现悬停和选中态都不变化。原因是触发器设置的Setter作用在模板内部的 Border 上，但 Background 属性优先级高于触发器，导致背景被直接写死。正确做法是让这句话留在 Row 上而不是内层 Border 上，或者用触发器同时改 Border 和 Row 的背景。

3.4 拖拽排序、自动生成列等实战问题

WPF DataGrid 默认并不支持拖拽行排序，但这个功能在自定义表格的实践里出现频率很高。不写自定义实现的话，只能做列头排序、程序排序。

如果我要做拖拽排序，通常思路是用 MouseLeftButtonDown 和 MouseMove 在 DataGridRow 上捕捉拖拽事件，然后配合ItemsControl.ItemsSource重新排序。但注意，如果 ItemsSource 绑定的是 ICollectionView 或 ObservableCollection，要区分排序和移动根本不是一回事。排序会改变集合的显示顺序而集合本身不变，移动则是把底层数据在集合里的位置直接改变。

用 MVVM 模式时，更推荐的做法是在 ViewModel 里维护一个ObservableCollection<T>，拖拽结束时通过交互行为调用 ViewModel 的命令，传入被拖拽的行数据和目标索引，在集合里执行 RemoveAt 和 Insert。这样界面更新和业务逻辑分离，不会变成一坨混乱的代码后置事件。

另外，自动生成列（AutoGenerateColumns）和自定义样式的适配也需要留意。自动生成列会按照绑定类型创建默认的 DataGridTextColumn、DataGridComboBoxColumn 等，这些列的样式和单元格样式可以统一生效，但如果你要自定义某列头部的图标或宽度，就得改用DataGridTemplateColumn手动控制。实际项目中，我会在 XAML 里设置AutoGenerateColumns="False"，所有列手写定义，这样 DataGrid 的视觉呈现完全可控。

手写列的写法大概是：

<DataGrid AutoGenerateColumns="False" ...> <DataGrid.Columns> <DataGridTextColumn Header="设备名称" Binding="{Binding DeviceName}" Width="160" /> <DataGridTemplateColumn Header="状态"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <TextBlock Text="{Binding StatusText}" Foreground="{Binding StatusColor}" /> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> </DataGrid.Columns> </DataGrid>

这样处理之后的样式控制，比让 DataGrid 自动生成列更精确，也不会因为类型推断不同导致同一列在不同行上风格不一致。

4. 常见问题与排查技巧实录

4.1 单元格文字不换行、显示不全

DataGrid 默认列宽固定的情况下，内容过长时默认截断显示，鼠标悬停时没有 Tooltip，用户会觉得信息缺失。这通常不是样式能解决的，而是列类型的设置问题。

• DataGridTextColumn 的内部编辑器是 TextBlock，TextBlock 默认不换行。
• 如果希望内容换行显示，可改成 DataGridTemplateColumn，用<TextBlock Text="{Binding ...}" TextWrapping="Wrap" />。
• 列表格列宽的体验优化：把列宽设成Width="*"，配合MinWidth和MaxWidth，让列在窗口变化时自适应。
• 但注意自动换行会显著降低大表格渲染性能，行数过千时慎用。

4.2 大数据量渲染卡顿、滚动不流畅

这是 WPF 表格开发里最常见的问题。很多人以为 DataGrid 自带虚拟化，随便灌一万行数据也不卡，其实虚拟化有前提条件：

• DataGrid 必须放在 ScrollViewer 之外，或 ScrollViewer 的CanContentScroll=True被显式设置。
• 如果为了样式给 DataGrid 套了一个无序 ScrollViewer，虚拟化就会被破坏，性能直接崩塌。
• 自定模板时，确保模板结构里确实包含 ScrollViewer，并且没有在模板中额外套一层 Canvas/StackPanel 作为行内容宿主。

另外还有一个容易忽略的性能杀手：在 CellStyle 的 Setter 里放了太多自定义的依赖属性绑定，或者整列都用 DataGridTemplateColumn 且模板内控件层级太深。这会导致每一个可见单元格生成时都要创建多个控件对象，刷新时开销大。行数多的情况下，建议优先用 DataGridTextColumn，不要每个单元格都用 TemplateColumn 包一个 TextBlock。

4.3 双击编辑时样式错乱

自定义单元格模板后，单元格的显示样式正常，但双击进入编辑后，编辑框的边框、背景仍然用系统默认样式，和整个表格风格不一致。

原因在于 DataGridTextColumn 的编辑元素是 TextBox，直接受 TextBox 默认样式控制，DataGridCell 模板管不到它。要同步风格，做法有两种：

• 一个是定义全局TextBox样式，设置无边框或统一背景，但影响面很大。
• 另一种是使用DataGridTemplateColumn的CellEditingTemplate，自行定义进入编辑模式时显示的控件。

使用 DataGridTemplateColumn 时，CellTemplate 定义普通显示，CellEditingTemplate 定义编辑控件：

<DataGridTemplateColumn Header="数值" Width="120"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <TextBlock Text="{Binding Value, StringFormat=F2}" Padding="12,0" VerticalAlignment="Center" /> </DataTemplate> </DataGridTemplateColumn.CellTemplate> <DataGridTemplateColumn.CellEditingTemplate> <DataTemplate> <TextBox Text="{Binding Value, UpdateSourceTrigger=PropertyChanged}" BorderThickness="0" Background="Transparent" VerticalContentAlignment="Center" Padding="12,0" /> </DataTemplate> </DataGridTemplateColumn.CellEditingTemplate> </DataGridTemplateColumn>

这样不管是否进入编辑状态，视觉呈现都是统一的。代价是 XAML 代码量上来了，但项目中值得花这点代码换稳定的视觉。

4.4 自定义 Header 时列宽拖拽的坑

如果你发现列与列之间不能拖拽调整宽度了，八成的可能是PART_LeftHeaderGripper和PART_RightHeaderGripper丢失或没有放在 Header 模板的正确位置。

这两个 Thumb 分别放在 Grid 的左右边界上，宽度通常在 4 到 8 像素。它们不可见但可交互，鼠标落上去时触发拖拽。调整宽度功能依赖于 DataGridColumnHeader 内部的OnGripperDragDelta等逻辑，只要 Thumb 存在并且 Name 正确，功能就能保留。

如果只是部分列能拖拽而部分列不能，则要排查 DataGridColumn 上的CanUserResize="False"或者 Header 样式被某一列的单独样式覆盖。

4.5 样式命名冲突与资源覆盖

WPF 资源查找遵循就近原则，如果 DataGrid 定义了局部样式，就优先使用局部样式而不是全局资源字典里的默认样式。很多开发者把自定义样式写在 App.xaml 里，又在个别页面设置了 DataGrid 属性，结果发现部分样式生效部分不生效，排查时没注意到就近决议原则。

建议是：全局统一风格放 App.xaml 的 ResourceDictionary 里，页面内只做放行属性设置，不要重复定义完整 Style。如果确实需要局部覆盖，则显式指定 x:Key，并用StaticResource引用，不要依赖隐式样式自动应用。

5. 给刚接触这套方案的人一个可落地的配置顺序

第一次做 DataGrid 样式重做，建议花一个下午的时间，分四步走：

第一，建一个DataGridStyles.xaml的资源字典文件，把第一步获取到的默认模板整体扔进去，然后把其中需要改的 Brush 和 Setter 提取出来。这一步是打地基，后面所有操作都在这个文件里做。

第二，先在外层把表格整体的底色、前景色、网格线颜色、行交替色配好。运行程序把静态效果确认一遍。

第三，改 ColumnHeader 样式和 Row 的触发器，确保排序、悬停、选中、焦点这些动态行为全部正常。这一步花的时间最多，但也是决定交互手感的核心。

第四，再改 Cell 的 Padding 和文字对齐，配合 DataGridTemplateColumn 微调列内容展示。

这四步做完，DataGrid 的自定义样式就有了稳定可靠的框架，后续换主题时只需调整 Brush，不用再动模板结构。

如果有时间，还可以把 LivePreview 的调试思路用在样式上。先给每个主要区域设置特别刺眼的临时颜色，比如 Header 设成红色、Row 设成蓝色、Cell 设成绿色，然后运行，用肉眼直接确认区域覆盖关系，最后再把临时颜色替换为目标色值。这种调法比你在 XAML 里反复猜测哪个属性管哪个区域要快得多。

本文还有配套的精品资源，点击获取