Styles and Templates

WinRT Styles and Templates refer to a suite of features (styles and templates) that allow developers and designers to create visually compelling effects and consistent appearance for their products.

Overview

This section elaborates the information about changing the visual appearance of the SfDataGrid and its elements. In addition, you can edit the styles of SfDataGrid and its elements using Expression Blend that helps you to customize their appearance. This section includes the following topics:

  • Visual Elements
  • Blend Style Editing
  • Styling Cells
  • Styling Rows
  • Style Selectors
  • Header Template
  • Template Selectors
  • Conditional Formatting for Cells
  • Alternating Row Style

Visual Elements

The following screenshot displays the elements present in the SfDataGrid.

SfDataGrid comprises of the following elements:

  • GridCell- Displays the data in cell corresponding to the column.
  • GridHeaderCellControl- Displays the column name, Sort indication and Filter funnel.
  • GridStackedHeaderCellControl- Displays the Stacked header informations.
  • GridCaptionSummaryCell- Displays the group caption and caption summary value.
  • GridTableSummaryCell- Displays the table summary values.
  • GridGroupSummaryCell- Displays the group summary values.
  • HeaderRowControl - Container for GridHeaderCellControl and

GridStackedHeaderCellControl collection.

  • VirtualizingCellsControl - Container for GridCell control Collection
  • TableSummaryRowControl - Container for Collection of GridTableSummaryCell.

  • CaptionSummaryRowControl - Represents the Group Row header. Container for

    GridCaptionSummaryCell.
  • GroupSummaryRowControl-Container for collection of GridGroupSummaryCell.
  • GroupDropArea - Shows grouped columns in the SfDataGrid control.
  • GroupDropAreaItem- Represents the grouped columns in GroupDropArea.

Blend Style Editing

SfDataGrid allows you to edit the styles of SfDataGrid and its elements in Expression blend, as your requirement.

Edit SfDataGrid Style in Expression Blend

The section explains you how to edit a SfDataGrid style in ExpressionBlend. To Edit the control template in ExpressionBlend follow the steps,

  • Open your application in Expression Blend.
  • In Object and Timeline Pane select SfDataGrid control.

  • From the menu bar select Object > EditTemplate

  • You can see two options in submenu,
  • Edit a Copy –Edits a copy of the default style. When you select this option, a new dialog window is opened as follows.

The Create ControlTemplate Resources dialog prompts you to enter the name or change the name for your template; also you can select the location where your template is defined.

  • Create Empty- Creates an empty style for the SfDataGrid. When you select this option, the same Create ControlTemplate Resources dialog is opened. You can enter the name or change the name of template and select the location for the template.

Click OK, Expression Blend generates the empty style of the SfDataGrid control in the Resource section. You can edit the generated XAML in the XAML view or in VisualStudio.

Edit SfDataGrid Elements in Expression Blend

You can also edit the SfDataGrid elements in ExpressionBlend. To edit the SfDataGrid elements in ExpressionBlend follow the steps,

  • Open your application in ExpressionBlend.
  • In Object and Timeline Pane, Select SfDataGrid control.

  • From menu bar select the Object > Edit AdditionalStyle

  • You can select the available SfDataGrid element style. When you select Creates an empty style for the SfDataGrid,Create Style Resources dialog is opened. You can enter the name or change the name of style and select the location for style.

Click OK, Expression Blend generates the Empty style of the GridCell in the Resource section. You can also edit the generated XAML in the XAML view or in VisualStudio.

You can also edit the style of the following SfDataGrid elements in Expression Blend.

  • CaptionSummaryCellStyle.
  • CaptionSummaryRowStyle.
  • FilterPopupStyle.
  • FilterPopupTemplate.
  • GroupSummaryCellStyle.
  • GroupSummaryRowStyle.
  • HeaderStyle
  • HeaderTemplate
  • RowStyle
  • TableSummaryCellStyle
  • TableSummaryRowStyle.

Styling Cells

SfDataGrid control offers the following properties to apply custom styling for cells.

