2. 程式人生 > 實用技巧 >【WPF】DataGrid多表頭的樣式設計

【WPF】DataGrid多表頭的樣式設計

阿新 • • 發佈：2020-06-29

需求

在使用WPF開發時，使用DataGrid列表顯示資料時，有些欄位可以進行分組顯示，用於更好的表達它們之間存在的某種關係，因此就考慮到要對DataGrid的表頭進行擴充套件，可以顯示多行表頭，讓這些有關聯的欄位內容顯示的更加明瞭簡潔。

自定義樣式

這段自定義樣式可以放在MainWindow.xaml檔案中，或者自己定義一個存放樣式檔案的xaml進行存放。

這裡在模版裡面使用的第一個Grid，是用於總的顯示，還有右側邊豎線分割線，嵌入的Grid用於顯示多表頭的處理顯示功能：第一行為總的資訊，第二行為第一行和第三行的分割線，第三行顯示的省、市和縣。

<Style x:Key="CityStyle" TargetType="DataGridColumnHeader">
 

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate>

                <Grid x:Name="Root">

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition>

                        </ColumnDefinition>
 

                        <ColumnDefinition Width="Auto">

                        </ColumnDefinition>

                    </Grid.ColumnDefinitions>

                    <Grid

                                Grid.Column="0"

                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
 

                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}">

                        <Grid.RowDefinitions>

                            <RowDefinition Height="30">

                            </RowDefinition>

                            <RowDefinition Height="Auto"></RowDefinition>

                            <RowDefinition Height="30">

                            </RowDefinition>

                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="100">

                            </ColumnDefinition>

                            <ColumnDefinition Width="Auto">

                            </ColumnDefinition>

                            <ColumnDefinition Width="100">

                            </ColumnDefinition>

                            <ColumnDefinition Width="Auto">

                            </ColumnDefinition>

                            <ColumnDefinition Width="100">

                            </ColumnDefinition>

                        </Grid.ColumnDefinitions>

                        <ContentPresenter

                                    Grid.Row="0"

                                    Grid.Column="0"

                                    Grid.ColumnSpan="5"

                                    HorizontalAlignment="Center"

                                    VerticalAlignment="Center"

                                    Content="戶籍資訊">

                        </ContentPresenter>

                        <Rectangle

                                    Grid.Row="1"

                                    Grid.Column="0"

                                    Grid.ColumnSpan="5"

                                    VerticalAlignment="Stretch" Height="1"

                                    Fill="Black"

                                    Visibility="Visible">

                        </Rectangle>

                        <ContentPresenter

                                    Grid.Row="2"

                                    Grid.Column="0"

                                    HorizontalAlignment="Center"

                                    VerticalAlignment="Center"

                                    Content="省">

                        </ContentPresenter>

                        <Rectangle

                                    Grid.Row="2"

                                    Grid.Column="1"

                                    Width="1"

                                    VerticalAlignment="Stretch"

                                    Fill="#ccc"

                                    Visibility="Visible">

                        </Rectangle>

                        <ContentPresenter

                                    Grid.Row="2"

                                    Grid.Column="2"

                                    HorizontalAlignment="Center"

                                    VerticalAlignment="Center"

                                    Content="市">

                        </ContentPresenter>

                        <Rectangle

                                    Grid.Row="2"

                                    Grid.Column="3"

                                    Width="1"

                                    VerticalAlignment="Stretch"

                                    Fill="#ccc"

                                    Visibility="Visible">

                        </Rectangle>

                        <ContentPresenter

                                    Grid.Row="2"

                                    Grid.Column="4"

                                    HorizontalAlignment="Center"

                                    VerticalAlignment="Center"

                                    Content="縣">

                        </ContentPresenter>

                    </Grid>

                    <Rectangle

                                Grid.Column="1"

                                Width="1"

                                VerticalAlignment="Stretch"

                                Fill="#ccc"

                                Visibility="Visible">

                    </Rectangle>

                </Grid>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

窗體佈局

