Question

I am placing a single button with an image in the header of a column of a DataGrid. The cell template is also just a simple button with an image.

<my:DataGridTemplateColumn>
    <my:DataGridTemplateColumn.HeaderTemplate>
        <DataTemplate>
            <Button ToolTip="Add New Template" Name="AddNewTemplate" Click="AddNewTemplate_Click">
                <Image Source="../Resources/add.png"/>
            </Button>
        </DataTemplate>
    </my:DataGridTemplateColumn.HeaderTemplate>
    <my:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <Button ToolTip="Edit Template" Name="EditTemplate" Click="EditTemplate_Click" Tag="{Binding}">
                <Image Source="../Resources/pencil.png"/>
            </Button>
        </DataTemplate>
   </my:DataGridTemplateColumn.CellTemplate>
</my:DataGridTemplateColumn>

When rendered, the header has approximately 10-15px of padding on the right side only which causes the cells to obviously render at that width leaving the cell button having empty space on both sides. Being a pixel-perfectionist this annoys the hell out of me. I had initially thought that it was space for the arrows displayed when sorted but I have sorting disabled on both the entire DataGrid and explicitly on the column.

Here’s a image:
http://img716.imageshack.us/img716/1787/68487749.png

I assume this is padding from whatever is the parent element of the button. Does anyone know a way to eliminate it?

---

See:

• http://img704.imageshack.us/i/23206794.png/
• http://img229.imageshack.us/i/65917762.png/

---

Solution:

<my:DataGrid.Resources>
    <Style x:Key="addHeader" TargetType="{x:Type myp:DataGridColumnHeader}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type myp:DataGridColumnHeader}">
                    <Button ToolTip="Add New Template" Name="AddNewTemplate" Click="AddNewTemplate_Click" Margin="4">
                        <Image Source="../Resources/add.png"/>
                    </Button>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</my:DataGrid.Resources>
<my:DataGrid.Columns>
    <my:DataGridTemplateColumn HeaderStyle="{StaticResource addHeader}">
        <my:DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <Button ToolTip="Edit Template" Name="EditTemplate" Click="EditTemplate_Click" Tag="{Binding}">
                    <Image Source="../Resources/pencil.png"/>
                </Button>
            </DataTemplate>
        </my:DataGridTemplateColumn.CellTemplate>
    </my:DataGridTemplateColumn>
</my:DataGrid.Columns>

Answer 1

Snoop to the rescue!

Now that you updated the question I found an interesting code in the DataGridHeaderBorder.cs:

   protected override Size ArrangeOverride(Size arrangeSize)
   {
     //...
     if (padding.Equals(new Thickness()))
     {
       padding = DefaultPadding;
     }
     //...
     child.Arrange(new Rect(padding.Left, padding.Top, childWidth, childHeight));
   }

Where DefaultPadding isn’t 0… Even though they don’t use standard Padding they arrange the child slightly moved.

How to fix this? Maybe writing your own template for the table header will do the trick. Or you could try negative margins for the image. Don’t like neither of this approaches. But I can’t find anything better yet.