Property Description Target Element Type DataContext
SfDataGrid.CellStyle,GridColumn.CellStyle Applies styles to GridCell GridCell Business object
SfDataGrid.CaptionSummaryCellStyle Applies styles to Group Caption Summary Cell GridCaptionSummaryCell Group
SfDataGrid.GroupSummaryCellStyle Applies styles to Group Summary Cell GridGroupSummaryCell SummaryRecordEntry
SfDataGrid.TableSummaryCellStyle Applies styles to Table Summary Cell GridTableSummaryCell SummaryRecordEntry
SfDataGrid.HeaderStyle,GridColumn.HeaderStyle Applies styles to Column Header GridHeaderCellControl Null

SfDataGrid.CellStyle

SfDataGrid displays all the column values in cells. GridCell is base type for all the cells in the SfDataGrid. These cells are styled by creating appropriate style for the cells and setting that to SfDataGrid.CellStyle property.

The following code example illustrates applying styles for cells.

  • xaml
    • <!--  Grid Cell Style  -->

<Page.Resources>

<Style x:Key="customCellStyle"  TargetType="syncfusion:GridCell">

<Setter Property="BorderBrush" Value="#FF7fd0de" />

<Setter Property="BorderThickness" Value="0,0,0,1" />

<Setter Property="Padding" Value="10,0,0,0" />

<Setter Property="FontFamily" Value=" Segoe UI" />

<Setter Property="Foreground" Value="#FF2A2A2A" />

<Setter Property="FontSize" Value="16" />

</Style>

</Page.Resources>

<syncfusion:SfDataGrid  x:Name="datagrid" 

                        ItemsSource="{Binding ItemsSource}"

                        CellStyle="{StaticResource customCellStyle}" />

    NOTE

    SfDataGrid control also allows you to apply the style for the cells in the particular column by using GridColumn.CellStyle property.

    SfDataGrid.CaptionSummaryCellStyle

    Group caption row displays the data i.e. Group caption text and caption summary values in GridCaptionSummaryCell. You can apply custom style for GridCaptionSummaryCell using this property.

    The following code example illustrates this.

  • xaml
    • <Page.Resources>

<Style x:Key="captionSummaryCellStyle" TargetType="syncfusion:GridCaptionSummaryCell">

<Setter Property="BorderBrush" Value="#FF7fd0de" />

<Setter Property="FontWeight" Value="Normal" />

<Setter Property="Background" Value="Yellow" />

</Style>

</Page.Resources>



<syncfusion:SfDataGrid   x:Name="datagrid" 

                           AllowSorting="True"           

                           CaptionSummaryCellStyle="{StaticResource captionSummaryCellStyle}" 

                           ItemsSource="{Binding OrdersDetails}" />

    SfDataGrid.GroupSummaryCellStyle

    GroupSummary row displays all the summary values in GroupSummaryCells. You can apply the style for GroupSummaryCell using this property. The following code example illustrates this.

  • xaml
    • <Page.Resources>

<Style x:Key="groupSummaryCellStyle" TargetType="syncfusion:GridGroupSummaryCell">

<Setter Property="BorderBrush" Value="#FF7fd0de" />

<Setter Property="FontWeight" Value="Normal" />

<Setter Property="Background" Value="Bisque" />

</Style>

</Page.Resources>



<syncfusion:SfDataGrid x:Name="datagrid" 

                         AllowSorting="True"

                         GroupSummaryCellStyle="{StaticResource groupSummaryCellStyle}"

                         ItemsSource="{Binding OrdersDetails}" />

    SfDataGrid.TableSummaryCellStyle

    All the table summary values are displayed in GridTableSummaryCell. SfDataGrid enables you to apply style for GridTableSummaryCell using this property. The following code example illustrates this.

  • xaml
    • <Page.Resources>

<Style x:Key="tableSummaryCellStyle" TargetType="syncfusion:GridTableSummaryCell">

<Setter Property="BorderBrush" Value="#FF7fd0de" />

<Setter Property="FontWeight" Value="Normal" />

<Setter Property="Background" Value="Bisque" />

</Style>

</Page.Resources>



<syncfusion:SfDataGrid x:Name="datagrid" AllowSorting="True"

TableSummaryCellStyle="{StaticResource tableSummaryCellStyle}"