<Grid>

    <DataGrid

            AutoGenerateColumns="False"

            CanUserAddRows="False"

            ItemsSource="{Binding UserInformations}">

        <DataGrid.Columns>

            <DataGridTextColumn Width="100" Binding="{Binding UserName}">

                <DataGridTextColumn.HeaderTemplate>

                    <DataTemplate>

                        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Center">

                            <TextBlock

                                    Margin="5,0,5,0"

                                    HorizontalAlignment="Center"

                                    VerticalAlignment="Center"

                                    Text="姓名"

                                    TextAlignment="Center"

                                    TextWrapping="Wrap">

                            </TextBlock>

                        </Grid>

                    </DataTemplate>

                </DataGridTextColumn.HeaderTemplate>

                <DataGridTextColumn.ElementStyle>

                    <Style>

                        <Setter Property="TextBlock.TextAlignment" Value="Center">

                        </Setter>

                        <Setter Property="TextBlock.TextWrapping" Value="Wrap">

                        </Setter>

                        <Setter Property="TextBlock.HorizontalAlignment" Value="Center">

                        </Setter>

                        <Setter Property="TextBlock.VerticalAlignment" Value="Center">

                        </Setter>

                    </Style>

                </DataGridTextColumn.ElementStyle>

            </DataGridTextColumn>

            <DataGridTemplateColumn HeaderStyle="{StaticResource CityStyle}">

                <DataGridTemplateColumn.CellTemplate>

                    <DataTemplate>

                        <StackPanel Orientation="Horizontal">

                            <TextBlock

                                    Width="100"

                                    Margin="0"

                                    HorizontalAlignment="Center"

                                    VerticalAlignment="Center"

                                    Text="{Binding Province}"

                                    TextAlignment="Center">

                            </TextBlock>

                            <Rectangle Width="1" Fill="Black">

                            </Rectangle>

                            <TextBlock

                                    Width="100"

                                    HorizontalAlignment="Center"

                                    VerticalAlignment="Center"

                                    Text="{Binding City}"

                                    TextAlignment="Center">

                            </TextBlock>

                            <Rectangle Width="1" Fill="Black">

                            </Rectangle>

                            <TextBlock

                                    Width="100"

                                    HorizontalAlignment="Center"

                                    VerticalAlignment="Center"

                                    Text="{Binding County}"

                                    TextAlignment="Center">

                            </TextBlock>

                        </StackPanel>

                    </DataTemplate>

                </DataGridTemplateColumn.CellTemplate>

            </DataGridTemplateColumn>

            <DataGridTextColumn

                    Width="100"

                    Binding="{Binding Motto}"

                    Header="格言">

                <DataGridTextColumn.HeaderStyle>

                    <Style>

                        <Setter Property="TextBlock.HorizontalAlignment" Value="Stretch">

                        </Setter>

                        <Setter Property="TextBlock.TextAlignment" Value="Center">

                        </Setter>

                    </Style>

                </DataGridTextColumn.HeaderStyle>

                <DataGridTextColumn.HeaderTemplate>

                    <DataTemplate>

                        <TextBlock

                                HorizontalAlignment="Center"

                                VerticalAlignment="Center"

                                Text="格言"

                                TextAlignment="Center"

                                TextWrapping="Wrap">

                        </TextBlock>

                    </DataTemplate>

                </DataGridTextColumn.HeaderTemplate>

                <DataGridTextColumn.ElementStyle>

                    <Style>

                        <Setter Property="TextBlock.TextAlignment" Value="Center">

                        </Setter>

                        <Setter Property="TextBlock.TextWrapping" Value="Wrap">

                        </Setter>

                        <Setter Property="TextBlock.HorizontalAlignment" Value="Center">

                        </Setter>

                        <Setter Property="TextBlock.VerticalAlignment" Value="Center">

                        </Setter>

                    </Style>

                </DataGridTextColumn.ElementStyle>

            </DataGridTextColumn>

        </DataGrid.Columns>

    </DataGrid>

</Grid>

在這裡的窗體佈局中，同時對姓名和格言的表頭樣式和Cell裡面的樣式進行了修改。其中DataGridTextColumn.HeaderTemplate包括的是頭部的樣式；DataGridTextColumn.ElementStyle寶開的是Cell的樣式。

定義的實體類

public class UserInformation

    {

        public string UserName { get; set; }

        public string Province { get; set; }

        public string City { get; set; }

        public string County { get; set; }

        public int Age { get; set; }

        public string Motto { get; set; }

    }

ViewModel類的定義

public class MainViewModel:ViewModelBase

    {

        private string _title;

        public string Title

        {

            get { return _title; }

            set { Set(ref _title, value); }

        }

        private ObservableCollection<UserInformation> _userInformations;

        public ObservableCollection<UserInformation> UserInformations

        {

            get { return _userInformations; }

            set { Set(ref _userInformations, value); }

        }

        public MainViewModel()

        {

            Title = Guid.NewGuid().ToString();

            UserInformations = new ObservableCollection<UserInformation>(new List<UserInformation>()

            {

                new UserInformation()

                {

                    UserName = "Bob",Age = 32,Province = "山東",City = "濟南",County = "天橋",Motto = "會當雲絕頂，\r\n一覽眾山小。"

                },

                new UserInformation()

                {

                    UserName = "Bob",Age = 32,Province = "山東",City = "濟南",County = "天橋",Motto = "會當雲絕頂，\r\n一覽眾山小。"

                },

                new UserInformation()

                {

                    UserName = "Bob",Age = 32,Province = "山東",City = "濟南",County = "天橋",Motto = "會當雲絕頂，\r\n一覽眾山小。"

                }

            });

        }

    }

本例項使用了.netcore 3.1版本進行的開發，但是對於.net framework同樣適用。

MVVM模式是使用MVVMLightstd10，可以從nuget上面進行下載。

