Styles and Formatting in UWP CellGrid (SfCellGrid)
10 May 20219 minutes to read
This section explains about some of the GridStyleInfo
properties which customizes the SfCellGrid
and its inner elements(cell,row, column..)
GridStyleInfo Overview
SfCellGrid is a tabular representation of grid cells which contains data. Each cell contains unique information and can be displayed independently of other cells.
GridStyleInfo
objects are used to store information the appearance of a grid cell. So the attributes like Font, Background, Border,Alignment, CellValue and CellType etc. are all reflected in a single GridStyleInfo
object.
Every cell in a SfCellGrid
may have such an object associated with it, giving the individual cell its unique appearance. It is not necessary that all cells should require fully populated GridStyleInfo
objects stored in memory to function.
Cell Background
The Background
property of GridStyleInfo
class specifies the background brush color for the cells or entire grid.
//To apply the background for particular cell,
this.cellGrid.Model[2, 2].Background = new SolidColorBrush(Colors.Green);
//To apply background for header cells alone,
cellGrid.Model.HeaderStyle.Background = new SolidColorBrush(Colors.Yellow);
//To apply the background for the entire grid,
cellGrid.Model.TableStyle.Background = new SolidColorBrush(Colors.LightPink);
//To apply the background for the footer cells alone,
cellGrid.Model.FooterStyle.Background = new SolidColorBrush(Colors.GreenYellow);
//To apply the background for the particular column,
cellGrid.Model.ColStyles[4].Background = new SolidColorBrush(Colors.Blue);
//To apply the background for the particular row,
cellGrid.Model.RowStyles[3].Background = new SolidColorBrush(Colors.Almond);
Cell Foreground
The Foreground
property of GridStyleInfo
class specifies the foreground brush color for the value or text in the cells or entire grid.
//To apply the foreground for particular cell,
this.cellGrid.Model[2, 2].Foreground = new SolidColorBrush(Colors.Green);
//To apply foreground for header cells alone,
cellGrid.Model.HeaderStyle.Foreground = new SolidColorBrush(Colors.Yellow);
//To apply the foreground for the entire grid,
cellGrid.Model.TableStyle.Foreground = new SolidColorBrush(Colors.LightPink);
//To apply the foreground for the footer cells alone,
cellGrid.Model.FooterStyle.Foreground = new SolidColorBrush(Colors.GreenYellow);
//To apply the foreground for the particular column,
cellGrid.Model.ColStyles[4].Foreground = new SolidColorBrush(Colors.Blue);
//To apply the foreground for the particular row,
cellGrid.Model.RowStyles[3].Foreground = new SolidColorBrush(Colors.Almond);
Font
The Font
property of the GridStyleInfo
class specifies the font for the text displayed in the cell. In SfCellGrid, GridFontInfo
class contains all the attributes related with font styles.
cellGrid.Model[3, 3].Font.FontSize = 20;
cellGrid.Model[3, 3].Font.FontStretch = FontStretch.SemiCondensed;
cellGrid.Model[3, 3].Font.FontStyle = FontStyle.Italic;
cellGrid.Model[3, 3].Font.FontWeight = FontWeights.Bold;
cellGrid.Model[3, 3].Font.FontFamily = new FontFamily("Times New Roman");
CellValue
Value for the cells can be changed by using CellValue
property.
//To assign the cell value for particular cell,
cellGrid.Model[3, 3].CellValue = "Syncfusion";
//To assign the cell value for header cells alone,
cellGrid.Model.HeaderStyle.CellValue = "Syncfusion";
//To assign the cell value for the entire grid,
cellGrid.Model.TableStyle.CellValue = "Syncfusion";
//To assign the cell value for the footer cells alone,
cellGrid.Model.FooterStyle.CellValue = "Syncfusion";
//To assign the cell value for the particular column,
cellGrid.Model.ColStyles[4].CellValue = "Syncfusion");
//To assign the cell value for the particular row,
cellGrid.Model.RowStyles[3].CellValue = "Syncfusion";
Cell Alignment
To set the horizontal and vertical alignment to the text in a cell, HorizontalAlignment
and VerticalAlignment
properties are used.
cellGrid.Model[3, 3].HorizontalAlignment = HorizontalAlignment.Center;
cellGrid.Model[3, 3].VerticalAlignment = VerticalAlignment.Bottom;
Borders
Borders can be set on all sides of a cell by setting Borders
property. Cell borders can be customized to have different color, thickness and style. It is possible to have
different border styles for top, bottom, left and right borders for the same cell.
To apply border styles for particular range
//Apply same border style to all sides,
cellGrid.Model[3, 3].Borders.All = new Pen(new SolidColorBrush(Colors.Green), 2, BorderStyle.DashDotDot);
//Apply different border styles to each sides,
cellGrid.Model[2, 2].Borders.Top = new Pen(new SolidColorBrush(Colors.Pink), 2, BorderStyle.Dashed);
cellGrid.Model[2, 2].Borders.Bottom = new Pen(new SolidColorBrush(Colors.Yellow), 4, BorderStyle.Dotted);
cellGrid.Model[2, 2].Borders.Left = new Pen(new SolidColorBrush(Colors.AliceBlue), 2, BorderStyle.Standard);
cellGrid.Model[2, 2].Borders.Right = new Pen(new SolidColorBrush(Colors.Blue), 3, BorderStyle.DashDot);
To apply border styles for the group of cells
//To apply border styles for header cells alone,
cellGrid.Model.HeaderStyle.Borders.All = new Pen(new SolidColorBrush(Colors.Green), 2, BorderStyle.DashDotDot);
//To assign the cell value for the entire grid,
cellGrid.Model.TableStyle.Borders.All = new Pen(new SolidColorBrush(Colors.Green), 2, BorderStyle.DashDotDot);
//To assign the cell value for the footer cells alone,
cellGrid.Model.FooterStyle.Borders.All = new Pen(new SolidColorBrush(Colors.Green), 2, BorderStyle.DashDotDot);
//To assign the cell value for the particular column,
cellGrid.Model.ColStyles[4].Borders.All = new Pen(new SolidColorBrush(Colors.Green), 2, BorderStyle.DashDotDot);
//To assign the cell value for the particular row,
cellGrid.Model.RowStyles[3].Borders.All = new Pen(new SolidColorBrush(Colors.Green), 2, BorderStyle.DashDotDot);
Format
The formats of a cell value can be changed by using Format
property. SfCellGrid allows you to apply different formatting types to the cell values. For more details on the different types of formatting types, please check the MSDN link over here.
//To apply LongDate pattern to the cell value,
cellGrid.Model[2, 2].CellValue = "234234";
cellGrid.Model[2, 2].Format = "D";
Text Wrap
If the cell value in the SfCellGrid does not fit in a single line, then it can be wrapped by using TextWrapping
property and the height can be adjusted with
ResizeRowsToFit
method.
public MainPage()
{
cellGrid.Model[2, 2].CellValue = "Syncfusion wrap text testing in a cell";
//To wrap the text in a cell,
cellGrid.Model[2, 2].TextWrapping= TextWrapping.Wrap;
cellGrid.Loaded += CellGrid_Loaded;
}
private void CellGrid_Loaded(object sender, RoutedEventArgs e)
{
//To adjust height based on word wrap,
cellGrid.Model.ResizeRowsToFit(GridRangeInfo.Row(2), GridResizeToFitOptions.None);
}
Text Trim
When the text exceeds the edge of the cell in SfCellGrid, it can be trimmed by using TextTrimming
property.
//To trim the text in a cell,
cellGrid.Model[3, 3].TextTrimming = TextTrimming.Clip;
cellGrid.Model[3, 3].CellValue = "Syncfusion text trimming test in cell";
TIPS
If you want to apply the styles at runtime, you can use QueryCellInfo Event.
Clearing styles
To remove the GridStyleInfo
properties along with the data in SfCellGrid, ClearStyle
and ClearStyles
methods are used.
//To clear style in particular cell,
cellGrid.Model.ClearStyle(new RowColumnIndex(3, 3));
//To clear all the styles in the entire grid,
cellGrid.Model.ClearStyles();
NOTE
Users need to invalidate the cells using
InvalidateCell(rowIndex,colIndex)
method, if the formatting is applied at runtime like button click event. For more info, please refer here.