WPF DataGrid centering columns messes up MahApps styling

Question

I have a DataGrid that I am using the MahApps styles on. I have a column that needs to be centered; each time I create a style the cells associated with that column look differently when selected.

The following is my DataGrid XAML.

<DataGrid ItemsSource="{Binding Path=DiariesForSelectedProject}"
            AutoGenerateColumns="False"
            HorizontalContentAlignment="Center"
            HorizontalAlignment="Stretch">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Number"
                            Binding="{Binding Path=Number}"
                            Width="Auto"
                            IsReadOnly="True" >
            <DataGridTextColumn.CellStyle>
                <Style>
                    <Setter Property="FrameworkElement.HorizontalAlignment"
                            Value="Center" />
                </Style>
            </DataGridTextColumn.CellStyle>
        </DataGridTextColumn>
        <DataGridTextColumn Header="Date"
                            Binding="{Binding Path=Date, StringFormat=d}" 
                            Width="Auto" 
                            IsReadOnly="True"/>
        <DataGridTextColumn Header="Inspector"
                            Binding="{Binding Path=Inspector}" 
                            Width="Auto"
                            IsReadOnly="True" />
        <DataGridTextColumn Header="Diary Status"
                            Binding="{Binding Path=Status}"
                            Width="Auto"
                            IsReadOnly="True" />
    </DataGrid.Columns>

    <DataGrid.ItemContainerStyle>
        <Style TargetType="DataGridRow">
            <Style.Triggers>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Path=IsOwner}"
                                    Value="True" />
                        <Condition Binding="{Binding Path=Status}"
                                    Value="Supervisor Returned" />
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Foreground"
                            Value="White" />
                    <Setter Property="Background"
                            Value="Red" />
                </MultiDataTrigger>

                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Path=IsOwner}"
                                    Value="True" />
                        <Condition Binding="{Binding Path=Status}"
                                    Value="Office Returned" />
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Foreground"
                            Value="White" />
                    <Setter Property="Background"
                            Value="Red" />
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>
    </DataGrid.ItemContainerStyle>
</DataGrid>

Instead of using the CellStyle I have above, I have also tried the following:

<Style x:Key="DataGridColumnHeaderDataGridCellStyle"
       TargetType="{x:Type DataGridCell}" 
       BasedOn="{StaticResource {x:Type DataGridCell}}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridCell}">
                <Grid Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="Center" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And then referenced that style for my cell. However, the end result is the same both times. The column is centered, but the DataGrid cell has a different appearance when the row is selected.

Can someone help me out with how to properly center a column and not mess up the MahApps style?

Thanks!

Answer 1

I resolved this using XAMLSpy and looking at the row. It turns out that the background color was being reset on each cell that the style was applied to. In order to resolve it, I just wrapped the content presenter in a grid and set the background color to transparent.

<Style x:Key="DataGridColumnHeaderDataGridCellStyle"
       TargetType="{x:Type DataGridCell}" 
       BasedOn="{StaticResource {x:Type DataGridCell}}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridCell}">
                <Grid Background="Transparent">
                    <ContentPresenter HorizontalAlignment="Center" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>