Datagrid custom header

Question

I want to add an extra row to Datagrid's header row that will contain textboxes (for searching).
This row should appear directly under the original header and look like regular item header.

This is my code so far:

 <Window.Resources>
        <Style x:Key="DataGridColumnHeaderStyle1" TargetType="{x:Type DataGridColumnHeader}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">

                        <Grid VerticalAlignment="Center" HorizontalAlignment="Stretch">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <TextBlock Grid.Row="0" Text="" HorizontalAlignment="Stretch"/>
                            <Grid Grid.Row="1">
                                <TextBox Text="" HorizontalAlignment="Stretch" BorderThickness="1" />
                            </Grid>
                        </Grid>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <Grid x:Name="LayoutRoot">
        <DataGrid x:Name="dataGrid" Height="157" Width="600" Margin="8,8,24,0"
                  VerticalAlignment="Top"
                  AutoGenerateColumns="False"
                  ColumnHeaderStyle="{DynamicResource DataGridColumnHeaderStyle1}"
                  ItemsSource="{Binding}" CanUserAddRows="False"
                  >

            <DataGrid.Columns>
                <DataGridTextColumn Header="Header1" Binding="{Binding Id}" Width="100" />
                <DataGridTextColumn Header="Header2" Binding="{Binding Name}" Width="100"/>
                <DataGridTextColumn Header="Header3" Binding="{Binding Phone}" Width="100"/>
                <DataGridTextColumn Header="Header4" Binding="{Binding Address}" Width="100"/>
                <DataGridTextColumn Header="Header5" Binding="{Binding Description}" Width="*"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

The problem with my contentTemplate that it doesn't get the "header title" that is defined in .

wangburger · Accepted Answer · 2011-05-17T19:37:40.107

If I understand you correctly, I think you want something like this:

<TextBox Text="{TemplateBinding Content}" HorizontalAlignment="Stretch" BorderThickness="1" />

This puts the text you typed the Header attribute as text in the text box.

Edit: Template binding works because your are making a binding from the templated header to the header you define outside of the style. In other words, the TemplateBinding markup does a binding with the source as the actual header.

To be a little clearer, TemplateBinding is the same as Binding RelativeSource={RelativeSource TemplatedParent}}. So this does a binding where the source is a DataGridColumnHeader. And when this style is applied to the data grid, the headers become that templated parent. So the binding simply binds to the Content of the templated parent which is your <DataGridTextColumn Header="Header1" Binding="{Binding Id}" Width="100" />

Here's a link the the msdn: TemplateBinding

I need for textblock, but you are right. Can you please explain how does TemplateBinding Content bind the Header property? — Mark A, May 17 '11 at 18:49
thanks for your great answer,but would you please tell me how can i bind these textboxes to a viewmodel and filter each column using them? — mahboub_mo, Apr 15 '12 at 09:50

Datagrid custom header

1 Answers1

Linked