ItemsSource="{Binding OrdersDetails}" />
    • SfDataGrid.HeaderStyle

    SfDataGrid displays the column header in GridHeaderCellControl that displays the column header text and shows the sorting icon when you sort the column. By using this property, you can apply style for GridHeaderCellControl. The following code example illustrates this.

  • xaml
    • <Page.Resources>

<Style x:Key="headerCellStyle" TargetType="syncfusion:GridHeaderCellControl">

<Setter Property="Background" Value="Transparent" />

<Setter Property="BorderBrush" Value="#FFCEE7E7" />

<Setter Property="BorderThickness" Value="0,0,1,0" />

<Setter Property="HorizontalContentAlignment" Value="Left" />

<Setter Property="Padding" Value="10,3,3,3" />

<Setter Property="FontFamily" Value="Segoe UI" />

<Setter Property="FontSize" Value="16" />

<Setter Property="Margin" Value="5,0,0,0" />

<Setter Property="Foreground" Value="#FF5E5B5C" />

<Setter Property="FontWeight" Value="SemiBold" />

</Style>

</Page.Resources>



<syncfusion:SfDataGrid x:Name="datagrid" 

                         AllowSorting="True"

                         HeaderStyle="{StaticResource headerCellStyle}"

                         ItemsSource="{Binding OrdersDetails}">

    Styling Rows

    The SfDataGrid control offers the following properties for Styling the different type of rows in SfDataGrid:

    Property Description Target Element Data Context
    SfDataGrid.RowStyle Applies styles to Rows. VirtualizingCellsControl Business object
    SfDataGrid.AlternatingRowStyle Applies styles for AlternateRow VirtualizingCellsControl Business object
    SfDataGrid.CaptionSummaryRowStyle Applies styles to Caption Summary Rows. CaptionSummaryRowControl Group
    SfDataGrid.GroupSummaryRowStyle Applies styles to Group Summary Rows. GroupSummaryRowControl SummaryRecordEntry
    SfDataGrid.TableSummaryRowStyle Applies styles to Table Summary Rows. TableSummaryRowControl SummaryRecordEntry

    SfDataGrid.RowStyle

    All the rows in the SfDataGrid are of VirtualizingCellsControl type that contains the RowData as data context. SfDataGrid.RowStyle property helps to apply styles for the row.

    The following code example illustrates how to set the row style for SfDataGrid.

  • xaml
    • <Page.Resources>       

<Style x:Key="rowStyle" TargetType="syncfusion:VirtualizingCellsControl">

<Setter Property="Background" Value="Bisque" />

</Style>

<Page.Resources>



<syncfusion:SfDataGrid x:Name="datagrid" 

                         RowStyle="{StaticResource rowStyle}"

                         ItemsSource="{Binding OrdersDetails}" />

    SfDataGrid.AlternatingRowStyle

    The property helps you to apply style for alternate row in SfDataGrid. It is the type of VirtualizingCellsControl that contains the RowData as data context. SfDataGrid.AlternatingRowStyle property helps to apply styles for the alternate row.

    The following code example illustrates how to set the alternate row style for SfDataGrid.

  • xaml
    • <Page.Resources>       

<Style x:Key="AlternateRowStyle" TargetType="syncfusion:VirtualizingCellsControl">

<Setter Property="Background" Value="Bisque" />

</Style>

<Page.Resources>



<syncfusion:SfDataGrid x:Name="datagrid" 

                         AlternatingRowStyle="{StaticResource AlternateRowStyle }"

                         ItemsSource="{Binding OrdersDetails}" />

    SfDataGrid.CaptionSummaryRowStyle

    This property helps to apply styling for Group caption row (refer the visual elements figure). Group caption row is a type of CaptionSummaryRowControl that inherits from VirtualizingCellsControl containing the Group data as DataContext.

    The following code example illustrates applying styles for Group caption row.

  • xaml
    • <Page.Resources>

<Style x:Key="captionSummaryRowStyle" TargetType="syncfusion:CaptionSummaryRowControl">

<Setter Property="Background" Value="Transparent" />

<Setter Property="BorderBrush" Value="#FF7fd0de" />

<Setter Property="BorderThickness" Value="0" />

<Setter Property="Foreground" Value="#FF2A2A2A" />

</Style>

<Page.Resources>



