Enhance DataGrid UI and Fix Style Issues (#1192)

* fix: Add styles for DataGrid textbox columns

* Update DataGrid styles

* Remove deprecated color definitions and update styles

* Update TextColumnElementStyle to use TextBlock instead of TextBox

---------

Co-authored-by: pomian <[email protected]>

Author: stepwise-alan

src/Wpf.Ui.Gallery/Models/Product.cs

@@ -15,6 +15,8 @@ public class Product
 
     public string? QuantityPerUnit { get; set; }
 
+    public Unit Unit { get; set; }
+
     public double UnitPrice { get; set; }
 
     public string UnitPriceString => UnitPrice.ToString("F2");

src/Wpf.Ui.Gallery/Models/Unit.cs

@@ -0,0 +1,13 @@
+// This Source Code Form is subject to the terms of the MIT License.
+// If a copy of the MIT was not distributed with this file, You can obtain one at https://opensource.org/licenses/MIT.
+// Copyright (C) Leszek Pomianowski and WPF UI Contributors.
+// All Rights Reserved.
+
+namespace Wpf.Ui.Gallery.Models;
+
+public enum Unit
+{
+    Grams,
+    Kilograms,
+    Milliliters
+}

src/Wpf.Ui.Gallery/ViewModels/Pages/Collections/DataGridViewModel.cs

@@ -24,7 +24,7 @@ private static ObservableCollection<Product> GenerateProducts()
 
         var adjectives = new[] { "Red", "Blueberry" };
         var names = new[] { "Marmalade", "Dumplings", "Soup" };
-        /*var units = new[] { "grams", "kilograms", "milliliters" };*/
+        Unit[] units = [Unit.Grams, Unit.Kilograms, Unit.Milliliters];
 
         for (int i = 0; i < 50; i++)
         {
@@ -37,6 +37,7 @@ private static ObservableCollection<Product> GenerateProducts()
                         adjectives[random.Next(0, adjectives.Length)]
                         + " "
                         + names[random.Next(0, names.Length)],
+                    Unit = units[random.Next(0, units.Length)],
                     UnitPrice = Math.Round(random.NextDouble() * 20.0, 3),
                     UnitsInStock = random.Next(0, 100),
                     IsVirtual = random.Next(0, 2) == 1,

src/Wpf.Ui/Controls/DataGrid/DataGrid.cs

@@ -16,6 +16,10 @@ namespace Wpf.Ui.Controls;
 /// </summary>
 [StyleTypedProperty(Property = nameof(CheckBoxColumnElementStyle), StyleTargetType = typeof(CheckBox))]
 [StyleTypedProperty(Property = nameof(CheckBoxColumnEditingElementStyle), StyleTargetType = typeof(CheckBox))]
+[StyleTypedProperty(Property = nameof(ComboBoxColumnElementStyle), StyleTargetType = typeof(ComboBox))]
+[StyleTypedProperty(Property = nameof(ComboBoxColumnEditingElementStyle), StyleTargetType = typeof(ComboBox))]
+[StyleTypedProperty(Property = nameof(TextColumnElementStyle), StyleTargetType = typeof(TextBlock))]
+[StyleTypedProperty(Property = nameof(TextColumnEditingElementStyle), StyleTargetType = typeof(TextBox))]
 public class DataGrid : System.Windows.Controls.DataGrid
 {
     /// <summary>Identifies the <see cref="CheckBoxColumnElementStyle"/> dependency property.</summary>
@@ -36,6 +40,42 @@ public class DataGrid : System.Windows.Controls.DataGrid
             new FrameworkPropertyMetadata(null)
         );
 
+    /// <summary>Identifies the <see cref="ComboBoxColumnElementStyle"/> dependency property.</summary>
+    public static readonly DependencyProperty ComboBoxColumnElementStyleProperty =
+        DependencyProperty.Register(
+            nameof(ComboBoxColumnElementStyle),
+            typeof(Style),
+            typeof(DataGrid),
+            new FrameworkPropertyMetadata(null)
+        );
+
+    /// <summary>Identifies the <see cref="ComboBoxColumnEditingElementStyle"/> dependency property.</summary>
+    public static readonly DependencyProperty ComboBoxColumnEditingElementStyleProperty =
+        DependencyProperty.Register(
+            nameof(ComboBoxColumnEditingElementStyle),
+            typeof(Style),
+            typeof(DataGrid),
+            new FrameworkPropertyMetadata(null)
+        );
+
+    /// <summary>Identifies the <see cref="TextColumnElementStyle"/> dependency property.</summary>
+    public static readonly DependencyProperty TextColumnElementStyleProperty =
+        DependencyProperty.Register(
+            nameof(TextColumnElementStyle),
+            typeof(Style),
+            typeof(DataGrid),
+            new FrameworkPropertyMetadata(null)
+        );
+
+    /// <summary>Identifies the <see cref="TextColumnEditingElementStyle"/> dependency property.</summary>
+    public static readonly DependencyProperty TextColumnEditingElementStyleProperty =
+        DependencyProperty.Register(
+            nameof(TextColumnEditingElementStyle),
+            typeof(Style),
+            typeof(DataGrid),
+            new FrameworkPropertyMetadata(null)
+        );
+
     /// <summary>
     /// Gets or sets the style which is applied to all checkbox column in the DataGrid
     /// </summary>
@@ -54,6 +94,42 @@ public Style? CheckBoxColumnEditingElementStyle
         set => SetValue(CheckBoxColumnEditingElementStyleProperty, value);
     }
 
+    /// <summary>
+    /// Gets or sets the style which is applied to all combobox column in the DataGrid
+    /// </summary>
+    public Style? ComboBoxColumnElementStyle
+    {
+        get => (Style?)GetValue(ComboBoxColumnElementStyleProperty);
+        set => SetValue(ComboBoxColumnElementStyleProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets the style for all the column comboboxes in the DataGrid
+    /// </summary>
+    public Style? ComboBoxColumnEditingElementStyle
+    {
+        get => (Style?)GetValue(ComboBoxColumnEditingElementStyleProperty);
+        set => SetValue(ComboBoxColumnEditingElementStyleProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets the style which is applied to all textbox column in the DataGrid
+    /// </summary>
+    public Style? TextColumnElementStyle
+    {
+        get => (Style?)GetValue(TextColumnElementStyleProperty);
+        set => SetValue(TextColumnElementStyleProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets the style for all the column textboxes in the DataGrid
+    /// </summary>
+    public Style? TextColumnEditingElementStyle
+    {
+        get => (Style?)GetValue(TextColumnEditingElementStyleProperty);
+        set => SetValue(TextColumnEditingElementStyleProperty, value);
+    }
+
     protected override void OnInitialized(EventArgs e)
     {
         Columns.CollectionChanged += ColumnsOnCollectionChanged;
@@ -78,35 +154,109 @@ private void UpdateColumnElementStyles()
 
     private void UpdateSingleColumn(DataGridColumn dataGridColumn)
     {
-        if (dataGridColumn is DataGridCheckBoxColumn checkBoxColumn)
+        switch (dataGridColumn)
         {
-            if (
-                checkBoxColumn.ReadLocalValue(DataGridCheckBoxColumn.ElementStyleProperty)
-                == DependencyProperty.UnsetValue
-            )
-            {
-                _ = BindingOperations.SetBinding(
-                    checkBoxColumn,
-                    DataGridCheckBoxColumn.ElementStyleProperty,
-                    new Binding { Path = new PropertyPath(CheckBoxColumnElementStyleProperty), Source = this }
-                );
-            }
-
-            if (
-                checkBoxColumn.ReadLocalValue(DataGridCheckBoxColumn.EditingElementStyleProperty)
-                == DependencyProperty.UnsetValue
-            )
-            {
-                _ = BindingOperations.SetBinding(
-                    checkBoxColumn,
-                    DataGridCheckBoxColumn.EditingElementStyleProperty,
-                    new Binding
-                    {
-                        Path = new PropertyPath(CheckBoxColumnEditingElementStyleProperty),
-                        Source = this,
-                    }
-                );
-            }
+            case DataGridCheckBoxColumn checkBoxColumn:
+                if (
+                    checkBoxColumn.ReadLocalValue(DataGridBoundColumn.ElementStyleProperty)
+                    == DependencyProperty.UnsetValue
+                )
+                {
+                    _ = BindingOperations.SetBinding(
+                        checkBoxColumn,
+                        DataGridBoundColumn.ElementStyleProperty,
+                        new Binding { Path = new PropertyPath(CheckBoxColumnElementStyleProperty), Source = this }
+                    );
+                }
+
+                if (
+                    checkBoxColumn.ReadLocalValue(DataGridBoundColumn.EditingElementStyleProperty)
+                    == DependencyProperty.UnsetValue
+                )
+                {
+                    _ = BindingOperations.SetBinding(
+                        checkBoxColumn,
+                        DataGridBoundColumn.EditingElementStyleProperty,
+                        new Binding
+                        {
+                            Path = new PropertyPath(CheckBoxColumnEditingElementStyleProperty), Source = this
+                        }
+                    );
+                }
+
+                break;
+
+            case DataGridComboBoxColumn comboBoxColumn:
+                if (
+                    comboBoxColumn.ReadLocalValue(DataGridBoundColumn.ElementStyleProperty)
+                    == DependencyProperty.UnsetValue
+                )
+                {
+                    _ = BindingOperations.SetBinding(
+                        comboBoxColumn,
+                        DataGridBoundColumn.ElementStyleProperty,
+                        new Binding { Path = new PropertyPath(ComboBoxColumnElementStyleProperty), Source = this }
+                    );
+                }
+
+                if (
+                    comboBoxColumn.ReadLocalValue(DataGridBoundColumn.EditingElementStyleProperty)
+                    == DependencyProperty.UnsetValue
+                )
+                {
+                    _ = BindingOperations.SetBinding(
+                        comboBoxColumn,
+                        DataGridBoundColumn.EditingElementStyleProperty,
+                        new Binding
+                        {
+                            Path = new PropertyPath(ComboBoxColumnEditingElementStyleProperty), Source = this
+                        }
+                    );
+                }
+
+                if (
+                    comboBoxColumn.ReadLocalValue(DataGridBoundColumn.EditingElementStyleProperty)
+                    == DependencyProperty.UnsetValue
+                )
+                {
+                    _ = BindingOperations.SetBinding(
+                        comboBoxColumn,
+                        DataGridBoundColumn.EditingElementStyleProperty,
+                        new Binding
+                        {
+                            Path = new PropertyPath(ComboBoxColumnEditingElementStyleProperty), Source = this
+                        }
+                    );
+                }
+
+                break;
+
+            case DataGridTextColumn textBoxColumn:
+                if (
+                    textBoxColumn.ReadLocalValue(DataGridBoundColumn.ElementStyleProperty)
+                    == DependencyProperty.UnsetValue
+                )
+                {
+                    _ = BindingOperations.SetBinding(
+                        textBoxColumn,
+                        DataGridBoundColumn.ElementStyleProperty,
+                        new Binding { Path = new PropertyPath(TextColumnElementStyleProperty), Source = this }
+                    );
+                }
+
+                if (
+                    textBoxColumn.ReadLocalValue(DataGridBoundColumn.EditingElementStyleProperty)
+                    == DependencyProperty.UnsetValue
+                )
+                {
+                    _ = BindingOperations.SetBinding(
+                        textBoxColumn,
+                        DataGridBoundColumn.EditingElementStyleProperty,
+                        new Binding { Path = new PropertyPath(TextColumnEditingElementStyleProperty), Source = this }
+                    );
+                }
+
+                break;
         }
     }
 }