UWP Community Toolkit DataGrid control : how to align cell content to right

Question

I have a numeric column in a DataGrid I want its content be right-aligned. I have read the docs, mostly Customizable templates and styling for cells, rows and headers where I ended up with this code to accomplish right-align cell content:

<controls:DataGrid.CellStyle>
    <Style TargetType="controls:DataGridCell">
        <Style.Setters>
            <Setter Property="HorizontalAlignment" Value="Right"/>
        </Style.Setters>
    </Style>
</controls:DataGrid.CellStyle>

As is to be expected, this code really does what I want, but with all the cells. I want only the numeric column to have this property, and only it, but I have been unable to accomplish this.

What am I doing wrong?

score 3 · Answer 1 · answered Sep 24 '19 at 05:22

You have to set the HorizontalContentAlignment instead of HorizontalAlignment because the horizontal alignment changes the cell size. The default Cell HorizontalAlignment is Stretch whis is stretched the cell size to column size.

Here is a picture when you set the HorizontalAlignment

And Here is the picture when you set the HorizontalContentAlignment

Basically You can define three different cell style:

    <Style x:Key="DataGridCellLeft" TargetType="controls:DataGridCell">
        <Setter Property="HorizontalContentAlignment" Value="Left" />
    </Style>
    <Style x:Key="DataGridCellCenter" TargetType="controls:DataGridCell">
        <Setter Property="HorizontalContentAlignment" Value="Center" />
    </Style>
    <Style x:Key="DataGridCellRight" TargetType="controls:DataGridCell">
        <Setter Property="HorizontalContentAlignment" Value="Right" />
    </Style>

Use it like CellStyle when you define a column.

score 0 · Accepted Answer · answered Sep 27 '18 at 06:25

0

I want only the numeric column to have this property, and only it

For your requirement, you could give cell style to specific DataGridTextColumn property like the follow.

<controls:DataGridTextColumn  >
    <controls:DataGridTextColumn.CellStyle>
        <Style TargetType="controls:DataGridCell">
            <Style.Setters>
                <Setter Property="HorizontalAlignment" Value="Right"/>
            </Style.Setters>
        </Style>
    </controls:DataGridTextColumn.CellStyle>
</controls:DataGridTextColumn>

The style will work for specific column.

answered Sep 27 '18 at 06:25

Nico Zhu

32,367
2
15
36

So I need to set `AutoGenerateColumns` to `false` and set `DataGridColumns` to the binded column I need to be right-aligned? – João Santana Sep 27 '18 at 13:17
Yep, you need set specific cell style for DataGridColumns. – Nico Zhu Sep 28 '18 at 01:58

UWP Community Toolkit DataGrid control : how to align cell content to right

2 Answers2