C# WPF DataGrid控件的详细介绍和推荐一些样式设计

最新推荐文章于 2026-05-23 08:00:00 发布

原创最新推荐文章于 2026-05-23 08:00:00 发布 · 7.3k 阅读

33 ·

本内容遵循CC 4.0 BY-SA版权协议

WPF 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨WPF中DataGrid控件的详细操作，包括定制外观、定义列类型、设置列格式和样式、行格式化、显示行细节、冻结列及其他高级功能，适合WPF开发者进阶学习。

该文章已生成可运行项目，

前面介绍过使用DataGrid简单绑定一个数据模型，接着介绍DataGrid的一些详细操作。
参考：C# WPF DataGrid的使用
定制DataGrid控件基本外观属性
RowBackground、AlternatingRowBackground:用于绘制每行背景的画刷（RowBackground），并且决定是否使用不同的背景颜色绘制交替行。在默认情况下，DataGrid控件为奇数行提供白色，为偶数行提供淡灰色背景。
ColumnHearderHeight:位于DataGrid控件顶部的列标题行的高度。
ColumnWidth:用于设置每列默认宽度的尺寸改变模式。
RowHeight:每行的高度。
GridLinesVisibility确定是否显示网格线DataGridGridlines枚举值
VerticalGridLinesBrush用于绘制列之间网格线的画刷
HorizontalGridLinesBrush用于绘制行之间网格线的画刷
HorizontalScrollBarVisibility、VerticalScrollBarVisibility确定是否显示滚动条ScrollBarVisibility枚举值，当需要时显示（auto）、总是显示（Visible）或总是不显示（Hidden）
CanUserResizeColumns属性设置为false来阻止用户改变DataGrid控件中列的尺寸
CanUserReorderColumns属性设置为true可以拖动列的位置，如果不希望用户具有这种重新排序的能力，可以将DataGrid控件的 CanUserReorderColumns属性或特定列的CanUserReorder属性设置为false。
定义列

DataGridTextColumn
值被转换为文本
DataGridCheckBoxColumn
这种列显示复选框
DataGridHyperlinkBoxColumn
这种列显示可单击的链接，如果结合WPF中的导航容器，可允许用户导航到其他URI（通常是外部的Web）。
DataGridComboxBoxColumn
在编辑模式下这种列会变成下拉的ComboxBox控件
DataGridTemplateColumn
功能最强大，允许为显示列值定义数据模板。
DataGridComboxBoxColumn的应用
最简单的方法是在标记中手动填充

 <DataGridComboBoxColumn.ItemsSource>
                        <col:ArrayList>
                            <sys:String>General</sys:String>
                            <sys:String>Communications</sys:String>
                            <sys:String>Deception</sys:String>
                            <sys:String>Munitions</sys:String>
                            <sys:String>Protection</sys:String>
                            <sys:String>Tools</sys:String>
                            <sys:String>Travel</sys:String>
                        </col:ArrayList>                        
                    </DataGridComboBoxColumn.ItemsSource>

为使上面的标记能够工作，必须将sys和col前缀映射到合适的.Net名称空间

        <Window ...
        xmlns:col="clr-namespace:System.Collections;assembly=mscorlib"
        xmlns:sys="clr-namespace:System;assembly=mscorlib">

DataGridTemplateColumn的应用
DataGridTemplateColumn定义了两个模板：一个用于数据显示（CellTemplate）;另一个用于数据编辑（CellEditingTemplate）

<DataGridTemplateColumn Header="Column6" >
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate >
                            <Button Click="click_1" Tag="{Binding Path=categoryID}"></Button>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                
                </DataGridTemplateColumn>

设置列的格式和样式
可以使用TextBlock元素格式相同的方式设置 DataGridTextColumn元素的格式，然而 DataGridTextColumn没有提供TextBlock的所有属性。如希望创建显示多行文本的列，将无法设置经常使用额Wrapping属性，这时需要改变ElementStyle属性。
本质上，ElementStyle属性用于创建应用于DataGrid单元格内部元素的样式。
对于简单的 DataGridTextColumn，该元素是TextBlock。
对于DataGridCheckBoxColumn，单元格内部的元素是复选框。
对于DataGridTemplateColumn，单元格内部的元素是在数据模板中创建的任何元素。

简单实例

                <DataGridTextColumn Header="Column2" Binding="{Binding LastName}" Width="1*">
                    <DataGridTextColumn.ElementStyle>
                        <Style TargetType="TextBlock">
                            <Setter Property="TextWrapping" Value="Wrap"/>
                        </Style>
                    </DataGridTextColumn.ElementStyle>
                </DataGridTextColumn>

如果希望为每一列中的单元格应用格式化设置，使用DataGrid.RowStyle属性配置样式最方便。

<DataGrid Name="DG1" ItemsSource="{Binding}" AutoGenerateColumns="False"  AlternationCount="2" CanUserSortColumns="False" HorizontalGridLinesBrush="#dddddd" VerticalGridLinesBrush="#dddddd">                       
    <DataGrid.RowStyle>
        <Style TargetType="{x:Type DataGridRow}">
            <Setter Property="FontSize" Value="12"/>
            <Style.Triggers>
                <Trigger Property="ItemsControl.AlternationIndex"
     Value="0">
                    <Setter Property="Background" Value="#cbedfa" />
                </Trigger>
                <Trigger Property="ItemsControl.AlternationIndex"
     Value="1">
                    <Setter Property="Background" Value="#FFFFFFFF" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </DataGrid.RowStyle>       
