How to make center column text in datagrid WPF?

Question

I have wpf datagrid with many columns in my datagrid..

<DataGrid.Columns>
           ...

            <mui:DataGridTextColumn x:Name="Column27" Width="50"  Header="Cabe" Binding="{Binding B4R27,UpdateSourceTrigger=PropertyChanged ,Converter={StaticResource CheckConverter}, Mode=TwoWay}" />
            <mui:DataGridTextColumn IsReadOnly="True" x:Name="Column28" Width="50"  Header="Jumlah Bahan Pokok" Binding="{Binding B4RJ,UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" >
                <DataGridTextColumn.CellStyle>
                    <Style TargetType="DataGridCell">
                        <Setter Property="Background" Value="#A2D1A2" />
                        <Setter Property="HorizontalAlignment" Value="Stretch" />
                    </Style>
                </DataGridTextColumn.CellStyle>

                <DataGridTextColumn.ElementStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="TextAlignment" Value="Center" />
                    </Style>
                </DataGridTextColumn.ElementStyle>

            </mui:DataGridTextColumn>
            <mui:DataGridTextColumn x:Name="Column29" Width="150"   Header="Tulis Nama Pengusaha" Binding="{Binding B4R28,UpdateSourceTrigger=PropertyChanged , Mode=TwoWay}" />
            <mui:DataGridTextColumn x:Name="Column30" Width="130"    Header="Tulis Alamat Lengkap" Binding="{Binding B4R29,UpdateSourceTrigger=PropertyChanged , Mode=TwoWay}" />
        </DataGrid.Columns>

I can make center my text in datagrid using this style with this code above

     <DataGridTextColumn.ElementStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="TextAlignment" Value="Center" />
                    </Style>
            </DataGridTextColumn.ElementStyle>

But I want it in all my columns datagridtextcolumn in my datagrid. How I can make it like style so all my datagridtextcolumn has the same centered alignment text?

Answer 1

Try this Style for DataGridColumnHeader:

<DataGrid.Resources>
    <Style TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="HorizontalContentAlignment" Value="Center" />
    </Style>
</DataGrid.Resources>

You can also put him in ColumnHeaderStyle:

<DataGrid.ColumnHeaderStyle>
    <Style TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="HorizontalContentAlignment" Value="Center" />
    </Style>
</DataGrid.ColumnHeaderStyle>

If you have the current Style for DataGridColumnHeader, then you need to use the style inheritance using BasedOn like this:

<Style BasedOn="{StaticResource {x:Type DataGridColumnHeader}}" <--- Here may also be the key of your Style
       TargetType="{x:Type DataGridColumnHeader}">

    <Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>

If you want set content of DataGridCell to center, then use this Style:

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