I put one button with an image in the header of the DataGrid column. 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 rendering, the header has approximately 10-15px indentation only on the right side, which forces the cells to obviously display at this width, leaving the cell button with blank space on both sides. Being a pixel perfectionist, it annoys me. Initially, I thought it was a space for arrows displayed during sorting, but I have disabled sorting both across the entire DataGrid and explicitly in the column.
Here is the image:
http://img716.imageshack.us/img716/1787/68487749.png
, . - ?
:
:
<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>