<syncfusion:SfDataGrid x:Name="datagrid" 

                         AllowSorting="True"

                         CaptionSummaryRowStyle="{StaticResource captionSummaryRowStyle}"

                         ItemsSource="{Binding OrdersDetails}">

    SfDataGrid.GroupSummaryRowStyle

    Group summary is displayed at the bottom of all groups when you add GridSummaryRow object to SfDataGrid.GroupSummaryRows collection. You can apply style to them by editing the GroupSummaryRowControl style.

    The following code example illustrates styling of Group Summary rows.

  • xaml
    • <Page.Resources>

<Style x:Key="groupSummaryRowStyle" 

TargetType="syncfusion:GroupSummaryRowControl">

<Setter Property="Background" Value="Transparent" />

<Setter Property="BorderBrush" Value="#FF7fd0de" />

<Setter Property="BorderThickness" Value="0,0,1,1" />

<Setter Property="Foreground" Value="#FF2A2A2A" />

</Style>

<Page.Resources>



<syncfusion:SfDataGrid x:Name="datagrid" 

                         AllowSorting="True"

                         GroupSummaryRowStyle="{StaticResource groupSummaryRowStyle}"

                         ItemsSource="{Binding OrdersDetails}">

    SfDataGrid.TableSummaryRowStyle

    SfDataGrid displays all the Table summary values in TableSummaryRow. By default, table summary row is present at the bottom of SfDataGrid. TableSummaryRow is of a type TableSummaryRowControl. You can apply styling for TableSummaryRowControl by creating custom style and setting that style to SfDataGrid.TableSummaryRowStyle property.

    The following code example displays the styling of TableSummaryRow.

  • xaml
    • <Page.Resources>

<Style x:Key="tableSummaryRowStyle" 

TargetType="syncfusion:TableSummaryRowControl">

<Setter Property="Background" Value="Transparent" />

<Setter Property="BorderBrush" Value="#FF7fd0de" />

<Setter Property="BorderThickness" Value="0,0,1,1" />

<Setter Property="Foreground" Value="#FF2A2A2A" />

</Style>

<Page.Resources>



<syncfusion:SfDataGrid x:Name="datagrid" 

                         AllowSorting="True"

                         TableSummaryRowStyle="{StaticResource tableSummaryRowStyle}"

                         ItemsSource="{Binding OrdersDetails}">

    Style Selectors

    SfDataGrid provides extensive support for StyleSelectors that helps to apply custom style for cells and rows. To know more about the StyleSelectors you can check the following MSDN link: http://msdn.microsoft.com/en-us/library/system.windows.controls.styleselector.aspx.

    NOTE

    By default, Silverlight does not support StyleSelectors hence SfDataGrid too.

    Cell Style Selectors

    SfDataGrid control offers following StyleSelector properties to set the style for cells.

    Property Description Parameters
    Item Container
    SfDataGrid.CellStyleSelector Gets or sets a value that applies the style for GridCell based on a custom condition Corresponding row data. GridCell
    SfDataGrid.CaptionSummaryCellStyleSelector Gets or sets a value that applies the style for GridCaptionSummaryCell based on a custom condition Corresponding row data. GridCaptionSummaryCell
    SfDataGrid.GroupSummaryCellStyleSelector Gets or sets a value that applies the style for GridGroupSummaryCell based on a custom condition Corresponding row data. GridGroupSummaryCell
    SfDataGrid.TableSummaryCellStyleSelector Gets or sets a value that applies the style for GridTableSummaryCell based on a custom condition Corresponding row data. GridTableSummaryCell

    Row Style Selectors

    SfDataGrid also offers following StyleSelector properties for applying styles to rows.

    Property Description Parameters
    Item Container
    SfDataGrid.RowStyleSelector Gets or sets a value that applies the style for VirtualizingCellsControl based on a custom condition DataRowBase VirtualizingCellsControl
    SfDataGrid.AlternatingRowStyleSelector Gets or sets a value that applies the style for VirtualizingCellsControl based on a custom condition DataRowBase VirtualizingCellsControl
    SfDataGrid.CaptionSummaryRowStyleSelector Gets or sets a value that applies the style for CaptionSummaryRowControl based on a custom condition DataRowBase CaptionSummaryRowControl
    SfDataGrid.GroupSummaryRowStyleSelector Gets or sets a value that applies the style for GroupSummaryRowControl based on a custom condition DataRowBase GroupSummaryRowControl
    SfDataGrid.TableSummaryRowStyleSelector Gets or sets a value that applies the style for TableSummaryRowControl based on a custom condition DataRowBase TableSummaryRowControl

    Example

    In the following example, you can set the different row background for SfDataGrid by using SfDataGrid.RowStyleSelector property.

    //Custom Style 

