内容转自https://www.cnblogs.com/xiaogangqq123/archive/2012/05/07/2487166.html

一、DataGrid基本样式(一)

小刚已经把DataGrid的样式写的很完整了,这里我做点补充,先贴上基本样式的代码:

  1. <!--DataGrid样式-->
  2. <Style TargetType="DataGrid">
  3. <!--网格线颜色-->
  4. <Setter Property="CanUserResizeColumns" Value="false"/>
  5. <Setter Property="Background" Value="#FFF7EDAD" />
  6. <Setter Property="BorderBrush" Value="#FFF5F7F5" />
  7. <Setter Property="HorizontalGridLinesBrush">
  8. <Setter.Value>
  9. <SolidColorBrush Color="#d6c79b"/>
  10. </Setter.Value>
  11. </Setter>
  12. <Setter Property="VerticalGridLinesBrush">
  13. <Setter.Value>
  14. <SolidColorBrush Color="#d6c79b"/>
  15. </Setter.Value>
  16. </Setter>
  17. </Style>
  18.  
  19. <!--标题栏样式-->
  20. <Style TargetType="DataGridColumnHeader">
  21. <Setter Property="SnapsToDevicePixels" Value="True" />
  22. <Setter Property="MinWidth" Value="0" />
  23. <Setter Property="MinHeight" Value="28" />
  24. <Setter Property="Foreground" Value="#323433" />
  25. <Setter Property="FontSize" Value="14" />
  26. <Setter Property="Cursor" Value="Hand" />
  27. <Setter Property="Template">
  28. <Setter.Value>
  29. <ControlTemplate TargetType="DataGridColumnHeader">
  30. <Border x:Name="BackgroundBorder" BorderThickness="0,1,0,1"
  31. BorderBrush="#e6dbba"
  32. Width="Auto">
  33. <Grid >
  34. <Grid.ColumnDefinitions>
  35. <ColumnDefinition Width="*" />
  36. </Grid.ColumnDefinitions>
  37. <ContentPresenter Margin="0,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
  38. <Path x:Name="SortArrow" Visibility="Collapsed" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill" Grid.Column="2" Width="8" Height="6" Fill="White" Margin="0,0,50,0"
  39. VerticalAlignment="Center" RenderTransformOrigin="1,1" />
  40. <Rectangle Width="1" Fill="#d6c79b" HorizontalAlignment="Right" Grid.ColumnSpan="1" />
  41. </Grid>
  42. </Border>
  43. </ControlTemplate>
  44. </Setter.Value>
  45. </Setter>
  46. <Setter Property="Height" Value="25"/>
  47. </Style>
  48. <!--行样式触发-->
  49. <!--背景色改变必须先设置cellStyle 因为cellStyle会覆盖rowStyle样式-->
  50. <Style TargetType="DataGridRow">
  51. <Setter Property="Background" Value="#F2F2F2" />
  52. <Setter Property="Height" Value="25"/>
  53. <Setter Property="Foreground" Value="Black" />
  54. <Style.Triggers>
  55. <!--隔行换色-->
  56. <Trigger Property="AlternationIndex" Value="0" >
  57. <Setter Property="Background" Value="#e7e7e7" />
  58. </Trigger>
  59. <Trigger Property="AlternationIndex" Value="1" >
  60. <Setter Property="Background" Value="#f2f2f2" />
  61. </Trigger>
  62.  
  63. <Trigger Property="IsMouseOver" Value="True">
  64. <Setter Property="Background" Value="LightGray"/>
  65. <!--<Setter Property="Foreground" Value="White"/>-->
  66. </Trigger>
  67.  
  68. <Trigger Property="IsSelected" Value="True">
  69. <Setter Property="Foreground" Value="Black"/>
  70. </Trigger>
  71. </Style.Triggers>
  72. </Style>
  73.  
  74. <!--单元格样式触发-->
  75. <Style TargetType="DataGridCell">
  76. <Setter Property="Template">
  77. <Setter.Value>
  78. <ControlTemplate TargetType="DataGridCell">
  79. <TextBlock TextAlignment="Center" VerticalAlignment="Center" >
  80. <ContentPresenter />
  81. </TextBlock>
  82. </ControlTemplate>
  83. </Setter.Value>
  84. </Setter>
  85. <Style.Triggers>
  86. <Trigger Property="IsSelected" Value="True">
  87. <Setter Property="Foreground" Value="Black"/>
  88. </Trigger>
  89. </Style.Triggers>
  90. </Style>

