WPF 用 DataTemplate 合并DataGrid列表列头<类似报表设计>及行头列头样式 - 学习
WPF中 DataGrid 列头合并,类似于报表设计。效果图如下↓
1.新建一个WPF项目WpfApplication1,新建一个窗体DataGridTest,前台代码如下:
<Window x:Class="WpfApplication1.DataGridTest"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="DataGridTest" Height="300" Width="300">
<Window.Resources>
<!-- 列头的背景色样式 -->
<Style x:Key="CityNumStyle" TargetType="DataGridColumnHeader">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="Root">
<!--<Rectangle x:Name="BackgroundGradient" Fill="#eee" Stretch="Fill" Grid.ColumnSpan="2" />-->
<ContentPresenter Content="区号" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- 合并列头的样式模版 -->
<Style x:Key="CityNameStyle" TargetType="DataGridColumnHeader">
<Setter Property="Foreground" Value="#222" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="SeparatorBrush" Value="#CCC" />
<Setter Property="Padding" Value="8" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="Root">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<!--<Rectangle x:Name="BackgroundRectangle" Fill="#eee" Stretch="Fill" Grid.ColumnSpan="2" />-->
<Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="1" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="1" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<!--设置标题名称-->
<ContentPresenter Content="省份城市" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.ColumnSpan="3" />
<!--设置间隔线-->
<Rectangle Fill="#ccc" VerticalAlignment="Stretch" Height="1" Visibility="Visible" Grid.Row="1" Grid.ColumnSpan="3" />
<ContentPresenter Content="省名" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Rectangle Fill="#ccc" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="2" Grid.Column="1" />
<ContentPresenter Content="城市" Grid.Row="2" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
<Rectangle x:Name="VerticalSeparator" Fill="#ccc" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="1" Grid.Column="1" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Margin="5">
<DataGrid AutoGenerateColumns="False" HorizontalAlignment="Stretch" Name="dataGrid1"
FrozenColumnCount="0" HeadersVisibility="All" HorizontalGridLinesBrush="Red" RowBackground="AliceBlue">
<DataGrid.ColumnHeaderStyle>
<!-- 列头的背景色样式 -->
<Style TargetType="DataGridColumnHeader">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="LightGray" Offset="0.5"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="FontSize" Value="13" />
</Style>
</DataGrid.ColumnHeaderStyle>
<DataGrid.RowHeaderStyle>
<!-- 行头的背景色样式 -->
<Style TargetType="DataGridRowHeader">
<Setter Property="Content" Value="*"/>
<Setter Property="Width" Value="10"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="SkyBlue" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="ToolTip" Value="选中该行"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.RowHeaderStyle>
<DataGrid.Columns>
<DataGridTemplateColumn Header="sec" HeaderStyle="{StaticResource CityNameStyle}">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Label Content="{Binding AddrName}" Width="100" />
<Rectangle Fill="#000" VerticalAlignment="Stretch" Margin="0" Width="1" />
<Label Content="{Binding CityName}" Width="100" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn HeaderStyle="{StaticResource CityNumStyle}" Binding="{Binding TelNum}" Width="100" />
<DataGridTextColumn Header="统计" Binding="{Binding TotalSum}" Width="100" />
</DataGrid.Columns>
</DataGrid>
</Grid>
</Window>
2.后台CS文件代码如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
namespace WpfApplication1
{
/// <summary>
/// DataGridTest.xaml 的交互逻辑
/// </summary>
public partial class DataGridTest : Window
{
public DataGridTest()
{
InitializeComponent();
this.dataGrid1.ItemsSource = CityInfo.GetInfo();
}
}
//定义绑定DataGrid的实体和集合
public class CityInfo
{
public string AddrName { get; set; }
public string CityName { get; set; }
public string TelNum { get; set; }
public double TotalSum { get; set; }
public static List<CityInfo> GetInfo()
{
return new List<CityInfo>()
{
new CityInfo() { AddrName="湖北", CityName = "武汉", TelNum="123", TotalSum = 1.23 },
new CityInfo() { AddrName="广东", CityName = "广州", TelNum="234", TotalSum = 1.23 },
new CityInfo() { AddrName="广西", CityName = "南宁", TelNum="0152", TotalSum = 1.23 },
new CityInfo() { AddrName="湖南", CityName = "长沙", TelNum="0123", TotalSum = 1.23 },
new CityInfo() { AddrName="江西", CityName = "南昌", TelNum="123", TotalSum = 10.23 }
};
}
}
}
WPF 用 DataTemplate 合并DataGrid列表列头<类似报表设计>及行头列头样式 - 学习的更多相关文章
- DataGridView使用技巧七:列顺序的调整、操作行头列头的标题
一.列顺序的调整 设定DataGridView的AllowUserToOrderColumns为True的时候,用户可以自由调整列的顺序. 当用户改变列的顺序的时候,其本身的Index不好改变,但是D ...
- DataGrid列表信息保存为EXCEL到指定的路径 ---------继续DataGrid在WPF的数据绑定
一.许多WPF或者Winform程序在保存数据时,会以EXCEL或者文本的形式展现可视化界面的数据,本文就简单介绍下将DataGrid列表信息保存为EXCEL到指定的路径下,例子很简单,用的着的直接用 ...
- WPF中。。DataGrid 实现时间控件和下拉框控件
DatePicker 和新的 DataGrid 行 用户与 DataGrid 中日期列的交互给我造成了很大的麻烦. 我通过将一个 Data Source 对象拖动到 WPF 窗口上,创建了一个 Dat ...
- WPF 实现主从的datagrid以及操作rowdetailtemplate 的方法
原文:WPF 实现主从的datagrid以及操作rowdetailtemplate 的方法 WPF 实现主从的datagrid以及操作rowdetailtemplate 的方法 最近在做 ...
- datagrid在MVC中的运用06-固定连续列
本文主要体验datagrid的frozenColumns属性. □ frozenColumns效果: 在frozenColumns的列将保持不动,而其他列横向滚动. □ frozenColumns效果 ...
- WPF实现QQ群文件列表动画(二)
上篇(WPF实现QQ群文件列表动画(一))介绍了WPF实现QQ群文件列表动画的大致思路,结合我之前讲过的WPF里ItemsControl的分组实现,实现起来问题不大,以下是效果图: 其实就是个List ...
- WPF中取得系统字体列表
原文:WPF中取得系统字体列表 在GDI+中,我们可以通过如下方式取得系统所有字体: foreach(FontFamily f in FontFamily.Families){ // 处理代码} ...
- JQuery EasyUI DataGrid列表所见所得随意导出excel
1.抽取DataGrid列表数据 function ExportNormal(strXlsName, exportGrid, postUrl, hiddenColumns) { /// <sum ...
- Python与数据结构[4] -> 散列表[2] -> 开放定址法与再散列的 Python 实现
开放定址散列法和再散列 目录 开放定址法 再散列 代码实现 1 开放定址散列法 前面利用分离链接法解决了散列表插入冲突的问题,而除了分离链接法外,还可以使用开放定址法来解决散列表的冲突问题. 开放定 ...
随机推荐
- Daily Scrum 11.9
摘要:本次的meeting主要是继续讨论程序的问题以及单元测试和集成测试等,本次为1.01版本.本次的Task列表如下: Task列表 出席人员 Today's Task Tomorrow's Tas ...
- Codeforces Round #358 (Div. 2) D. Alyona and Strings 字符串dp
题目链接: 题目 D. Alyona and Strings time limit per test2 seconds memory limit per test256 megabytes input ...
- PHP的反射机制(转)
介绍: PHP5添加了一项新的功能:Reflection.这个功能使得phper可以reverse-engineer class, interface,function,method and exte ...
- 给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动
我们在调用系统的Alert,prompt的弹出提示时,不同的系统会有不同的提示框,视觉效果不统一,而且不好看,功能单一,现在我们通过Jquery模拟Alert,prompt,现实统一视觉效果,而且内容 ...
- POJ 1852
#include <iostream> using namespace std; int main() { //freopen("acm.acm","r&qu ...
- ***解决PHP输出多余的空格或换行
用CI框架写APP后台接口的时候,返回的JSON前面有多余的2哥换行,首先排查的是BOM,结果问题依旧 再就是排查<?php ?> 标签外没有多余的回车.换行,结果发现确实有多余的换行,去 ...
- [SQL Server系] -- 基本概念
以下是我总结的 SQL Server 数据库中的一些 基本概念,以便模糊时查询, 欢迎补充 1:主键: 概念: 数据表 经常有 一个列 或 列的组合,其值能唯一地标识表中的每一行.这样的一列或多列称 ...
- hdu1233
http://acm.hdu.edu.cn/showproblem.php?pid=1233 最小生成树,kruskal算法 #include<stdio.h> #include<m ...
- asp.net 权限问题
asp.net项目中通过Web.config配置文件及文件夹的访问权限! http://blog.csdn.net/qingyun1029/article/details/6184723
- maven 环境搭建 Myeclipse配置
一:Maven的下载安装 准备工作: 1)安装环境 Windows xp 2)需安装JDK ,并配置环境变量(略) 3) Maven版本3.0.5 4)下载地址:http://mirror.bit.e ...