Conditional Styling

[Sachith]

Hi Team,

I have create syncfusion maui Datagrid in my App.

I added the columns for datagrid from my ViewModel like below.

        DataGridNumericColumn askQtyColumn = new DataGridNumericColumn { HeaderText = "No of Asks",                                     MappingName = "BestAskQuantity", Width = 100, CellTextAlignment = TextAlignment.End };

        Columns.Add(askQtyColumn);

I want to Give a color to this Column and need to do other styling.

Is there anyway to do it from my viewModel?

Best Regards,

Sachith Priyashantha.

[Rasika Palanisamy]

Hi Sachith Priyashantha,

Based on your requirements, there are two possible approaches to achieve this.

Solution 1:

You can directly apply the style in the ViewModel.cs file by defining the styles with the necessary property values. These styles can then be set in the respective DataGrid columns' HeaderStyle property. Please refer to the code snippet below:

ViewModel.cs

 

  public class OrderInfoRepository

    {

        private ObservableCollection<OrderInfo> orderInfo;

        public ObservableCollection<OrderInfo> OrderInfoCollection

        {

            get { return orderInfo; }

            set { this.orderInfo = value; }

        }

 

        private ColumnCollection columns;

        public ColumnCollection Columns

        {

            get { return columns; }

            set { this.columns = value; }

        }

 

        public OrderInfoRepository()

        {

            orderInfo = new ObservableCollection<OrderInfo>();

            columns = new ColumnCollection();

            this.GenerateColumns();

            this.GenerateOrders();

        }

 

        public void GenerateColumns()

        {

            var headerStyle = new Style(typeof(DataGridHeaderCell))

            {

                Setters =

                {

                            new Setter { Property = DataGridHeaderCell.BackgroundProperty, Value = Colors.Red },

                            new Setter { Property = DataGridHeaderCell.TextColorProperty, Value = Colors.White },

                            new Setter { Property = DataGridHeaderCell.FontSizeProperty, Value = 16 },

                            new Setter { Property = DataGridHeaderCell.FontAttributesProperty, Value = FontAttributes.Bold },

                }

            };

            DataGridNumericColumn orderIdColumn = new DataGridNumericColumn { HeaderText = "Order ID", MappingName = "OrderID", Width = 100, CellTextAlignment = TextAlignment.End };

            Columns.Add(orderIdColumn);

            orderIdColumn.HeaderStyle = headerStyle;

        }

    }

Solution 2:

Alternatively, you can define the styles with the required property values in the App.xaml file. Then, using a Key, you can set these styles in the corresponding DataGrid columns' HeaderStyle property. Here's an example:

App.Xaml

 

<?xml version = "1.0" encoding = "UTF-8" ?>

<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:local="clr-namespace:MauiDataGrid"

             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"

             x:Class="MauiDataGrid.App">

    <Application.Resources>

        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>

                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />

                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />

            </ResourceDictionary.MergedDictionaries>

            <Style TargetType="syncfusion:DataGridHeaderCell" x:Key="customHeaderStyle">

                <Setter Property="Background" Value="#0074E3"/>

                <Setter Property="TextColor" Value="White"/>

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

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

                <Setter Property="FontFamily" Value="TimesNewRoman"/>

            </Style>

        </ResourceDictionary>

    </Application.Resources>

</Application>

 

 

ViewModel.cs

 

    public class OrderInfoRepository

    {

        public OrderInfoRepository()

        {

            orderInfo = new ObservableCollection<OrderInfo>();

            columns = new ColumnCollection();

            this.GenerateColumns();

            this.GenerateOrders();

        }

 

        public void GenerateColumns()

        {

            DataGridNumericColumn orderIdColumn = new DataGridNumericColumn { HeaderText = "Order ID", MappingName = "OrderID", Width = 100, CellTextAlignment = TextAlignment.End };

            Columns.Add(orderIdColumn);

            orderIdColumn.HeaderStyle = (Style)Application.Current!.Resources["customHeaderStyle"];

 

        }

    }

We have provided a sample that utilizes Solution 1 approach. However, both solutions have been attached for your reference. Please let us know if you require further assistance. As always, we are happy to help you out.

Regards,

Rasika Palanisamy

Attachment: StylesSample_4d9e1603.zip

[Sachith]

Hi Team,

It works :)

Thanks for your support.

Best Regards,

Sachith Priyashantha.