WPF自定义数据网格列标题

本文介绍了WPF自定义数据网格列标题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我需要创建自定义的数据网格DataGridTextColumn像下面的草图：

I need to create a Custom dataGrid DataGridTextColumn like the sketch below:

红色矩形是文本框和用于将列内进行搜索。

The Red rectangles are TextBox and are used to search within the column.

到目前为止，我已经实现了这样一个DataGrid（简化版本）：

so far i have implemented a datagrid like this (simplify Version):

<DataGrid x:Name="CompassLogDataGrid" Grid.Row="1" Style="{DynamicResource ResourceKey=DataGridStyle}" IsTextSearchEnabled="True"> <DataGrid.Columns> <DataGridTextColumn CellStyle="{StaticResource IdCell}" x:Name="ID" Header="ID" Foreground="Black" Binding="{Binding ID}" DisplayIndex="0" /> <DataGridTextColumn x:Name="DateGTC" Header="Date" Binding="{Binding DateString}" CellStyle="{StaticResource DateGTCCell}" /> </DataGrid.Columns </DataGrid

我不知道如何来创建这些文本框。任何线索将AP preciate它

I have no idea how to create those textBoxes. Any clue would be appreciate it

推荐答案

DataGridTemplateColumn 是你在找什么。您可以自定义模板，按您的需求 -

DataGridTemplateColumn is what you are looking for. You can customize the template as per your need -

<DataGrid> <DataGrid.Columns> <DataGridTemplateColumn> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <TextBox BorderBrush="Red" BorderThickness="3" Margin="5"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> </DataGrid.Columns> </DataGrid>

使用样本的ItemsSource 它给这个样子 -

With sample ItemsSource it gives this look -

修改

如果你想自定义标题，您需要提供 HeaderTemplate中为您列这样的 -

In case you want to customize the header, you need to provide HeaderTemplate for your column like this -

<DataGrid> <DataGrid.Columns> <DataGridTextColumn Binding="{Binding Name}" Header="{Binding HeaderName}"> <DataGridTextColumn.HeaderTemplate> <DataTemplate> <StackPanel> <TextBlock Text="{Binding Content, RelativeSource= {RelativeSource Mode=TemplatedParent}}" Margin="5"/> <TextBox BorderBrush="Red" BorderThickness="3" Width="50" Margin="5"/> </StackPanel> </DataTemplate> </DataGridTextColumn.HeaderTemplate> </DataGridTextColumn> </DataGrid.Columns> </DataGrid>

这里的样子 -

Here's the look -