WPF DataGrid HeaderTemplate神秘填充 [英] WPF DataGrid HeaderTemplate Mysterious Padding

问题描述

我在DataGrid的列的标题中放置一个带有图像的单个按钮。单元格模板也只是一个带有图像的简单按钮。

 < my：DataGridTemplateColumn> 
< my：DataGridTemplateColumn.HeaderTemplate> 
< DataTemplate> 
< Button ToolTip =添加新模板Name =AddNewTemplateClick =AddNewTemplate_Click> 
< Image Source =../ Resources / add.png/> 
< / Button> 
< / DataTemplate> 
< / my：DataGridTemplateColumn.HeaderTemplate> 
< my：DataGridTemplateColumn.CellTemplate> 
< DataTemplate> 
< Button ToolTip =编辑模板Name =EditTemplateClick =EditTemplate_ClickTag ={Binding}> 
< Image Source =../ Resources / pencil.png/> 
< / Button> 
< / DataTemplate> 
< / my：DataGridTemplateColumn.CellTemplate> 
< / my：DataGridTemplateColumn> 
  

当渲染时，标题在右侧大约有10-15px的填充，这会导致单元格以明显地以该宽度渲染，留下单元按钮在两侧具有空的空间。作为像素完美主义者，这使我失望了。我最初以为这是在排序时显示的箭头的空间，但是我在整个DataGrid上都显示了排序功能，并且在列上显式排列。

这是一个图像：
http://img716.imageshack.us/img716/1787/68487749.png

我假设这是从按钮的父元素的任何填充。有没有人知道消除它的方法？

---

请参阅：

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


• http： //img229.imageshack.us/i/65917762.png/

---

解决方案：

 < my：DataGrid.Resources> 
< Style x：Key =addHeaderTargetType ={x：Type myp：DataGridColumnHeader}> 
< Setter Property =Template> 
< Setter.Value> 
< ControlTemplate TargetType ={x：Type myp：DataGridColumnHeader}> 
< Button ToolTip =添加新模板Name =AddNewTemplateClick =AddNewTemplate_ClickMargin =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 =编辑模板Name =EditTemplateClick =EditTemplate_ClickTag ={Binding}> 
< Image Source =../ Resources / pencil.png/> 
< / Button> 
< / DataTemplate> 
< / my：DataGridTemplateColumn.CellTemplate> 
< / my：DataGridTemplateColumn> 
< / my：DataGrid.Columns> 
  

解决方案

Snoop 拯救！

现在，您更新了这个问题，我发现一个有趣的代码在< a href =http://wpf.codeplex.com/SourceControl/changeset/view/40156#329392 =nofollow noreferrer> 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））; 
} 
  

其中DefaultPadding不是0 ...即使他们不使用标准Padding他们安排孩子稍微移动。

如何解决这个问题？也许为表头编写自己的模板会做到这一点。或者您可以尝试图像的负边距。不喜欢这两种方法。但是我找不到更好的东西。

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>

解决方案

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.

这篇关于WPF DataGrid HeaderTemplate神秘填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！