<Application.Resources>

      <Style x:Key="rowStyle1" TargetType="syncfusion:VirtualizingCellsControl">

          <Setter Property="Background" Value="Bisque" />

       </Style>

      <Style x:Key="rowStyle2" TargetType="syncfusion:VirtualizingCellsControl">

          <Setter Property="Background" Value="Aqua" />

      </Style>

</Application.Resources>
    // Custom Style Selector.

public class CustomRowStyleSelector : StyleSelector

{

public override Style SelectStyle(object item, DependencyObject container)

{

var row = item as DataRowBase;

// Applying alternating background for rows.

              if (row.RowIndex % 2 != 0)

                return App.Current.Resources["rowStyle1"] as Style;

              else

  return App.Current.Resources["rowStyle2"] as Style;

return base.SelectStyle (item, container);

}

}
    </Page.Resources>

<local:CustomRowStyleSelector x:Key="rowStyleSelector" />

</Page.Resources>

<syncfusion:SfDataGrid x:Name="datagrid" 

                         AllowSorting="True"

                         RowStyleSelector="{StaticResource rowStyleSelector}"

                         ItemsSource="{Binding OrderInfoCollection}"/>

    The following screenshot displays the output.

    Header Template

    GridColumn.HeaderTemplate

    SfDataGrid provides the extensive support to apply template for column header. By using the following property, you can template the particular column header.

    Property Name Description Data Context
    GridColumn.HeaderTemplate Gets or sets a value that applies template for corresponding column header. Null

    The following code example illustrates how to use HeaderTemplate in SfDataGrid Column.

  • xaml
    • <Page.Resources>

<DataTemplate x:Key="headerTemplate">

<TextBlock Foreground="Red" Text="{Binding}" />

</DataTemplate>

</Page.Resources>



<syncfusion:SfDataGrid x:Name="datagrid" 

                         AutoGenerateColumns="False"

                         ColumnSizer="Star" 

                         ItemsSource="{Binding OrderInfoCollection}">

            <syncfusion:SfDataGrid.Columns>

                <syncfusion:GridTextColumn HeaderTemplate="{StaticResource headerTemplate}" MappingName="OrderID"   />

                <syncfusion:GridTextColumn   MappingName="CustomerID" />                                                                                

                <syncfusion:GridTextColumn MappingName="CustomerName"/>

                <syncfusion:GridTextColumn MappingName="Quantity"/>

                <syncfusion:GridTextColumn MappingName="UnitPrice"/>               

            </syncfusion:SfDataGrid.Columns>

</syncfusion:SfDataGrid>

    The following screenshot is the output for the above code

    NOTE

    SfDataGrid control also provides the support to apply DataTemplateSelector for a particular column using GridTemplateColumn.CellTemplateSelector property. For more information about this, you can refer ColumnType topic.

    Template Selectors

    SfDataGrid provides extensive support for DataTemplateSelectors that helps to apply custom style for cells and rows, based on a custom condition. To know more about the DataTemplateSelectors, you can check the following MSDN link:

    http://msdn.microsoft.com/en-us/library/system.windows.controls.datatemplateselector.aspx.

    NOTE

    By default, Silverlight does not support TemplateSelectors hence SfDataGrid too.

    SfDataGrid offers the following DataTemplateSelector property to apply custom templates for cells based on a custom condition.

    Property Description Parameters
    Item Container
    SfDataGrid.CellTemplateSelector Gets or sets DataTemplateSelectors value that applies custom template for the cells based on a custom condition.It applies for all TemplateColumn. Corresponding row data GridCell
    GridColumn.CellTemplateSelector Gets or sets DataTemplateSelectors value that applies custom template for the cells based on a custom condition.It applies for particular column. Corresponding row data GridCell

    SfDataGrid.CellTemplateSelector

    By using this property, you can apply custom templates for cells based on a custom condition. It applies for all template column defined in SfDataGrid. The following code example illustrates applying template selector for SfDataGrid Template column.

    class GridCellTemplateSelector : DataTemplateSelector 

