How To Change The Column Alignment In WPF Datagrid?

Updated on Dec 12, 2025

This example illustrates how to align a column content in WPF DataGrid (SfDataGrid).

DataGrid provides the support to change the content alignment, background color, foreground color, border and font for GridColumn.

Column header alignment

You can change the column header's horizontal alignment using HorizontalHeaderContentAlignment property.

<syncfusion:SfDataGrid  x:Name="dataGrid" 
                        AutoGenerateColumns="False"
                        ItemsSource="{Binding Orders}">
    <syncfusion:SfDataGrid.Columns>
        <syncfusion:GridTextColumn MappingName="OrderID" 
                                   HeaderText="Order ID"
                                   HorizontalHeaderContentAlignment="Left"/>
        <syncfusion:GridTextColumn MappingName="CustomerID" 
                                   HeaderText="Customer ID"
                                   HorizontalHeaderContentAlignment="Center"/>
        <syncfusion:GridTextColumn MappingName="CustomerName" 
                                   HeaderText="Customer Name"
                                   HorizontalHeaderContentAlignment="Center"/>
        <syncfusion:GridTextColumn MappingName="Country" 
                                   HeaderText="Country"
                                   HorizontalHeaderContentAlignment="Center"/>
        <syncfusion:GridTextColumn MappingName="ShipCity" 
                                   HeaderText="Ship City"
                                   HorizontalHeaderContentAlignment="Right"/>
    </syncfusion:SfDataGrid.Columns>

</syncfusion:SfDataGrid>

Modified column header alignment using HorizontalHeaderContentAlignment property

You can also change the column header’s horizontal alignment when columns are auto generated. It can be done by using the AutoGeneratingColumn event.

this.dataGrid.AutoGeneratingColumn += DataGrid_AutoGeneratingColumn;

private void DataGrid_AutoGeneratingColumn(object sender, Syncfusion.UI.Xaml.Grid.AutoGeneratingColumnArgs e)
{
    e.Column.HorizontalHeaderContentAlignment = HorizontalAlignment.Center;
}

Modified the column header alignment using the HorizontalHeaderContentAlignment property using AutoGeneratingColumn

Column alignment

You can change the content alignment in both horizontal and vertical direction of GridColumn using TextAlignment and VerticalAlignment properties.

<syncfusion:SfDataGrid  x:Name="dataGrid" 
                        AutoGenerateColumns="False"
                        ItemsSource="{Binding Orders}">
    <syncfusion:SfDataGrid.Columns>
        <syncfusion:GridTextColumn MappingName="OrderID" 
                                   HeaderText="Order ID"
                                   TextAlignment="Left"  
                                   VerticalAlignment="Center"/>
        <syncfusion:GridTextColumn MappingName="CustomerID" 
                                   HeaderText="Customer ID"
                                   TextAlignment="Center"  
                                   VerticalAlignment="Center"/>
        <syncfusion:GridTextColumn MappingName="CustomerName" 
                                   HeaderText="Customer Name"
                                   TextAlignment="Center"  
                                   VerticalAlignment="Center"/>
        <syncfusion:GridTextColumn MappingName="Country" 
                                   HeaderText="Country"
                                   TextAlignment="Center"  
                                   VerticalAlignment="Center"/>
        <syncfusion:GridTextColumn MappingName="ShipCity" 
                                   HeaderText="Ship City"
                                   TextAlignment="Right"  
                                   VerticalAlignment="Center"/>
    </syncfusion:SfDataGrid.Columns>

</syncfusion:SfDataGrid>

Modified column alignment using TextAlignment and VerticalAlignment

You can also change the content alignment of columns when they are auto generated. It can be done by using the AutoGeneratingColumn event.

this.dataGrid.AutoGeneratingColumn += DataGrid_AutoGeneratingColumn;

private void DataGrid_AutoGeneratingColumn(object sender, Syncfusion.UI.Xaml.Grid.AutoGeneratingColumnArgs e)
{
       e.Column.TextAlignment = TextAlignment.Center;
       e.Column.VerticalAlignment = VerticalAlignment.Center;
}

Modified column alignment using TextAlignment and VerticalAlignment using AutoGeneratingColumn

Column styling

You can customize the appearance of GridColumn by using the GridColumn.CellStyle property. You can customize the background, foreground, border and font. DataGrid also support to customize entire column and it can be done by using SfDataGrid.CellStyle property.

<syncfusion:SfDataGrid  x:Name="dataGrid" 
                        AutoGenerateColumns="False"
                        ItemsSource="{Binding Orders}">
    <syncfusion:SfDataGrid.Columns>
        <syncfusion:GridTextColumn MappingName="OrderID" 
                                   HeaderText="Order ID">
            <syncfusion:GridTextColumn.CellStyle>
                <Style TargetType="syncfusion:GridCell">
                    <Setter Property="Background" Value="Bisque" />
                    <Setter Property="Foreground" Value="Green"/>
                </Style>
            </syncfusion:GridTextColumn.CellStyle>
        </syncfusion:GridTextColumn>

        <syncfusion:GridTextColumn MappingName="CustomerID" 
                                   HeaderText="Customer ID"/>
        <syncfusion:GridTextColumn MappingName="CustomerName" 
                                   HeaderText="Customer Name"/>
        <syncfusion:GridTextColumn MappingName="Country" 
                                   HeaderText="Country"/>
        <syncfusion:GridTextColumn MappingName="ShipCity" 
                                   HeaderText="Ship City"/>
    </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>