本示例已上傳至GITHUB：https://github.com/mzy666888/MultiHeaderOfDataGridWpfApp

相關推薦

【WPF】DataGrid多表頭的樣式設計

需求 在使用WPF開發時，使用DataGrid列表顯示資料時，有些欄位可以進行分組顯示，用於更好的表達它們之間存在的某種關係，因此就考慮到要對DataGrid的表頭進行擴充套件，可以顯示多行表頭，讓這些有關聯的欄位內容顯

【WPF】自動完成/智慧提示的文字框（AutoCompleteBox）

原文:【WPF】自動完成/智慧提示的文字框（AutoCompleteBox） 使用了外掛WPFToolKit。（直接在Nuget中搜即可）

【WPF】Combox 下拉選項增加圖片顯示 ItemTemplate

效果圖如上所示： 前端Xmal程式碼： <Window x:Class=\"WpfTest.MainWindow\" xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"

【轉】Java多執行緒實現的四種方式

Java多執行緒實現方式主要有四種： 繼承Thread類 實現Runnable介面、 實現Callable介面通過FutureTask包裝器來建立Thread執行緒、

【python】Mutilindex多層索引的取值

一，Mutilindex多層索引的取值 1. 通過get_list自定義函式建立二維表格資料 import pandas as pd

【C++】類-多型

類-多型 [TOC] 1. 基本概念 多型性： 操作介面具有表現多種形態的能力，能根據操作環境的不同採用不同的處理方式。

【題解】P1858 多人揹包

P1858 多人揹包 題目描述 求01揹包前k優解的價值和 DD 和好朋友們要去爬山啦！ 他們一共有 K 個人，每個人都會背一個包。這些包 的容量是相同的，都是 V。可以裝進揹包裡的一共有 N 種物品，每種物品都有 給定的體積

個人部落格 Django 評論模組開發總結【二】資料表以及介面設計

資料表以及介面設計 個人部落格 地址https://www.charmcode.cn/article/2020-07-09_Comment 歡迎評論留言！

【轉】git多個遠端倉庫

1. 前言   用GitHub管理自己的開源專案有幾年了，最近一年更新得比較多，倉庫也越來越多越來越大。有時候感覺GitHub太慢，尤其是最近感覺更為明顯，於是萌生了再找個國內類似GitHub的程式碼託管平臺的想法

【熟能生巧】配置多個SSH免密碼登入實戰

需求 本地有一臺機器使用Linux系統，需要SSH（免密碼登入）到雲端的兩臺Server上。

【LWJGL3】LWJGL3的記憶體分配設計，第一篇，棧上分配

簡介 LWJGL (Lightweight Java Game Library 3)，是一個支援OpenGL，OpenAl，Opengl ES，Vulkan等的Java繫結庫。《我的世界》便是基於LWJGL的作品。為了討論LWJGL在記憶體分配方面的設計，本文將作為一系列文章中的第

【Jpa】動態多表if多條件聯合查詢，並對查詢結果進行分頁

public Page<Map<String, Object>> resourceList(TeachingInfo teachingInfo, Pageable pageable) {

【 DB_Oracle】Oracle多表關聯更新

很多場景我們需要根據多個表的某欄位進行關聯更新。   select * from table1  t1;

【WPF】WPF ScorllView觸控滾動實現

有時候需要這個效果，觸控向下可以向下滑動，不需要滑鼠滑輪。 使用 ListBox 可以簡單做到，那麼如何使用 ScrollViewer 做到相同效果？

【轉】IO多路複用之poll

原文：https://blog.51cto.com/lingdandan/1783952 ____________________________________________ poll提供的功能與select類似,與select在本質上沒有多大差別，管理多個描述符也是進行輪詢，但poll比select的優點

python利用pytesseract 實現本地識別圖片文字【3】（多執行緒）

#!/usr/bin/env python3 # -*- coding: utf-8 -*- import glob from os import path import os import pytesseract

python 利用百度API識別圖片文字【2】（多執行緒版）

#!/usr/bin/env python3 # -*- coding: utf-8 -*- \"\"\" Created on Tue Jun 12 09:37:38 2018 利用百度api實現圖片文字識別

【MyBatis】MyBatis 多表操作

MyBatis 多表操作 文章原始碼 一對一查詢 需求：查詢所有賬戶資訊，關聯查詢下單使用者資訊。

ideaj配置services【RunDashboard】顯示多專案

ideaj中如果執行多專案，一般會在底部顯示services選項卡，然後可以方便操作多專案啟動停止

【Linux】C多執行緒程式設計：互斥鎖

互斥量從本質上說就是一把鎖, 提供對共享資源的保護訪問。其基本原理就是在呼叫pthread_mutex_lock函式後 互斥鎖為上鎖狀態，在其他執行緒裡如果出現了pthread_mutex_lock函式後，會直接阻塞，直到互斥鎖解鎖。