WPF DataGrid Style

Introduction

Here in this article, we will see the code example to WPF Datagrid design by styling its column, row and cell using style class in both XAML and c# code.

We also see examples of how to add datagridcolumn (WPF datagridtextcolumn, WPF Datagrid button column, Datagrid template column, etc) and rows using XAML and C# code at runtime.

Getting Started

Here we will see the code examples in XAML and C# of how to create a DataGridColumn, style column header, design cell and row baground and foreground at run time with Styles and Triggers.

Normally at design time when we create a DataGrid, we also create the required columns or set the autogenerated column property of the DataGrid to true to create automatically generate the columns based on the bound item source.

Suppose you need to create a DataGrid without knowing how many columns you to need to create and you don't know the names of the columns with their binding value and other properties like cell background color and so on.

In the preceding case, this article will help you. This article creates a DatagridColumn at runtime having other properties, like header, cell style, Trigger, and so on.

In this article we will learn the following points:

1. Creating a Datagrid Column at runtime and assign to DataGrid.
2. Binding properties with Datagrid column to display a property value in the Datagrid cell.
3. Add style to the cell.
4. Add style to row.
5. Change the selected row style.

Add columns to Datagrid at design time

 <DataGrid x:Name="dgvRates">   
 <DataGrid.Columns >   
   <DataGridTextColumn Binding="{Binding Path=xyz, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Header=" XYZ " MinWidth="110">   
   </DataGridTextColumn>   
 </DataGrid>  

Add columns to Datagrid at run time

To create a DataGridColumn at run time you will require the following namespaces. These namespaces help to create controls, binding (required to bind a property with a DataGrid cell), Styles, Triggers and so on.

 System.Windows.Controls  
 System.Windows.Data  
 System.Windows   
 //creates object of datagridtextcolum class   
 DataGridTextColumn dataGridTextColumn = new DataGridTextColumn();   
    
 // sets header name   
 dataGridTextColumn.Header = “XYZ”;   
    
 //creates object of binding class , accepts name of property as parameter , whose value to be display   
 Binding binding = new Binding(“PropertyName”);   
 // sets binding mode   
 binding.Mode = BindingMode.TwoWay;    
    
 // sets how trigger to be fired.   
 binding.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged;    
    
 // assigned the object of binding class to object of datagridtextcolumn class;   
 dataGridTextColumn.Binding = binding;    
    
 // added created column into column list of datagrid (dgvRates);   
 dgvRates.Columns.Add(dataGridTextColumn);    
   

In the above code “dgvRates” is the instance name of WPF Datagrid in my project.

WPF DataGrid Header Style

The below XAML code changes the column header style. The header text will display in the center of the column in bold.

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

WPF DataGrid Cell Style at design time

The following XAML code changes cell badground and foreground color.

 <DataGridTextColumn.CellStyle>   
    <Style TargetType="{x:Type DataGridCell}">                 
         <Setter Property="Background" Value="{Binding Brushes.Red}" />   
          <Setter Property=" Foreground " Value="{Binding Brushes.White}" />   
    </Style>   
  </DataGridTextColumn.CellStyle>  

WPF DataGrid Cell Style at run time

To add the cell style at runtime as in the preceding XAML code, you will need to use the style and setter class that comes under the System.Windows namespace. This class will help you to set the background, font style and Add trigger, and so on. A style consists of a list of setters. If you apply this style to an element it sets all properties with the specified values. The idea is quite similar to Cascading Styles Sheets (CSS) that we are familiar with from web development. The following code accomplishes the same thing that is specified in the preceding XAML code.

 Style style = new Style(); // creates object of style class   
     style.TargetType = typeof(DataGridCell); sets target type as DataGrid cell   
     Setter setterBackground = new Setter(); // create objects of setter class   
       setterBackground.Property = DataGridCell.BackgroundProperty;   
       setterBackground.Value = Brushes.Green;   
       style.Setters.Add(setterBackground);   
     dataGridTextColumn.CellStyle = style;   

WPF Datagrid Cell Style based on Condition

sometimes we need to change the cell background and foreground color based on the binding value. These types of requirements are coming in like trading applications or projects. you can change the background color by sing Cell Style and Triggers. this blog shows the code for the same.

 <DataGridTextColumn.CellStyle>  
  <Style TargetType="{x:Type DataGridCell}">  
      <Style.Triggers>  
       <DataTrigger Binding="{Binding ColorBIDQty, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Value="1">  
        <Setter Property="Background" Value="Green" />  
       </DataTrigger>  
       <DataTrigger Binding="{Binding ColorBIDQty, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Value="2">  
        <Setter Property="Background" Value="Black" />  
       </DataTrigger>  
       <DataTrigger Binding="{Binding ColorBIDQty, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Value="3">  
        <Setter Property="Background" Value="Red" />  
       </DataTrigger>  
      </Style.Triggers>  
  </Style>  
 </DataGridTextColumn.CellStyle>  

In the above code when binding value like ColorBIDQty is equal to 1 then the background color will be Green, when 2 the cell background color will be Black and cell background color will be Red when ColorBIDQty is 3

WPF Datagrid Row Style

The below code describes how to change selected row background and foreground color using XML in WPF.

 <DataGrid.RowStyle>  
  <Style TargetType="{x:Type DataGridRow}">  
      <Setter Property="FontSize" Value="14"/>  
      <Setter Property="FontFamily" Value="Arial"/>  
      <Setter Property="FontWeight" Value="Bold"/>  
      <Setter Property="Foreground" Value="White"/>  
      <Setter Property="Background" Value="Black"/>  
  </Style>  
 </DataGrid.RowStyle>  
 </DataGrid>     

WPF Datagrid Selected Row

 <DataGrid.RowStyle>  
 <Style TargetType="{x:Type DataGridRow}">  
      <Style.Triggers>  
       <Trigger Property="IsSelected" Value="True">  
        <Setter Property="Foreground" Value="Red"/>  
        <Setter Property="Background" Value="Blue" />  
       </Trigger>  
      </Style.Triggers>  
 </Style>  
 </DataGrid.RowStyle>  

Summary

In the above of this article, we learn how to add columns to WPF Datagrid at run time and design time, styling datagrid cell, row and header. I hope you have enjoyed it a lot.

Thanks