{

  public override DataTemplate SelectTemplate(object item, DependencyObject container)

    {

      var data = item as OrderInfo;

      if (data.Country =="Germany")

       return Application.Current.Resources["CellTemplate1"] as DataTemplate;

      else

       return Application.Current.Resources["CellTemplate2"] as DataTemplate;               

    }

}
    <Application.Resources>

    <DataTemplate x:Key="CellTemplate1">

       <TextBlock Foreground="Blue" Text="{Binding Country}" />

    </DataTemplate>

    <DataTemplate x:Key="CellTemplate2">

        <TextBlock Foreground="Red" Text="{Binding Country}" />

    </DataTemplate>

</Application.Resources>



</Window.Resources>

<local:GridCellTemplateSelector x:Key="templateSelector"/> 

</Window.Resources>



<syncfusion:SfDataGrid x:Name="datagrid" 

                         ItemsSource="{Binding ItemsSource}">

                         CellTemplateSelector="{StaticResource templateSelector}"

</syncfusion:SfDataGrid>

    The following screenshot displays the output.

    GridColumn.CellTemplateSelector

    By using this property, you can apply custom templates for cells based on a custom condition. The following code example illustrates applying template selector for SfDataGrid Template column.

  • c#
    • public class GridDataTemplateSelector : DataTemplateSelector

    {

        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)

        {

            var record = item as OrderInfo;

            if (record != null && record.Gender == "Male")

                return Application.Current.Resources["maleCellTemplate"] as DataTemplate;

            else if (record != null && record.Gender == "Female")

                return Application.Current.Resources["femaleCellTemplate"] as DataTemplate;



            return base.SelectTemplateCore(item, container);

        }

    }
  • xaml
    • <Application.Resources>

            <DataTemplate x:Key="maleCellTemplate">

                <TextBlock Foreground="DeepSkyBlue" Text="{Binding Gender}" />

            </DataTemplate>

            <DataTemplate x:Key="femaleCellTemplate">

                <TextBlock Foreground="DeepPink" Text="{Binding Gender}" />

            </DataTemplate>

</Application.Resources>



<syncfusion:SfDataGrid x:Name="datagrid" 

                         ItemsSource="{Binding OrderInfoCollection}">

         <syncfusion:SfDataGrid.Columns>

                <syncfusion:GridTextColumn  MappingName="OrderID"   />

                <syncfusion:GridTextColumn  MappingName="CustomerID" />                                                                                

                <syncfusion:GridTextColumn MappingName="CustomerName"/>

                <syncfusion:GridTextColumn MappingName="Quantity"/>

                <syncfusion:GridTextColumn MappingName="UnitPrice"/>

                <syncfusion:GridTemplateColumn CellTemplateSelector="{StaticResource gridTemplate}" MappingName="Gender"/>

                <syncfusion:GridTextColumn MappingName="Country"/> 

         </syncfusion:SfDataGrid.Columns>

</syncfusion:SfDataGrid>

    The following screenshot displays the output.

    Conditional Formatting for Cells

    SfDataGrid allows you to format the styles of cells and rows based on certain conditions. This is achieved by defining styling and template properties of SfDataGrid. To know more about styling and template properties you can refer the following topics:

    • Styling Cells
    • Styling Row
    • Style Selectors
    • Template Selectors

    Applying Conditional Formatting to Cells

    In this example you can see how to apply styles, based on conditions for cells in “UnitPrice” column using CellTemplate. When the change value is less than zero, then Red color foreground is applied to that cell, else Green color Foreground is applied.

    Following steps illustrate how to apply conditional formatting to the Cells in SfDataGrid:

    1. Create a converter and specify the criteria to apply conditional formatting to the cells.
  • c#
    • //Color Converters

public class ForegroundColorConverter : IValueConverter

