WPF datagrid列标题跨越多个列 [英] WPF datagrid column heading span more than once column

查看:214
本文介绍了WPF datagrid列标题跨越多个列的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述



在WPF数据网格中,可以对列标题进行分组?

  |第1列|第2栏第3栏
| a b c | a b c | a b c |
| z x y | z x y | z x y |

我已经搜索过,看不到明显的方法。我可以使用一个模板列,然后模仿每个模板中的额外的单元格,但是这对于排序等都不会很好。



我想我所说的我正在寻找的是人们如何设法跨多列列标题。



任何帮助或想法将不胜感激。

解决方案

这是一个旧的线程,但是我以为我应该分享我如何做。



在我的应用程序中,我想显示三列日期条目,在一个列标题下,维护费用日期。我创建了一个单列,有两个DataTemplates,一个用于显示,一个用于编辑:

 < DataGrid.Resources> 
< DataTemplate x:Key =cellTemplate>
< Grid>
< Grid.ColumnDefinitions>
< ColumnDefinition Width =100/>
< ColumnDefinition Width =100/>
< ColumnDefinition Width =100/>
< /Grid.ColumnDefinitions>
< TextBlock x:Name =tbDate1
Text ={Binding Path = Date1}
Grid.Column =0/>
< TextBlock x:Name =tbDate2
Text ={Binding Path = Date2}
Grid.Column =1/>
< TextBlock x:Name =tbDate3
Text ={Binding Path = Date3}
Grid.Column =2/>
< / Grid>
< / DataTemplate>
< DataTemplate x:Key =cellEditingTemplate>
< Grid>
< Grid.ColumnDefinitions>
< ColumnDefinition Width =100/>
< ColumnDefinition Width =100/>
< ColumnDefinition Width =100/>
< /Grid.ColumnDefinitions>
< DatePicker Grid.Column =0
Margin =0
Name =dpDate1
宽度=100
SelectedDate ={Binding Path = Date1}/>
< DatePicker Grid.Column =1
Margin =0
Name =dpDate2
宽度=100
SelectedDate ={Binding Path = Date2}/>
< DatePicker Grid.Column =2
Margin =0
Name =dpDate3
宽度=100
SelectedDate ={Binding Path = Date3}/>
< / Grid>
< / DataTemplate>



然后我将列定义为一个DataGridTemplateColumn,指向上面的DataTemplates:

 < DataGrid.Columns> 
....
< DataGridTemplateColumn CellTemplate ={StaticResource cellTemplate}
标题=维护费用日期
CellEditingTemplate ={StaticResource cellEditingTemplate}/>
....
< /DataGrid.Columns>

由于DataTemplate布局有一个具有三个固定长度的列的网格,我得到三个不错的单列列中的日期列(或编辑时的DatePickers)。



水平网格线可由网格处理。要在三列之间具有垂直的网格线,只需将中间列的控件放在边框控件中即可。将边框控件设置为与网格列相同的宽度,仅显示其右侧和左侧边框,并设置其BorderBrush以匹配DataGrid的网格线的颜色:

 < DataTemplate x:Key =cellTemplate> 
< Grid>
< Grid.ColumnDefinitions>
< ColumnDefinition Width =100/>
< ColumnDefinition Width =100/>
< ColumnDefinition Width =100/>
< /Grid.ColumnDefinitions>
< TextBlock x:Name =tbDate1
Text ={Binding Path = Date1}
Grid.Column =0/>
< Border BorderThickness =1,0,1,0
BorderBrush =DarkGray
宽度=100>
< Border.Child>
< TextBlock x:Name =tbDate2
Text ={Binding Path = Date2}
Grid.Column =1/>
< /Border.Child>
< / Border>
< TextBlock x:Name =tbDate3
Text ={Binding Path = Date3}
Grid.Column =2/>
< / Grid>
< / DataTemplate>


In a WPF datagrid is it possible to group column headings?

What I'm after is

| Column 1 | Column 2 | Column 3|
| a  b  c  | a  b  c  | a  b  c |
| z  x  y  | z  x  y  | z  x  y |

I've searched around and can't see an obvious way of doing this. I could use a templated column and then mimick the extra cells within the each template but that wouldn't work well for ordering etc.

I suppose all I'm saying it that I'm looking for is how people have managed to span column headings across multiple coluns.

Any help or ideas would be greatly appreciated.

解决方案

This is an old thread, but I thought I should share how I did it.

In my application, I want to display three columns of date entries, under a single column header, "Maintenance Fee Dates." I created a single column, with two DataTemplates, one for display and one for editing:

<DataGrid.Resources>
  <DataTemplate x:Key="cellTemplate">
     <Grid>
        <Grid.ColumnDefinitions>
           <ColumnDefinition Width="100" />
           <ColumnDefinition Width="100" />
           <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>
        <TextBlock x:Name="tbDate1"
                    Text="{Binding Path=Date1}"
                    Grid.Column="0" />
        <TextBlock x:Name="tbDate2"
                    Text="{Binding Path=Date2}"
                    Grid.Column="1" />
        <TextBlock x:Name="tbDate3"
                    Text="{Binding Path=Date3}"
                    Grid.Column="2" />
     </Grid>
  </DataTemplate>
  <DataTemplate x:Key="cellEditingTemplate">
     <Grid>
        <Grid.ColumnDefinitions>
           <ColumnDefinition Width="100" />
           <ColumnDefinition Width="100" />
           <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>
        <DatePicker Grid.Column="0"
                    Margin="0"
                    Name="dpDate1"
                    Width="100"
                    SelectedDate="{Binding Path=Date1}" />
        <DatePicker Grid.Column="1"
                    Margin="0"
                    Name="dpDate2"
                    Width="100"
                    SelectedDate="{Binding Path=Date2}" />
        <DatePicker Grid.Column="2"
                    Margin="0"
                    Name="dpDate3"
                    Width="100"
                    SelectedDate="{Binding Path=Date3}" />
     </Grid>
  </DataTemplate>

Then I define the column as a DataGridTemplateColumn, pointing at the DataTemplates above:

<DataGrid.Columns>
....
   <DataGridTemplateColumn CellTemplate="{StaticResource cellTemplate}"
                           Header="Maintenance Fee Dates"
                           CellEditingTemplate="{StaticResource cellEditingTemplate}" />
....
</DataGrid.Columns>

Since the DataTemplate is laid out with a Grid that has three fixed-length columns, I get three nice columns of dates (or DatePickers when editing) under the single column header.

Horizontal Gridlines can be handled by the Grid. To have vertical Gridlines between the three columns, just put the middle column's control in a Border control. Set the Border control to the same width as the Grid column, display only its right and left borders, and set its BorderBrush to match the color of the DataGrid's Gridlines:

  <DataTemplate x:Key="cellTemplate">
     <Grid>
        <Grid.ColumnDefinitions>
           <ColumnDefinition Width="100" />
           <ColumnDefinition Width="100" />
           <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>
        <TextBlock x:Name="tbDate1"
                    Text="{Binding Path=Date1}"
                    Grid.Column="0" />
        <Border BorderThickness="1,0,1,0"
                BorderBrush="DarkGray"
                Width="100">
           <Border.Child>
              <TextBlock x:Name="tbDate2"
                          Text="{Binding Path=Date2}"
                          Grid.Column="1" />
           </Border.Child>
        </Border>
        <TextBlock x:Name="tbDate3"
                    Text="{Binding Path=Date3}"
                    Grid.Column="2" />
     </Grid>
  </DataTemplate>

这篇关于WPF datagrid列标题跨越多个列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