引用示例:

  1. <DataGrid x:Name="DataGrid" AutoGenerateColumns="False" VerticalAlignment="Top"
  2. CanUserSortColumns="False" Margin="5" IsReadOnly="True"
  3. CanUserResizeColumns="False" CanUserResizeRows="False" SelectionMode="Single"
  4. CanUserReorderColumns="False" AlternationCount="2" RowHeaderWidth="0" CanUserAddRows="False" >
  5. <DataGrid.Columns>
  6. <DataGridTextColumn Header="名称" Width="150" Binding="{Binding Name}"/>
  7. <DataGridTextColumn Header="班级" Width="120" Binding="{Binding Class}"/>
  8. <DataGridTextColumn Header="性别" Width="120" Binding="{Binding Sex}"/>
  9. <DataGridTextColumn Header="班级排名" Width="130" Binding="{Binding ClassRank}"/>
  10. <DataGridTextColumn Header="全校排名" Width="140" Binding="{Binding SchoolRank}"/>
  11. </DataGrid.Columns>
  12. </DataGrid>

初始化绑定数据C#代码:

  1. public partial class MainWindow : Window
  2. {
  3. public MainWindow()
  4. {
  5. InitializeComponent();
  6.  
  7. StudentList = new List<StudentInfo>()
  8. {
  9. new StudentInfo()
  10. {
  11. Name="张三",
  12. Class="三班",
  13. Sex="男",
  14. ClassRank=,
  15. SchoolRank=
  16. },
  17. new StudentInfo()
  18. {
  19. Name="李四",
  20. Class="三班",
  21. Sex="男",
  22. ClassRank=,
  23. SchoolRank=
  24. },
  25. new StudentInfo()
  26. {
  27. Name="李梅",
  28. Class="三班",
  29. Sex="女",
  30. ClassRank=,
  31. SchoolRank=
  32. },
  33. };
  34. this.DataGrid.ItemsSource = StudentList;
  35. }
  36.  
  37. public List<StudentInfo> StudentList { get; set; }
  38. public class StudentInfo
  39. {
  40. public string Name { get; set; }
  41. public string Class { get; set; }
  42. public string Sex { get; set; }
  43. public int ClassRank { get; set; }
  44. public int SchoolRank { get; set; }
  45. }

效果展示:

二、DataGrid基本样式(二)

上面的代码实现了隔行换色的效果,但是没有鼠标选中效果。另外有些用户希望能够进行列头拖动及排序。那么就需要做以下更改:

添加DataGridRow样式:

  1. <Style x:Key="AlertCount1" TargetType="DataGridRow">
  2. <Setter Property="Background" Value="#F2F2F2" />
  3. <Setter Property="Height" Value="25"/>
  4. <Setter Property="Foreground" Value="Black" />
  5. <Style.Triggers>
  6. <Trigger Property="AlternationIndex" Value="0" >
  7. <Setter Property="Background" Value="White" />
  8. </Trigger>
  9. <Trigger Property="IsMouseOver" Value="True">
  10. <Setter Property="Background" Value="LightGray"/>
  11. </Trigger>
  12.  
  13. <Trigger Property="IsSelected" Value="True">
  14. <Setter Property="Foreground" Value="Black"/>
  15. <Setter Property="Background" Value="LightGray"/>
  16. </Trigger>
  17. </Style.Triggers>
  18. </Style>

在引用时,设置DataGrid的RowStyle="{StaticResource AlertCount1}"且AlternationCount="1"。这样就可以实现突出选中效果,取消隔行显示效果。要实现表头拖动,使用上面的样式代码是不行的,上面的样式代码去掉了拖动的控件。要实现拖动需要将其加上。

下面是对DataGrid控件的补充:

控件常用方法:

BeginEdit:使DataGrid进入编辑状态。

CancelEdit:取消DataGrid的编辑状态。

CollapseRowGroup:闭合DataGrid的行分组。

CommitEdit:确认DataGrid的编辑完成。

ExpandRowGroup:展开DataGrid的行分组。

GetGroupFromItem:从具体Item中得到分组。

ScrollIntoView:滚动DataGrid视图。

控件常用属性:

AlternatingRowBackground:获取或设置一个笔刷用来描绘DataGrid奇数行的背景。

AreRowDetailsFrozen:获取或设置一个值用来判断是否冻结每行内容的详细信息。

AreRowGroupHeadersFrozen:获取或设置一个值用来判断是否冻结分组行的头部。

AutoGenerateColumns:获取或设置一个值用来判断是否允许自动生成表列。

CanUserReorderColumns:获取或设置一个值用来判断是否允许用户重新排列表列的位置。

CanUserSortColumns:获取或设置一个值用来判断是否允许用户按列对表中内容进行排序。

CellStyle:获取或设置单元格的样式。

ColumnHeaderHeight:获取或设置列头的高度。

ColumnHeaderStyle:获取或设置列头的样式。

Columns:获取组件中包含所有列的集合。

ColumnWidth:获取或设置列宽。

CurrentColumn:获取或设置包含当前单元格的列。

CurrentItem:获取包含当前单元格且与行绑定的数据项。

DragIndicatorStyle:获取或设置当拖曳列头时的样式。

DropLocationIndicatorStyle:获取或设置呈现列头时的样式。

FrozenColumnCount:获取或设置冻结列的个数。

GridLinesVisibility:获取或设置网格线的显示形式。

HeadersVisibility:获取或设置行头及列头的显示形式。

HorizontalGridLinesBrush:获取或设置水平网格线的笔刷。

HorizontalScrollBarVisibility:获取或设置水平滚动条的显示样式。

IsReadOnly:获取或设置DataGrid是否为只读。

MaxColumnWidth:获取或设置DataGrid的最大列宽。

MinColumnWidth:获取或设置DataGrid的最小列宽。

RowBackground:获取或设置用于填充行背景的笔刷。

RowDetailsTemplate:获取或设置被用于显示行详细部分的内容的模板。

RowDetailsVisibilityMode:获取或设置一个值用以判定行详细部分是否显示。

RowGroupHeaderStyles:获取呈现行分组头部的样式。

RowHeaderStyle:获取或设置呈现行头的样式。

RowHeaderWidth:获取或设置行头的宽度。

RowHeight:获取或设置每行的高度。

RowStyle:获取或设置呈现行时的样式。

SelectedIndex:获取或设置当前选中部分的索引值。

SelectedItem:获取或设置与当前被选中行绑定的数据项。

SelectedItems:获取与当前被选中的各行绑定的数据项们的列表(List)。

SelectionMode:获取或设置DataGrid的选取模式。

VerticalGridLinesBrush:获取或设置垂直网格线的笔刷。

VerticalScrollBarVisibility:获取或设置垂直滚动条的显示样式。

所有代码已经上传到github:https://github.com/cmfGit/WpfDemo.git

WPF 自定义DataGrid控件样式的更多相关文章

  1. WPF自定义分页控件,样式自定义,简单易用

    WPF自定义分页控件 做了许久伸手党,终于有机会贡献一波,搜索一下WPF分页控件,还是多,但是不太通用,主要就是样式问题,这个WPF很好解决,还有一个就是分页控件嘛,只关心几个数字的变动就行了,把页码 ...

  2. WPF 自定义TabControl控件样式

    一.前言 程序中经常会用到TabControl控件,默认的控件样式很普通.而且样式或功能不一定符合我们的要求.比如:我们需要TabControl的标题能够居中.或平均分布:或者我们希望TabContr ...

  3. wpf 自定义RadioButton控件样式

    实现的效果为: 我感觉来自定义RadioButton样式和定义button空间的样式差不多,只是类型不同而已. 接下来分析一下样式代码: <!--自定义单选按钮样式-->        & ...

  4. WPF 自定义TreeView控件样式,仿QQ联系人列表

    一.前言 TreeView控件在项目中使用比较频繁,普通的TreeView并不能满足我们的需求.因此我们需要滴对TreeView进行改造.下面的内容将介绍仿QQ联系人TreeView样式及TreeVi ...

  5. WPF 4 DataGrid 控件(自定义样式篇)

    原文:WPF 4 DataGrid 控件(自定义样式篇)      在<WPF 4 DataGrid 控件(基本功能篇)>中我们已经学习了DataGrid 的基本功能及使用方法.本篇将继续 ...

  6. WPF Calendar 日历控件 样式自定义

    原文:WPF Calendar 日历控件 样式自定义 粗略的在代码上做了些注释 blend 生成出来的模版 有的时候 会生成 跟 vs ui界面不兼容的代码 会导致可视化设计界面 报错崩溃掉 但是确不 ...

  7. WPF 4 DataGrid 控件(进阶篇一)

    原文:WPF 4 DataGrid 控件(进阶篇一)      上一篇<WPF 4 DataGrid 控件(自定义样式篇)>中,我们掌握了DataGrid 列表头.行表头.行.单元格相关的 ...

  8. WPF 4 DataGrid 控件(进阶篇二)

    原文:WPF 4 DataGrid 控件(进阶篇二)      上一篇<WPF 4 DataGrid 控件(进阶篇一)>中我们通过DataGridTemplateColumn 类自定义编辑 ...

  9. 演练:使用属性自定义 DataGrid 控件

    演练:使用属性自定义 DataGrid 控件 Silverlight   此主题尚未评级 - 评价此主题   Silverlight DataGrid 控件支持常用表格式设置选项,例如交替显示不同的行 ...

随机推荐

  1. MySQL多数据源笔记2-Spring多数据源一主多从读写分离(手写)

    一.为什么要进行读写分离呢? 因为数据库的"写操作"操作是比较耗时的(写上万条条数据到Mysql可能要1分钟分钟).但是数据库的"读操作"却比"写操作 ...

  2. Jmeter + Ant 测试环境搭建 及解决问题: the <jmeter> type doesn't support nested text data

    1.首先确保测试机器中已经按照jdk1.6以上版本,如果没有,那就上官网下载吧. 2.下载Ant,解压至指定目录,并配置好环境变量:http://ant.apache.org/ 在命令行下执行ant ...

  3. CMake 条件判断

    CMake简介 CMake 是做什么的? CMake是一套类似于automake的跨平台辅助项目编译的工具. 我觉得语法更加简单易用. CMake的工作流程 CMake处理顶级目录的CMakeList ...

  4. aspnetcore.webapi实践k8s健康探测机制 - kubernetes

    1.浅析k8s两种健康检查机制 Liveness k8s通过liveness来探测微服务的存活性,判断什么时候该重启容器实现自愈.比如访问 Web 服务器时显示 500 内部错误,可能是系统超载,也可 ...

  5. 基于Three.js的360度全景--photo-sphere-viewer--简介

    这个是基于three.js的全景插件  photo-sphere-viewer.js  ---------------------------------------- 1.能添加热点: 2.能调用陀 ...

  6. canvas动画气球

    canvas小球的动画我用canvas画布实现的小球动画效果,可以参考下 我用canvas画布实现的小球动画效果,可以参考下 我用canvas画布实现的小球动画效果,可以参考下 我用canvas画布实 ...

  7. 用disabled属性修饰a标签,a标签仍然能点击

    1.不知道各位同学有没有遇到跟我相同的问题,就是用jQuery操作a标签disabled的,来控制重复提交表单 做过开发的都知道,表单验证重复提交,包含前端和后端,两方面的控制.前端控制使我们常用的手 ...

  8. 06_java 时间获取练习_Date\SimpleDateFormat\Calendar类练习

     1.获取当前的日期,并把这个日期转换为指定格式的字符串,如2088-08-08 08:08:08 import java.text.SimpleDateFormat; import java.uti ...

  9. 大数据 --> 一致性Hash算法

    一致性Hash算法 一致性Hash算法(Consistent Hash)

  10. android:layout_weight属性详解

    1. 按比例显示LinearLayout内各个子控件,需设置android:layout_width="0dp",如果为竖直方向的设置android:layout_height=& ...