fix(DataGrid): Center DataGridCell-Content by default

[corvinsz]

fixes #3999

Problem

MaterialDesignDataGridCell's ControlTemplate doesn't forward HorizontalContentAlignment/VerticalContentAlignment to its ContentPresenter, so setting those properties has no effect. As a workaround, users set VerticalAlignment="Center" on the cell itself instead:

<DataGrid.CellStyle>
  <Style TargetType="DataGridCell" BasedOn="{StaticResource MaterialDesignDataGridCell}">
    <Setter Property="VerticalAlignment" Value="Center" />
  </Style>
</DataGrid.CellStyle>

This centers the cell itself rather than its content - so when RowHeight is taller than the cell's desired height, the cell no longer stretches to fill the row. That leaves a gap above and below each cell, which appears as duplicate horizontal gridlines when GridLinesVisibility includes Horizontal.

Fix

Bind HorizontalAlignment/VerticalAlignment on the ContentPresenter to HorizontalContentAlignment/VerticalContentAlignment via TemplateBinding. With that in place, VerticalContentAlignment="Center" centers the content while the cell itself still stretches to fill the row, so there's no gap and no duplicate gridlines.

Testing

I wasn't sure how to reasonably cover this with an automated test, so I added an example to the demo app instead. Happy to open a follow-up PR to bring this example into the MD3 demo app and consolidate view models.

Current default behavior

Current default behavior with the DataGridCell style below applied

<DataGrid.CellStyle>
  <Style TargetType="DataGridCell" BasedOn="{StaticResource MaterialDesignDataGridCell}">
    <Setter Property="VerticalAlignment" Value="Center" />
  </Style>
</DataGrid.CellStyle>

New default behavior

[corvinsz]

this was partially addressed in PR #4069. However, the style did not define a default value for VerticalContentAlignment, so consumers still needed to add the following setter themselves to achieve the intended behavior:

<Setter Property="VerticalContentAlignment" Value="Center" />