Text

FlexGrid lets you customize the overall look of the text in grid, not to just increase its aesthetic value but also increases its readability.

The FlexGrid control lets you change the font, set margin, wrap text, display trimmed text, align text and add text effects.

The following code shows how to style the text in WinUI FlexGrid.

public sealed partial class CellAppearance : Window
{
    public CellAppearance()
    {
        this.InitializeComponent();
        // bind flexgrid with DataSource
        var data = Customer.GetCustomerList(100);
        flexGrid1.ItemsSource = data;
        // Use CellFactory to change cell appearance
        flexGrid1.CellFactory = new MyCellFactory();
        flexGrid1.Columns[4].DataMap = new GridDataMap() { ItemsSource = Customer.GetCountries(), DisplayMemberPath = "Value", SelectedValuePath = "Key" };
        flexGrid1.Columns[2].Width = new GridLength(70);
        // Set currency format
        flexGrid1.Columns[2].Format = "C2";
        // Set number format
        flexGrid1.Columns[3].Format = "N1";
        //Set short date format
        flexGrid1.Columns[5].Format = "D";
        // Set time format
        flexGrid1.Columns[6].Format = "t";
    }
    public class MyCellFactory : GridCellFactory
    {
        public override void PrepareCell(GridCellType cellType, GridCellRange range, GridCellView cell, Thickness internalBorders)
        {
            if (cellType == GridCellType.Cell && range.Column == 3 && range.Row == 2)
            {
                // Changing Cell[2,3] BackColor, ForeColor and Font and Border 
                var cellValue = Grid[2, 3] as int?;
                if (cellValue.HasValue)
                {
                    cell.Background = new SolidColorBrush(Colors.Green);
                    cell.Foreground = new SolidColorBrush(Colors.Red);
                    cell.FontFamily = new FontFamily("verdana");
                    cell.FontStyle = FontStyle.Italic;
                    cell.FontSize = 18;
                    cell.BorderBrush = new SolidColorBrush(Colors.Red);
                    cell.BorderThickness = new Thickness(2, 2, 2, 2);
                }
            }
        }
        public override void BindCellContent(GridCellType cellType, GridCellRange range, FrameworkElement cellContent)
        {
            base.BindCellContent(cellType, range, cellContent);
            if (range.Column == 2 && range.Row == 2)
            {
                var label = cellContent as TextBlock;
                if (label != null)
                {
                    // Change Font
                    label.FontStyle = FontStyle.Italic;
                    label.FontSize = 18;
                    label.FontStretch = FontStretch.ExtraExpanded;
                    label.FontFamily = new FontFamily("Arial");
                    // Set Margin
                    label.Margin = new Thickness(10, 0, 0, 0);
                    // Wrap Text
                    label.TextWrapping = TextWrapping.WrapWholeWords;
                    // Display Trimmed Text
                    label.TextTrimming = TextTrimming.CharacterEllipsis;
                    // Align Text
                    label.TextAlignment = TextAlignment.Center;
                    // Text Effect
                    label.TextDecorations = TextDecorations.Strikethrough;
                }
            }
        }
    }
}