{

public object Convert(object value, Type targetType, object parameter, string language)

{

var data = value as int?;

if (data != null && data > 0)

return new SolidColorBrush(Colors.Green);

else

return new SolidColorBrush(Colors.Red);

}

public object ConvertBack(object value, Type targetType, object parameter, string language)

{

throw new NotImplementedException();

}

}

    2.Create a CellTemplate for “UnitPrice” column and apply the above Foreground converter to the TextBlock inside the Template.

  • xaml
    • </Page.Resources>

<local:ForegroundColorConverter x:Key="changeForegroundConverter"/> 

</Page.Resources>



<syncfusion:SfDataGrid x:Name="datagrid" 

                         AutoGenerateColumns="False" 

                         ItemsSource="{Binding OrderInfoCollection}">

<syncfusion:SfDataGrid.Columns>

                <syncfusion:GridTextColumn  MappingName="OrderID"   />

                <syncfusion:GridTextColumn  MappingName="CustomerID" />                                                                                

                <syncfusion:GridTextColumn MappingName="CustomerName"/>

                <syncfusion:GridTextColumn MappingName="Quantity"/>

                <syncfusion:GridTemplateColumn MappingName="UnitPrice">

                    <syncfusion:GridTemplateColumn.CellTemplate>

                        <DataTemplate>

                            <TextBlock Text="{Binding UnitPrice}"  

                                       Foreground="{Binding UnitPrice,                                       

                                       Converter={StaticResource   

                                       changeForegroundConverter}}"/>

                        </DataTemplate>

                    </syncfusion:GridTemplateColumn.CellTemplate>

                </syncfusion:GridTemplateColumn>

          <syncfusion:GridTextColumn MappingName="Country"/></syncfusion:SfDataGrid.Columns>

</syncfusion:SfDataGrid>

    The following screenshot displays the output.

    Applying Conditional Formatting for Rows

    Example

    In this example, you can see how to apply style, based on conditions for rows using SfDataGrid.RowStyleSelector. When the “UnitPrice” column value is less than zero, then Red color foreground is applied to that Row, else Green color foreground is applied.

    Following steps illustrate how to apply conditional formatting to the Rows in SfDataGrid:

    1. Create a StyleSelector and specify the criteria to apply conditional formatting to the rows.
  • c#
    • public class CustomStyleSelector : StyleSelector

{

public override Style SelectStyle(object item, DependencyObject container)

{

var row = item as DataRowBase;

var data = row.RowData as OrderInfo;

if (data != null)

{

if(data.UnitPrice<0)

return App.Current.Resources["redstyle"] as Style;

else

return App.Current.Resources["greenstyle"] as Style;

}

return base.SelectStyle (item, container);

}

}

    2.Assign that custom StyleSelector object to SfDataGrid.RowStyleSelector property. The following code example illustrates this.

  • xaml
    • </Page.Resources>

<local:CustomStyleSelector x:Key="rowStyleSelector "/> 

</Page.Resources>



<syncfusion:SfDataGrid x:Name="datagrid" 

                         AutoGenerateColumns="True"

                         ColumnSizer="Star" 

                         RowStyleSelector="{StaticResource rowStyleSelector}"

                ItemsSource="{Binding Stocks}" />

    The following screenshot displays the output.

    NOTE

    StyleSelectors & TemplateSelectors are not supported by Silverlight

    Alternating Row Style

    You can set the AlternativeRowStyle in SfDataGrid by using SfDataGrid.AlternatingRowStyle property.

    SfDataGrid allows you to set AlternativeRowCount.By default, AlternatingRowStyle is applied for every alternative second row.To change the alternative row count, you can change it by using AlternationCount property.

    The following code example illustrates how to use AlternatingRowStyle in SfDataGrid.

  • xaml
    • <Page.Resources>

<Style x:Key="alternateRowStyle" TargetType="syncfusion:VirtualizingCellsControl">

      <Setter Property="Background" Value="Pink"/>

      <Setter Property="FontStyle" Value="Italic"/>

      <Setter Property="FontWeight" Value="Bold"/>           

</Style>

</Page.Resources>



<syncfusion:SfDataGrid Name="grid"

                           AlternationCount="3"

                           AlternatingRowStyle="{StaticResource alternateRowStyle}"

    The following screenshot displays the output.