Why is an extra column appearing in templated DataGridColumnHeader?

Question

Hi have a very simple WPF DataGrid layout as follows:

<wpftk:DataGrid Grid.Row="1"
        x:Name="myOrdersGrid"
        ColumnHeaderStyle="{DynamicResource FilterColumnHeaderStyle}"
        CanUserResizeColumns="True"
        VerticalAlignment="Stretch"
        HorizontalAlignment="Stretch">

  <wpftk:DataGrid.Resources>
    <Style x:Key="FilterColumnHeaderStyle" TargetType="{x:Type Primitives:DataGridColumnHeader}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type Primitives:DataGridColumnHeader}">
            <WrapPanel Width="50" Orientation="Vertical">
              <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Stretch"  />
              <TextBox Text="Hello" FontSize="10" Background="OldLace" HorizontalAlignment="Center" />
            </WrapPanel >
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </wpftk:DataGrid.Resources>

  <wpftk:DataGrid.Columns>
    <wpftk:DataGridTextColumn SortMemberPath="Name" Binding="{Binding Name}" IsReadOnly="True"/>
    <wpftk:DataGridTextColumn SortMemberPath="Name" Binding="{Binding Price}" IsReadOnly="True"/>
  </wpftk:DataGrid.Columns>
</wpftk:DataGrid>

The intention is to drop a textbox into each header, in order to act as a filter.

However, when this renders, I get an extra textbox floating halfway across the datagrid, as follows:

Anyone know why? I've played around with all sorts of settings etc, but can't figure out why this is happening (let alone how to fix it....). The extra textbox doesn't seem to be enabled/clickable so it looks like it's some sort of disabled/glasspaned scenario.

Answer 1

Okay, so I found the issue. The extra control appears to be being put in the 'filler' column that the datagrid automatically inserts between the last defined column and the RHS of the datagrid.

A better way to do this is to use a ContentTemplate for the header control as follows:

<Style x:Key="FilterColumnHeaderStyle" TargetType="{x:Type Primitives:DataGridColumnHeader}">
      <Setter Property="ContentTemplate">
        <Setter.Value>
          <DataTemplate>
            <WrapPanel Orientation="Vertical">
              <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Stretch"  />
              <TextBox Text="{grid:GridFilter UpdateSourceTrigger=PropertyChanged}"
                  Visibility="{Binding ElementName=FilterCheckbox, Path=IsChecked, Converter={StaticResource b2v}}"
                  FontSize="10" Width="50" Background="OldLace" HorizontalAlignment="Center" />
            </WrapPanel >
          </DataTemplate>
        </Setter.Value>
      </Setter>
    </Style>

This means the customised headers retain the correct style from the grid and have the thumbs etc included without having to explicitly declare them in the XAML.

Still interested to know whether the extra column in the datagrid is a bug though (for templating purposes) - I read an article which indicated that it's fixed in .Net 4.

Answer 2

Turn AutoGenerateColumns off. You have the two declarative columns, plus whatever columns are in the data items you are binding to - so if you are binding to a List<string> then you will get a third column (and as you've defined a DataGridColumnHeader template it will get used on the third column as well).

(Note: have you edited the posted code to remove AutoGenerateColumns? I'm sure it was there when I first looked).