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

发布时间:2025-12-09 21:55:41 浏览次数:3

前面介绍过使用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>

    原文链接:https://blog.csdn.net/weixin_42930928/article/details/87776996

    需要做网站?需要网络推广?欢迎咨询客户经理 13272073477