Home>

I'm building a system in WPF and I stumbled upon creating a table.
I wanted to create a table and create a page to put information in it, so I made a trial and error, but it didn't go well and I have a question.


↑ I'm thinking of making a table like this.
I tried to find out how to make multiple headers, but I couldn't figure it out.

Supplementary information (FW/tool version, etc.)

Visual Studio 2019

  • Answer # 1

    Don't let the header be resized or swappedIf so, make up a fake header with Grid etc.

    I put it in the image as much as possible, but how about something like this?

    <Window
      x: Class = "Questions306366.MainWindow"
      xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns: collections = "clr-namespace: System.Collections;assembly = mscorlib"
      xmlns: sys = "clr-namespace: System;assembly = mscorlib"
      Width = "800"
      Height = "450"><Window.Resources><!-Only xaml has no particular meaning-><collections: ArrayList x: Key = "data">  <collections: ArrayList>    <sys: Int32>1</sys: Int32>    <sys: String>Ichiro</sys: String>    <sys: DateTime>1998-01-01</sys: DateTime>    <sys: Int32>22</sys: Int32>    <sys: String>A</sys: String>    <sys: String>Yes</sys: String>    <sys: String>U</sys: String>    <sys: String>Eh</sys: String>  </collectionions: ArrayList>  <collections: ArrayList>    <sys: Int32>2</sys: Int32>    <sys: String>Jiro</sys: String>    <sys: DateTime>1999-02-02</sys: DateTime>    <sys: Int32>21</sys: Int32>    <sys: String>Oh</sys: String>    <sys: String>or</sys: String>    <sys: String>Ki</sys: String>    <sys: String>ku</sys: String>  </collectionions: ArrayList></collectionions: ArrayList><Style TargetType = "DataGridColumnHeader">  <Setter Property = "HorizontalContentAlignment" Value = "Center" /></Style><Style x: Key = "CellStyleRight" TargetType = "DataGridCell">  <Setter Property = "TextBlock.TextAlignment" Value = "Right" /></Style></Window.Resources><Grid><DockPanel>  <!-Fake header->  <Grid
            Margin = "1,1,1,0"
            Cursor = "Arrow"
            DockPanel.Dock = "Top"
            ForceCursor = "True">    <Grid.ColumnDefinitions>      <ColumnDefinition Width = "Auto" />      <ColumnDefinition Width = "Auto" /><ColumnDefinition Width = "Auto" />      <ColumnDefinition Width = "Auto" />      <ColumnDefinition Width = "Auto" />      <ColumnDefinition Width = "Auto" />      <ColumnDefinition Width = "Auto" />      <ColumnDefinition Width = "Auto" />      <ColumnDefinition />    </Grid.ColumnDefinitions>    <Grid.RowDefinitions>      <RowDefinition />      <RowDefinition />      <RowDefinition />    </Grid.RowDefinitions>    <DataGridColumnHeader Grid.RowSpan = "3" Width = "{Binding ActualWidth, ElementName = NumberColumn}" Content = "Number" />    <DataGridColumnHeader
              Grid.Row = "1"
              Grid.RowSpan = "2"
              Grid.Column = "1"
              Width = "{Binding ActualWidth, ElementName = NameColumn}"
              Content = "name" />    <DataGridColumnHeader
              Grid.Row = "1"
              Grid.RowSpan = "2"
              Grid.Column = "2"
              Width = "{Binding ActualWidth, ElementName = DOBColumn}"
              Content = "Date of Birth" />    <DataGridColumnHeader
              Grid.Row = "1"
              Grid.RowSpan = "2"
              Grid.Column = "3"
              Width = "{Binding ActualWidth, ElementName = AgeColumn}"
              Content = "age" />    <DataGridColumnHeader
              Grid.Row = "2"
              Grid.Column = "4"
              Width = "{Binding ActualWidth, ElementName = DDDDColumn}"
              Content = "DDDD" />    <DataGridColumnHeader
              Grid.Row = "2"
              Grid.Column = "5"
              Width = "{Binding ActualWidth, ElementName = EEEEColumn}"
              Content = "EEEE" />    <DataGridColumnHeader
              Grid.Row = "2"
              Grid.Column = "6"
              Width = "{Binding ActualWidth, ElementName = FFFFColumn}"
              Content = "FFFF" />    <DataGridColumnHeader
              Grid.Row = "2"
              Grid.Column = "7"
              Width = "{Binding ActualWidth, ElementName = GGGGColumn}"
              Content = "GGGG" /><DataGridColumnHeader Grid.Column = "1" Grid.ColumnSpan = "3" Content = "Personal Information" />    <DataGridColumnHeader Grid.Column = "4" Grid.ColumnSpan = "4" Content = "AAAA" />    <DataGridColumnHeader
              Grid.Row = "1"
              Grid.Column = "4"
              Grid.ColumnSpan = "2"
              Content = "BBBB" />    <DataGridColumnHeader
              Grid.Row = "1"
              Grid.Column = "6"
              Grid.ColumnSpan = "2"
              Content = "CCCC" />    <Border />  </Grid>  <DataGrid AutoGenerateColumns = "False" HeadersVisibility = "None" ItemsSource = "{StaticResource data}">    <DataGrid.Columns>      <DataGridTextColumn
                x: Name = "NumberColumn"
                Width = "90"
                Binding = "{Binding [0]}"
                CellStyle = "{StaticResource CellStyleRight}" />      <DataGridTextColumn x: Name = "NameColumn" Width = "90" Binding = "{Binding [1]}" />      <DataGridTextColumn
                x: Name = "DOBColumn"
                Width = "90"
                Binding = "{Binding [2],
     StringFormat = M month d day} ""
                CellStyle = "{StaticResource CellStyleRight}" />      <DataGridTextColumn
                x: Name = "AgeColumn"
                Width = "90"
                Binding = "{Binding [3]}"
                CellStyle = "{StaticResource CellStyleRight}" />      <DataGridTextColumn x: Name = "DDDDColumn" Width = "90" Binding = "{Binding [4]}" />      <DataGridTextColumn x: Name = "EEEEColumn" Width = "90" Binding = "{Binding [5]}" />      <DataGridTextColumn x: Name = "FFFFColumn" Width = "90" Binding = "{Binding [6]}" />      <DataGridTextColumn x: Name = "GGGGColumn" Width = "90" Binding = "{Binding [7]}" />    </DataGrid.Columns>  </DataGrid></DockPanel></Grid></Window>


    To take advantage of the sort functionDataGridColumnHeaderofClickPlease pick up and sort the sources.

    smallWhatTo get the character
    DataGridColumnHeader.SortDirection Property (System.Windows.Controls.Primitives) | Microsoft Docs
    IssetI can't mess with it because there is no
    DataGridHeaderBorder.SortDirection Property (Microsoft.Windows.Themes) | Microsoft Docs
    DataGridColumnHeaderIt was displayed if I messed with this in the descendants of.