DataGrid with column styling using CellStyle in XAML

Take a moment to peruse the style customization documentation.

Conditional styling

You can customize the appearance of the GridColumn conditionally based on data in three ways,

Using Converter
Using Style selector
Using Data triggers

Using converter

GridColumn can be customized conditionally by changing its property value based on cell value or data object using converter.

<Window.DataContext>
    <local:ViewModel/>
</Window.DataContext>
<Window.Resources>
   <local:ColorConverter x:Key="converter"/>
</Window.Resources>
<Grid>
    <syncfusion:SfDataGrid  x:Name="dataGrid" 
                            AutoGenerateColumns="False"
                            ItemsSource="{Binding Orders}">
        <syncfusion:SfDataGrid.Columns>
            <syncfusion:GridTextColumn MappingName="OrderID" 
                                       HeaderText="Order ID">
                <syncfusion:GridTextColumn.CellStyle>
                    <Style TargetType="syncfusion:GridCell">
                        <Setter Property="Background" Value="{Binding Path=OrderID,Converter={StaticResource converter}}"/>
                    </Style>
                </syncfusion:GridTextColumn.CellStyle>
            </syncfusion:GridTextColumn>

            <syncfusion:GridTextColumn MappingName="CustomerID" 
                                       HeaderText="Customer ID"/>
            <syncfusion:GridTextColumn MappingName="CustomerName" 
                                       HeaderText="Customer Name"/>
            <syncfusion:GridTextColumn MappingName="Country" 
                                       HeaderText="Country"/>
            <syncfusion:GridTextColumn MappingName="ShipCity" 
                                       HeaderText="Ship City"/>
        </syncfusion:SfDataGrid.Columns>
    </syncfusion:SfDataGrid>
</Grid>

public class ColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        int input = (int)value;
        //custom condition is checked based on data.

        if (input % 2 == 0)
            return new SolidColorBrush(Colors.LightBlue);
        else 
            return new SolidColorBrush(Colors.Bisque);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Customizing cell style using the converter

Using style selector

GridColumn can be customized conditionally based on data by setting SfDataGrid.CellStyleSelector property and the particular column can be customized by setting GridColumn.CellStyleSelector property.

<Application.Resources>
    <local:SelectorClass x:Key="styleSelector"/>
    <Style x:Key="blueCellStyle" TargetType="syncfusion:GridCell">
        <Setter Property="Background" Value="LightBlue" />
    </Style>
    <Style x:Key="bisqueCellStyle" TargetType="syncfusion:GridCell">
        <Setter Property="Background" Value="Bisque" />
    </Style>
</Application.Resources>

<syncfusion:SfDataGrid  x:Name="dataGrid"                          
                         AutoGenerateColumns="True"
                         CellStyleSelector="{StaticResource styleSelector}"
                         ItemsSource="{Binding Orders}">
 </syncfusion:SfDataGrid>

public class SelectorClass : StyleSelector
{
    public override Style SelectStyle(object item, DependencyObject container)
    {
        var data = item as OrderInfo;

        if (data != null && ((container as GridCell).ColumnBase.GridColumn.MappingName == "OrderID"))
        {
            //custom condition is checked based on data.
            if (data.OrderID % 2 == 0)
                return App.Current.Resources["blueCellStyle"] as Style;
            return App.Current.Resources["bisqueCellStyle"] as Style;
        }
        return base.SelectStyle(item, container);
    }
}

Customized the cell style using the CellStyleSelector

Using triggers

GridColumn can be customized by setting Style.Triggers that apply property values based on specified conditions. Multiple conditions can be specified by setting MultiDataTrigger.

<syncfusion:GridTextColumn MappingName="OrderID" 
                           HeaderText="Order ID">
    <syncfusion:GridTextColumn.CellStyle>
        <Style TargetType="syncfusion:GridCell">
            <Style.Triggers>
                <!--Background property set based on cell content-->
                <DataTrigger Binding="{Binding Path=OrderID}" Value="1001">
                    <Setter Property="Background" Value="Bisque" />
                </DataTrigger>
                <!--Background property set based on multiple conditions-->
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Path=OrderID}" Value="1008" />
                        <Condition Binding="{Binding Path=CustomerID}" Value="BOLID" />
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Background" Value="LightBlue" />
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>
    </syncfusion:GridTextColumn.CellStyle>
</syncfusion:GridTextColumn>

Customized the cell style using triggers

You can refer to the user guide to learn more about the DataGrid’s columns feature sets.