How to adjust DataGrid column with order numbers WPF?

Question

I have such DataGrid

In order to get order number automatically I added in DataGrid method LoadingRow such way

.xalm

...
<DataGrid ItemsSource="{Binding Path=GridItems}"
            HorizontalGridLinesBrush="Gray"
            RowHeaderWidth="20"
            LoadingRow="Dg_main_configuration_LoadingRow"
            CanUserReorderColumns="False"
            CanUserDeleteRows="False"
            CanUserResizeRows="False"
            CanUserSortColumns="False"
            VerticalGridLinesBrush="LightGray"
            x:Name="Dg_main_configuration"
            CanUserResizeColumns="False"
            PreviewMouseLeftButtonUp="Dg_main_configuration_PreviewMouseLeftButtonUp"
            AlternatingRowBackground="LightYellow"
            CanUserAddRows="False"
            MinHeight="350"
            MaxHeight="350"
            Grid.Column="0"
            AutoGenerateColumns="False">
...

and in code

private void Dg_main_configuration_LoadingRow(object sender, DataGridRowEventArgs e)
{
    e.Row.Header = (e.Row.GetIndex() + 1).ToString();
}

All is fine, but anyway I would like to adjust this row column

Problems is :

You can see in screenshot next to Path to clip folder(on the left) there is a cell with a rectangle at the right bottom, acctually it is kind of button(because I can click on it, but nothing changed), how to disable it, or set symbol like #?
Numbers 1, 2, 3, 4 horizontally not in the center, how to fix it?
And last is - you can see that there are a horizontal lines DarkGray that separates rows, but I don't know why numbers doesn't include this separate lines? I mean line starts after number column. How to include separate line in order numbers also?

How about an extra column instead of a row header? Like this: https://stackoverflow.com/a/15061668/1136211 — Clemens, Jan 27 '20 at 12:59
Perhaps just `` with a large AlternationCount value set at the DataGrid. — Clemens, Jan 27 '20 at 13:07
@Clemens it looks like it is works. But how to set alignment (vertical and horizontal)? — Sirop4ik, Jan 27 '20 at 14:00
@Clemens Can you take a look at this question https://stackoverflow.com/q/59933150/5709159 — Sirop4ik, Jan 27 '20 at 14:35
Just set HorizontalAlignment and VerticalAlignment of a TextBlock in the CellTemplate to Center. — Clemens, Jan 27 '20 at 14:41
@Clemens but I don't have `TextBlock` I have a `DataGridTextColumn` and if I set it there like `VerticalAlignment ` , so with an alignment I also get that cell itself shifts — Sirop4ik, Jan 27 '20 at 14:49

score 1 · Accepted Answer · answered Jan 27 '20 at 14:52

You could display the row number in a column, for example using the approach mentioned here.

You could then use an ElementStyle to center the TextBlock:

<DataGridTextColumn Binding="{Binding RelativeSource={RelativeSource AncestorType=DataGridRow}, 
                        Converter={local:RowToIndexConverter}}">
    <DataGridTextColumn.ElementStyle>
        <Style TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
    </DataGridTextColumn.ElementStyle>
</DataGridTextColumn>

score 0 · Answer 2 · answered Jan 27 '20 at 13:46

For point 2 (and may also get you understand more about point 3). A DataGrid can have a RowHeaderTemplate (or an even more general RowHeaderStyle) which would be applied to each row header value (that you set in code). Here is a related question.

For point 1 (and also for point 2 for the default row header template, and point 3) I suggest you to look at Microsoft's default DataGrid styles and templates. You might need to set the entire DataGrid template to change the top-left part (or try having a resource with key {ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly={x:Type DataGrid}}) - that is the DataGridSelectAllButtonStyle, which supposedly is a button that would select all rows if the rows can be selected in the data grid.

For point 3, to set up the horizontal grid lines to a different color (e.g. matching row headers' separator) use HorizontalGridLinesBrush property.

How to adjust DataGrid column with order numbers WPF?

2 Answers2