How to change the column alignment in WPF DataGrid?

3 mins read

WPF DataGrid (SfDataGrid) 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>

Column header content alignment for manual generation.

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;
}

Column header content alignment for auto generation.

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>

Column content alignment for manual generation.

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;
 }

Column content alignment for auto generation.

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>

Styles for GridColumn

You can refer the user guide for more customization.

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();
     }
 }

Conditional styling using 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);
    }
}

Conditional styling using converter

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>

Conditional styling using triggers

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

Please refer this link to know about the essential features of Syncfusion WPF DataGrid.

View WPF DataGrid Alignment Demo in GitHub.

Conclusion

I hope you enjoyed learning about how to change the column alignment in WPF DataGrid (SfDataGrid).

You can refer to our WPF DataGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF DataGrid example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)