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 }
??????????? };
??????? }
??? }
}