Articles in this section
Category / Section

How to set background color for cells in a column based on the cell content in WinRT DataGrid ?

4 mins read

SfDataGrid displays all the column values in cells. SfDataGrid control allows you to apply style for these cells in a particular column in two ways.

  1. Using GridColumn.CellStyle property
  • Using Style.Triggers
  1. Using GridColumn.CellStyleSelector property
  1. Using GridColumn.CellStyle property

Using this property you can customize the background of the cells in a particular column based on its cell content with the help of a Converter or by using Style.Triggers.

The following code example explains how to apply background for cells in a particular column based on its cell content using GridColumn.CellStyle property with the help of a converter. Here in the NameToColor converter class, the value produced by the binding source for each cell is available in the value parameter of the Convert method and the target property for which the style is to be set is obtained from the targetType parameter. Using the value parameter, you can return a converted value to the target property based on which the background is changed.

XAML

<syncfusion:GridTextColumn MappingName="Column1">
    <syncfusion:GridTextColumn.CellStyle>
        <Style TargetType="syncfusion:GridCell">
            <Setter Property="Background" Value="{Binding Column1, Converter = {StaticResource NameToColorConvertor}}" />
        </Style>
    </syncfusion:GridTextColumn.CellStyle>
</syncfusion:GridTextColumn>

 

C#

public class NameToColor : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        string input = value as string;
        switch (input)
        {
            case "Yellow": return new SolidColorBrush(Colors.Yellow);
            case "Green": return new SolidColorBrush(Colors.Green);
            case "Red": return new SolidColorBrush(Colors.Red);
            case "Cyan": return new SolidColorBrush(Colors.Cyan);
            default: return DependencyProperty.UnsetValue;
        }
    }
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

 

Note:

Using convertors in CellStyle is applicable only for WPF and Silverlight.

 

The following screenshot displays the result of the above code in SfDataGrid.

D:\Syncfusion\Issues\2014 Volume 2\KB Issues\KB Images\Background_CellContent1.png

Sample Links:

WPF

SilverLight

Using Style.Triggers

You can also use DataTriggers to set the background of a cell based on its content. They apply property values or perform actions when the bound data meets a specified condition. It is not necessary to write a converter when you use DataTriggers that reduces the code size. You can use MultiDataTriggers for specifying a set of conditions that is satisfied and applies the property values or performs actions. The following code example explains the usage of DataTriggers to set the background of a cell based on its cell content.

XAML

<syncfusion:GridTextColumn MappingName="Column4" >
    <syncfusion:GridTextColumn.CellStyle>
        <Style TargetType="syncfusion:GridCell">
            <Style.Triggers>
                <!--Background property set based on cell content-->
                <DataTrigger Binding="{Binding Path=Column4}" Value="Red">
                    <Setter Property="Background" Value="Red" />
                </DataTrigger>
                <!--Background property set based on multiple conditions-->
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Path=Column4}" Value="Yellow" />
                        <Condition Binding="{Binding Path=Column3}" Value="Cyan" />
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Background" Value="Yellow" />
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>
    </syncfusion:GridTextColumn.CellStyle>
</syncfusion:GridTextColumn>

 

Note:

 

Applicable only for WPF as DataTriggers is not available in WinRT and Silverlight.

 

Here in the above code background is applied only for Column4, when the cell content is Red, the background is changed as Red using the DataTriggers. On the other hand using MultiDataTriggers, a set of conditions are given, i.e. when the value in Column4 is Yellow and value in Column3 is Cyan, then only the Background of the cell containing the text Yellow will be changed to yellow. In other cases, default background is displayed.

The following screenshot displays the result of the above code in SfDataGrid.

D:\Syncfusion\Issues\2014 Volume 2\KB Issues\KB Images\Background_CellContent3.png

Sample Link:

WPF

  1. Using CellStyleSelector property

You can customize the background of the cells in a particular column based on its cell content using the CellStyleSelector property. This property is used to apply style for a cell and to change the background of the GridCell. CellStyle gives you better performance when compared to CellStyleSelector.

The following code example explains how to apply the background for the cells in a particular column using CellStyleSelector.

XAML

<Application.Resources>
    <local:SelectorClass x:Key="selectclass"/>
    <Style x:Key="YellowCellStyle" TargetType="syncfusion:GridCell">
        <Setter Property="Background" Value="Yellow" />
    </Style>
    <Style x:Key="GreenCellStyle" TargetType="syncfusion:GridCell">
        <Setter Property="Background" Value="Green" />
    </Style>
    <Style x:Key="RedCellStyle" TargetType="syncfusion:GridCell">
        <Setter Property="Background" Value="Red" />
    </Style>
    <Style x:Key="CyanCellStyle" TargetType="syncfusion:GridCell">
        <Setter Property="Background" Value="Cyan" />
    </Style>
    <Style x:Key="DefaultCellStyle" TargetType="syncfusion:GridCell">
        <Setter Property="Background" Value="White" />
    </Style>
</Application.Resources>
<syncfusion:GridTextColumn MappingName="Column3" CellStyleSelector="{StaticResource selectclass}" />

C#

public class SelectorClass : StyleSelector
{
    public override Style SelectStyle(object item, DependencyObject container)
    {
        var data = item as MyClass;
        if (data != null)
        {
            if (data.Column3 == "Yellow" && ((container as GridCell).ColumnBase.GridColumn.MappingName == "Column3"))
                return App.Current.Resources["YellowCellStyle"] as Style;
            else if (data.Column3 == "Green" && ((container as GridCell).ColumnBase.GridColumn.MappingName == "Column3"))
                return App.Current.Resources["GreenCellStyle"] as Style;
            else if (data.Column3 == "Red" && ((container as GridCell).ColumnBase.GridColumn.MappingName == "Column3"))
                return App.Current.Resources["RedCellStyle"] as Style;
            else if(data.Column3 == "Cyan" && ((container as GridCell).ColumnBase.GridColumn.MappingName == "Column3"))
                return App.Current.Resources["CyanCellStyle"] as Style;
            else
                return App.Current.Resources["DefaultCellStyle"] as Style;
        }
        return base.SelectStyle(item, container);
    }
}

 

Note:

For WinRT, write the above code in SelectStyleCore method as SelectStyle is not a virtual method in WinRT.

 

The following screenshot displays the result of the above code in SfDataGrid.

D:\Syncfusion\Issues\2014 Volume 2\KB Issues\KB Images\Background_CellContent2.png

Note:

DataTriggers and StyleSelector is not available in Silverlight, hence changing background of a cell based on its content using Style.Triggers and CellStyleSelector is not applicable for Silverlight.

 

Sample Links:

WPF

WinRT

UWP

 

Conclusion

I hope you enjoyed learning about how to set background color for cells in a column based on the cell content in WinRT DataGrid.

You can refer to our WinRT DataGrid featuretour 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 WinRT 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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied