WPF datagrid header/data align issues

Question

There is a WPF Datagrid, with nothing special with it. It has sometimes HeadersVisibility All/Row, depends on the usage in our code. But regardless of the header style, it has alignment issues. Neither the header/data text are aligned properly, nor the first headers in the top-left corner, 1 pixel is missing here. I attach a picture to be more visible.

enter image description here

This really looks unprofessional and amateur. The text align is much worse than the top-left corner, so if I could fix that it would already be a big improvement.

Vertical: as I see, the row header texts are aligned properly to the center, unlike the data which is a bit above.

Horizontal: here does not matter which one is aligned to which (header<>data), but at least they should be in-line.

Thanks

EDIT The XAML part:

<dg2d:DataGrid2DT.CellStyle>
    <Style TargetType="wpftoolkit:DataGridCell">
            <Setter Property="TextBlock.VerticalAlignment" Value="Stretch"/>
            <Setter Property="TextBlock.HorizontalAlignment" Value="Stretch"/>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="LightBlue"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</dg2d:DataGrid2DT.CellStyle>

I tried to add <Setter Property="TextBlock.Padding" Value="5, 5, 0, 0" /> but this had no effect. Just for try I added <Setter Property="TextBlock.TextAlignment" Value="Right" /> - this works fine. Only paddig does nothing. Maybe cell is too small for padding?

EDIT2

If I set VerticalAlignment to "Center" Textblock is put to the center of the cell. With this the text is more or less in the center, but not good, as textblock is not filling the cell anymore. I want the textblock to fill the cell, and have the text vertically centered. Using "Padding" should solve my problem, but it has no effect.

enter image description here

Have you tried to set the `VerticalAlingment` and/or 'HorizontalAlignment' of the content-control of your rowheader or column-header. You can also try to set them on your Cell — Tomtom, Jul 03 '15 at 10:24
But the alignment issue is not with the row or column header, but with the data cell. See the screenshot, header text is well-aligned, unlike the data cell. — Zoli, Jul 07 '15 at 07:31

score 1 · Answer 1 · answered Jul 07 '15 at 08:34

1

You can center the text in your DataGridColumn like:

<DataGridTemplateColumn Header="1">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Item1Property}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

answered Jul 07 '15 at 08:34

Tomtom

9,087
7
52
95

Cells are not defined in the XAML. I think they are generated dynamically in the code. (sorry, this is not my code, I am just taking over, and I am not familiar with wpf) – Zoli Jul 08 '15 at 08:04
I have this in the XAML which contains DataTemplate: `` `` `` `` `` – Zoli Jul 08 '15 at 08:06
In the xaml I only see a `DataTemplate` for the RowHeader and not for a spezific column. I thought the columns are your problem??? – Tomtom Jul 08 '15 at 08:26
My problem is that cell text is neither vertically aligned with the row header text, nor horizontally with the column header text. See the image above, and see the red lines are not continuous. – Zoli Jul 08 '15 at 13:59
There is also an event handler of `AutoGeneratingColumn` , here the `column.Binding.Path` is set. – Zoli Jul 08 '15 at 15:46
Edited the question...see the end – Zoli Jul 08 '15 at 17:32

score 0 · Accepted Answer · edited May 23 '17 at 12:14

I found the solution, by using Padding I can align the cell text to be inline with the header texts. However, as I mentioned, using simple Padding or TextBlock.Padding does not work, you need a "trick", I found it here: Set a padding on dataGridCells in WPF

<dg2d:DataGrid2DT.CellStyle>
    <Style TargetType="wpftoolkit:DataGridCell">
        <Setter Property="TextBlock.VerticalAlignment" Value="Stretch"/>
        <Setter Property="TextBlock.HorizontalAlignment" Value="Stretch"/>

--> solution
        <Setter Property="Padding" Value="2,2,0,0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type wpftoolkit:DataGridCell}">
                    <Border Padding="{TemplateBinding Padding}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                        <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
<-- solution

        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="LightBlue"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</dg2d:DataGrid2DT.CellStyle>

WPF datagrid header/data align issues

2 Answers2