WPF 用 DataTemplate 合并DataGrid列表列头<类似报表设计>及行头列头样式 - 学习
2013-12-17 01:15
423 查看
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 }
};
}
}
}
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学习-文本编辑器(界面的<xaml>设计)
- JavaScript学习之设计模式->代理模式
- <响应式布局>3---设计案例样式文件的另一种引入方式
- WPF开发学习:资源在内外部定义的不同方式和怎么引用,Style样式的四种使用(对比CSS)
- 如何设计折叠样式的屏幕(类似MIGO的屏幕)
- WPF程序设计指南第24张样式中DataTrigger中使用绑定的例子
- 1&amp;gt;s.cpp(465) : error C2448: “main”: 函数样式初始值设定项类似函数定义 问题的解决方法
- <C/C++ 版> 设计模式 学习之 工厂模式 <1>
- WPF界面设计技巧(10)-样式的继承
- <SharePoint 2013 用户界面设计与品牌化>学习系列之---基础
- 微软报表rdlc有类似dephi的FastReport的<运行时报表 最终用户 调节位置>功能吗?
- 如何在ASP.NET中设计类似RichEdit样式的文本编辑区域
- WPF:从WPF Diagram Designer Part 3学习如何给设计器增加连接线功能
- 百灵报表(BIRT)接口学习:设计report design
- WPF:从WPF Diagram Designer Part 3学习如何给设计器增加连接线功能
- <JAVA学习笔记二>——设计模式之装饰者设计模式
- Dynamic CRM 2013学习笔记(二十六)报表设计:Reporting Service报表 动态参数、参数多选全选、动态列、动态显示行字体颜色
- 自我学习成长系列之<<FirstHead设计模式>>
- 如何设计折叠样式的屏幕(类似MIGO的屏幕)
- 设计模式学习之抽象工厂模式(二)<反射+配置文件>