</DataGrid>

设置行的格式
使用LaodRow事件。还有DataGridTemplateColumn。
显示行细节
能够详细描述文本

    <DataGrid.RowDetailsTemplate>
                <DataTemplate>
                    <Border Margin="0" Padding="10" BorderBrush="SteelBlue" BorderThickness="3" CornerRadius="5">
                        <TextBlock Text="{Binding Path=Description}" TextWrapping="Wrap" FontSize="10">
                            
                        </TextBlock>
                    </Border>
                </DataTemplate>
            </DataGrid.RowDetailsTemplate>

在这里插入图片描述
RowDetailsVisibilityMode=“Visible”：同时显示所有行的细节；“VisibleWhenSelected”显示所选行的细节；Collapsed:不会为任何行显示细节。
冻结列
冻结的列位于DataGrid控件的左边。只需设置DataGrid.FrozenColumnCount属性为大于0的数。

其他一些功能
1.让DataGrid中列标题居中

<DataGrid.ColumnHeaderStyle>
    <Style TargetType="DataGridColumnHeader">
        <Setter Property="HorizontalContentAlignment" Value="Center">
        </Setter>
    </Style>
</DataGrid.ColumnHeaderStyle>

2.让内容单元格居中显示
引入样式文件
3.隔行变色

<DataGrid x:Name="gridChange" RowHeight="60" AlternationCount="2" >             <!--关键在于 <DataGrid>标签中添加属性AlternationCount="2" -->          
    <DataGrid.RowStyle>
        <Style TargetType="{x:Type DataGridRow}">
            <Setter Property="FontSize" Value="12"/>
            <Style.Triggers>
                <Trigger Property="ItemsControl.AlternationIndex"
     Value="0">
                    <Setter Property="Background" Value="#cbedfa" />
                </Trigger>
                <Trigger Property="ItemsControl.AlternationIndex"
     Value="1">
                    <Setter Property="Background" Value="#FFFFFFFF" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </DataGrid.RowStyle>       
</DataGrid>

等价于属性 Background=“AliceBlue” AlternatingRowBackground=“AliceBlue”
4.鼠标滑过变色

<DataGrid x:Name="gridChange" RowHeight="60"  >                       
    <DataGrid.RowStyle>
        <Style TargetType="{x:Type DataGridRow}">
            <Setter Property="FontSize" Value="12"/>
            <Style.Triggers>                    
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#76d7fb"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </DataGrid.RowStyle>       
</DataGrid>

5.选中行变色

<DataGrid.CellStyle>  
    <Style TargetType="DataGridCell">  
        <Setter Property="BorderThickness" Value="0"/>  
        <Setter Property="MinWidth" Value="85"/>     
        <Style.Triggers>  
            <Trigger Property="IsSelected" Value="True">  
                <Setter Property="Background" Value="LightBlue"/>  
                <Setter Property="Foreground" Value="White"/>  
             </Trigger>  
         </Style.Triggers>  
     </Style>  
</DataGrid.CellStyle>

一些常用属性解释
属性解释：

1、AlternationCount：设置ItemControl中交替项的数据，可以理解为各几行换色设置

2、AutoGenerateColumns：是否自动生成列

3、CanUserAddRows：是否允许添加新行

4、CanUserDeleteRows：是否允许删除行

5、CanUserReorderColumns：是否允许用户通过使用鼠标拖拽列标题，更改列的显示顺序

6、CanUserResizeColumns：是否允许用户通过鼠标更改列的宽度

7、CanUserResizeRows：是否允许用户通过鼠标更改行的高度

8、ColumnHeaderHeight：列表头的高度

9、GridLinesVisibility：指示显示哪些网格线，包括：None，Horizontal，Vertical，All

10、HeadersVisibility：指示行和列标题的可见性，包括：None，Column，Row，All
一个非常简单的DataGrid

<DataGrid x:Name="dataGrid1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
                                  AutoGenerateColumns="False" IsReadOnly="True"
                                  CanUserReorderColumns="False" CanUserResizeColumns="False" GridLinesVisibility="None"
                                  CanUserResizeRows="False" ColumnHeaderHeight="20" FontSize="10" AlternationCount="2" 
                                  HeadersVisibility="Column" ItemsSource="{Binding ***,Mode=TwoWay}"  RowHeight="28"  Grid.Row="2">                       
                        <DataGrid.ContextMenu>
                            <ContextMenu>
                                <!-- 右击添加 -->
                                <MenuItem Name="MenuItem2" Header="add" Command="{Binding ***}"/>
                            </ContextMenu>
                        </DataGrid.ContextMenu>
                        <DataGrid.ColumnHeaderStyle>
                            <Style TargetType="DataGridColumnHeader">
                                <!--标题列居中-->
                                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                            </Style>
                        </DataGrid.ColumnHeaderStyle>
                       
                        <DataGrid.Columns>
                            <DataGridTextColumn  MinWidth="20"  Header=""/>
                            <DataGridTextColumn Width="*" MinWidth="50"  Header="Name" />
                            <DataGridTextColumn Width="*" MinWidth="50"  Header="1"/>
                            <DataGridTextColumn Width="*" MinWidth="50"  Header="2"/>
                            <DataGridTextColumn Width="*" MinWidth="50"  Header="3"/>                            
                        </DataGrid.Columns>
                    </DataGrid>