How to change FontWeight for particular column based on Cell Value in Silverlight ?

2 mins read

In SfDataGrid, you can apply the style for every cell in a particular column based on CellValues. You can customize the FontWeight of the cells in a particular column, based on its cell content in two ways.

Customize Style using Converters.
CellStyleSelector.

Customize Style using Converters

You can customize the FontWeight of GridCell based on its data, by customizing its Style and Writing Converter for FontWeight property that converts the FontWeight based on bound data. The customized style can be set to SfDataGrid.CellStyle or GridColumn.CellStyle property based on your requirement.

XAML

<!--Resources-->
<Window.Resources>
    <local:ChangeFontWeight x:Key="changefontweight"/>
    <Style TargetType="syncfusion:GridCell" x:Key="cellstyle">
      <Setter Property="FontWeight" Value="{Binding RelativeSource={RelativeSource Self},Converter = {StaticResource changefontweight}}" />
    </Style>
</Window.Resources>
<!— SfDataGrid Definition -->
<syncfusion:SfDataGrid x:Name="datagrid"
                            CellStyle="{StaticResource cellstyle}"
                            AllowEditing="True" 
                            LiveDataUpdateMode="AllowDataShaping"
                            AutoGenerateColumns="True"
                            ColumnSizer="Auto"
                            ItemsSource="{Binding Stocks}">

The following code example demonstrates the ChangeFontWeight Converter Class that returns the FontWeight of the text based on cell value.

public class ChangeFontWeight : IValueConverter
{
    object IValueConverter.Convert(object value, Type targetType, object parameter, CultureInfo info)
    {
        var cell = value as GridCell;
        if (cell.ColumnBase.GridColumn.MappingName == "Change")
        {
            var data = (cell.DataContext as StockData).Change;
            if (data >= 0)
                return FontWeights.Bold;
            else
                return FontWeights.Normal;
        } 
        return null;
    }
    object IValueConverter.ConvertBack(object value, Type targetType, object parameter, CultureInfo info)
    {
        throw new NotImplementedException();
    }
}

Note:

You can apply the style for a particular column by using GridColumn.CellStyle in SfDataGrid.

CellStyleSelector

You can customize the FontWeight of GridCell based on its data, by customizing its style and writing the StyleSelector for FontWeight property that converts the FontWeight based on bound data. The customized style can be set to SfDataGrid.CellStyleSelector or GridColumn.CellStyleSelector property based on your requirement.

XAML

<!--Resources-->
<Window.Resources>
    <local:StockCellStyleSelector x:Key="stockCellStyleSelector" />
</Window.Resources>
<!—Defining Resources in SfDataGrid -->
<syncfusion:SfDataGrid x:Name="datagrid"
                                    Grid.Row="1"
                                    Margin="10,0,30,30"
                                    LiveDataUpdateMode="AllowDataShaping"
                                    ColumnSizer="Auto" 
                                    CellStyleSelector="{StaticResource stockCellStyleSelector}" 
                                    NavigationMode="Row"
                                    ItemsSource="{Binding Stocks}" ></syncfusion:SfDataGrid.Columns>

The following code example demonstrates how to write the style for FontWeight property of GridCell in App.Xaml.

XAML

<Application.Resources>
         <Style x:Key="SymbolCellStyle" TargetType="syncfusion:GridCell">
            <Setter Property="FontWeight" Value="Bold" />
        </Style>        <Style x:Key="NormalCellStyle" TargetType="syncfusion:GridCell">
            <Setter Property="FontWeight" Value="Normal" />
        </Style>
    </Application.Resources>

The appropriate style is applied for a particular column depending on the row data in SelectStyle method of the StyleSelector Class.

The following code example describes the StockCellStyleSelector class that returns the style based on cell value.

public class StockCellStyleSelector : StyleSelector
{
    public override Style SelectStyle(object item, DependencyObject container)
        {
            var gridcell = container as GridCell;
            if (gridcell.ColumnBase.GridColumn.MappingName == "Change")
            {
                var row = item as StockData;
                if (row != null)
                    if (row.Change >= 0)
                        return App.Current.Resources["SymbolCellStyle"] as Style;
                    else
                        return App.Current.Resources["NormalCellStyle"] as Style;
            }
        return base.SelectStyle(item, container);
    }
}

Note:

You can apply the style for a particular column by using GridColumn.CellStyleSelector in SfDataGrid.

The following screenshot shows changing FontWeight for a particular column based on CellValue.

CellValue