我们不多哔哔先上图:

数据表格使用背景:

  当我们在做二次开发发现我我们的表格无法向WEB的表格一样好看,这时我们就需要对数据表格进行美化和重构

表格美化思维引导:

  WPF数据表格是由表头和表体(内容)组成那么我们就要对这两部分单独美化

  表头美化代码:

 <Style x:Key="DataGridStyle" TargetType="DataGrid">
<Setter Property="ColumnHeaderStyle" Value="{DynamicResource ColumnHeaderStyle}"></Setter>
<Setter Property="CellStyle" Value="{DynamicResource CellStyle}"></Setter>
<Setter Property="RowStyle" Value="{DynamicResource RowStyle}"></Setter>
<Setter Property="Background" Value="White"></Setter>
<Setter Property="EnableRowVirtualization" Value="False"></Setter>
<Setter Property="GridLinesVisibility" Value="None"></Setter>
<Setter Property="CanUserAddRows" Value="False"></Setter><!--禁止在尾行手动添加数据-->
<Setter Property="AutoGenerateColumns" Value="False"></Setter>
<Setter Property="IsEnabled" Value="True"></Setter>
</Style>
<Style x:Key="ColumnHeaderStyle" TargetType="DataGridColumnHeader">
<Setter Property="Height" Value=""></Setter>
<Setter Property="Background" Value="#F2F2F2"></Setter>
<Setter Property="BorderThickness" Value=""></Setter>
<Setter Property="BorderBrush" Value="#CBCBCB"></Setter>
<Setter Property="VerticalContentAlignment" Value="Center"></Setter><!--水平居中-->
<Setter Property="HorizontalContentAlignment" Value="Center"></Setter><!--垂直居中-->
 </Style>

美化表体每行样式

 <Style x:Key="RowStyle" TargetType="DataGridRow">
<Setter Property="Cursor" Value="Hand"></Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="#F2F2F2"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#CBCBCB" />
</Trigger>
</Style.Triggers>
</Style>

美化表体单元格内容样式

 <Style x:Key="CellStyle" TargetType="DataGridCell">
<Setter Property="Height" Value=""></Setter>
<Setter Property="FontSize" Value=""></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridCell">
<Border x:Name="Bg" Background="Transparent" BorderThickness="" UseLayoutRounding="True" BorderBrush="#FFCBCBCB">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate> </Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#CBCBCB" />
<Setter Property="Foreground" Value="#000000" />
</Trigger>
</Style.Triggers>
</Style>

注意:鼠标点击当前行时需要覆盖单元格颜色

WPF-DataGrid(数据表格)美化的更多相关文章

  1. EasyUI datagrid数据表格的函数getData返回来的是什么

    EasyUI datagrid数据表格的函数getData返回来的是什么? 他返回来的是这么一个对象: Object { rows=[10], total=15} 其中rows就是每一行的数据,是这些 ...

  2. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  3. DataGrid( 数据表格) 组件[9]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  4. DataGrid( 数据表格) 组件[8]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  5. DataGrid( 数据表格) 组件[7]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  6. DataGrid( 数据表格) 组件[6]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  7. DataGrid( 数据表格) 组件[5]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  8. DataGrid( 数据表格) 组件[4]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  9. DataGrid( 数据表格) 组件[3]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  10. DataGrid( 数据表格) 组件[2]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

随机推荐

  1. Mac BOOK PRO U盘安装windows7、8及8.1

    http://v.youku.com/v_show/id_XMTI1NjgzMzU0NA==.html http://jingyan.baidu.com/article/1709ad80b3d2f44 ...

  2. maven之发布项目到nexus【clean deploy命令】

    原文:http://m.blog.csdn.net/article/details?id=49667971 当我们的项目开发完成以后,可能要进行发布(如果是独立的项目,就不需要发布啦,如果是模块项目, ...

  3. Nexus3.0.1如何上传第三方插件

    原文:http://blog.csdn.net/wang465745776/article/details/52527905 前提条件 Nexus 3.0.1 提出问题 如何上传第三方插件到Nexus ...

  4. CentOS里route命令详解

    Route 功能简述:linux系统中的route命令能够用于IP路由表的显示和操作.它的主要作用是创建一个静态路由让指定一个主机或者一个网络通过一个网络接口,如eth0.当使用"add&q ...

  5. 当Eclipse爱上SVN

    推荐使用:Subclipse  :http://jingyan.baidu.com/article/1612d5007d41e9e20e1eeeff.html 为离线安装做准备: 1.下载Subver ...

  6. coco2d-js demo程序之滚动的小球

    近期有一个游戏叫围住神经猫,报道说是使用html5技术来做的. html5的跨平台的优良特性非常不错.对于人手不足,技术不足,选用html5技术实现跨平台的梦想真是不错. 近期在看coco2d-js这 ...

  7. 【 D3.js 进阶系列 — 1.0 】 CSV 表格文件的读取

    在入门系列的教程中.我们经常使用 d3.json() 函数来读取 json 格式的文件.json 格式非常强大.但对于普通用户可能不太适合,普通用户更喜欢的是用 Microsoft Excel 或 O ...

  8. uml时序图的初印象-------Day64

    近期有好多想法迫不及待的想去实现,但是其实是在那些最開始想的很明确,感觉会没问题的地方也总是会出现故障,导致稍微有些急躁,还是要淡定啊.又到了周末.明后天要收拾东西搬家,不知道宽带能不能顺利的给挪过去 ...

  9. 訪问的网页自己主动打开QQ对话

    今天訪问中国论文网,自己主动就弹出与QQ的对话框,非常是好奇.于是查看网页源码发现例如以下可疑处: <script type="text/javascript"> fu ...

  10. MongoDB 数据库的概念以增删改查

    1,MongoDB概念解析: Mongo数据库基本概念是文档,集合,数据库,下表给予介绍 SQL术语概念 MongoDB术语概念 解释/说明 database database 数据库 table c ...