Update the logic for the column widths calculation

For `IsAuto` and `IsStar` columns, additional attribute `IsFixed` is considered.

- `IsAuto &&  IsFixed`: have a manually resized width.
- `IsAuto && !IsFixed`: have a calculated width that fits to each column content of visualized row.
- `IsStar &&  IsFixed`: have a manually resized width.
- `IsStar && !IsFixed`: have a calculated width, from the proportion of remained spaces.

If `IsAbsolute == true`, `IsFixed` is also `true` always.
If `IsStar` has zero ratio `0*`, `IsFixed` is specially set to `true` and the column has zero width.

`DataTable` assigns the width space first to the fixed columns, then unfixed ones.

For the IsFixed == true columns, there's nothing to difficult.

For the column that is IsAuto && !IsFixed, the column size is determined with the following steps:
  - [DataTable.MeasureOverride]
     - The column's `CurerntWidth` is set to best-fit width of its header content.
     - For each visualized `DataRow`s, `InvalidateMeasure()` is invoked.
  - [DataRow.MeasureOverride]
     - Calculates the best-fit width of the column content and increase the column's `CurrentWidth` to get the maximun width.
     - Then, call `DataTable.InvalidateMeasure()`.
  - [DataTable.MeasureOverride]
     - In the last, gets the best-fit width for the column.
     - The mutual `InvalidateMeasure()` call between `DataTable` and `DataRow`s are stopped by the layout system when all element sizes are stable.

For the column that is IsStar && !IsFixed, the column size is determined with the following steps:
  - [DataTable.MeasureOverride]
     - The column's `CurerntWidth` is set to best-fit width of its header content.
     - For each visualized `DataRow`s, InvalidateArrange() is invoked.
  - [DataRow.ArrangeOverride]
     - Remaining space of finalSize.Width is supplied to the star proportion column.

Author: 9rnsr

components/DataTable/src/CommunityToolkit.WinUI.Controls.DataTable.csproj

@@ -12,7 +12,7 @@
   <!-- Sets this up as a toolkit component's source project -->
   <Import Project="$(ToolingDirectory)\ToolkitComponent.SourceProject.props" />
 
-   <PropertyGroup>
+  <PropertyGroup>
     <PackageId>$(PackageIdPrefix).$(PackageIdVariant).Controls.$(ToolkitComponentName)</PackageId>
   </PropertyGroup>
 </Project>

components/DataTable/src/DataTable/DataColumn.cs

@@ -10,29 +10,33 @@ namespace CommunityToolkit.WinUI.Controls;
 [TemplatePart(Name = nameof(PART_ColumnSizer), Type = typeof(ContentSizer))]
 public partial class DataColumn : ContentControl
 {
-    private static GridLength StarLength = new GridLength(1, GridUnitType.Star);
-
     private ContentSizer? PART_ColumnSizer;
 
     private WeakReference<DataTable>? _parent;
 
     internal DataTable? DataTable => _parent?.TryGetTarget(out DataTable? parent) == true ? parent : null;
 
     /// <summary>
-    /// Gets or sets the width of the largest child contained within the visible <see cref="DataRow"/>s of the <see cref="DataTable"/>.
+    /// Gets or sets the internal calculated or manually set width of this column.
+    /// NaN means that the column size is no yet calculated.
     /// </summary>
-    internal double MaxChildDesiredWidth { get; set; }
+    internal double CurrentWidth { get; set; } = double.NaN;
 
     /// <summary>
-    /// Gets or sets the internal copy of the <see cref="DesiredWidth"/> property to be used in calculations, this gets manipulated in Auto-Size mode.
+    /// Gets the internal calculated or manually set width of this column, as a positive value.
     /// </summary>
-    internal GridLength CurrentWidth { get; private set; }
+    internal double ActualCurrentWidth => double.IsNaN(CurrentWidth) ? 0 : CurrentWidth;
+
+    internal bool IsAbsolute => DesiredWidth.IsAbsolute;
 
-    internal bool IsAbsolute => CurrentWidth.IsAbsolute;
+    internal bool IsAuto => DesiredWidth.IsAuto;
 
-    internal bool IsAuto => CurrentWidth.IsAuto;
+    internal bool IsStar => DesiredWidth.IsStar;
 
-    internal bool IsStar => CurrentWidth.IsStar;
+    /// <summary>
+    /// Returns <see langword="true"/> if the column width is fixed with the manual adjustment.
+    /// </summary>
+    internal bool IsFixed { get; set; }
 
     /// <summary>
     /// Gets or sets whether the column can be resized by the user.
@@ -66,10 +70,29 @@ public GridLength DesiredWidth
 
     private static void DesiredWidth_PropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
     {
-        // If the developer updates the size of the column, update our internal copy
-        if (d is DataColumn col)
+        // If the developer updates the size of the column, update our internal value.
+        if (d is DataColumn column)
         {
-            col.CurrentWidth = col.DesiredWidth;
+            if (column.DesiredWidth is { GridUnitType: GridUnitType.Pixel, Value: var value })
+            {
+                column.IsFixed = true;
+                column.CurrentWidth = value;
+            }
+            else if (column.DesiredWidth is { GridUnitType: GridUnitType.Star, Value: 0 })
+            {
+                // Handle DesiredWidth="0*" as fixed zero width column.
+                column.IsFixed = true;
+                column.CurrentWidth = 0;
+            }
+            else
+            {
+                // Reset the manual adjusted width.
+                column.IsFixed = false;
+                column.CurrentWidth = double.NaN;
+            }
+
+            // Request to measure for the IsAutoFit or IsStarProportion columns.
+            column.DataTable?.InvalidateMeasure();
         }
     }
 
@@ -123,9 +146,12 @@ private void PART_ColumnSizer_ManipulationCompleted(object sender, ManipulationC
     private void ColumnResizedByUserSizer()
     {
         // Update our internal representation to be our size now as a fixed value.
-        CurrentWidth = new(this.ActualWidth);
+        if (CurrentWidth != this.ActualWidth)
+        {
+            CurrentWidth = this.ActualWidth;
 
-        // Notify the rest of the table to update
-        DataTable?.ColumnResized();
+            // Notify the rest of the table to update
+            DataTable?.ColumnResized();
+        }
     }
 }

components/DataTable/src/DataTable/DataRow.cs

@@ -16,7 +16,7 @@ public partial class DataRow : Panel
     private DataTable? _parentTable;
 
     private bool _isTreeView;
-    private double _treePadding;
+    internal double TreePadding { get; private set; }
 
     /// <summary>
     /// Initializes a new instance of the <see cref="DataRow"/> class.
@@ -68,6 +68,8 @@ private void DataRow_Unloaded(object sender, RoutedEventArgs e)
     /// <inheritdoc/>
     protected override Size MeasureOverride(Size availableSize)
     {
+        //Debug.WriteLine($"DataRow.MeasureOverride");
+
         // We should probably only have to do this once ever?
         _parentTable ??= InitializeParentHeaderConnection();
 
@@ -95,70 +97,72 @@ protected override Size MeasureOverride(Size availableSize)
         // Handle DataTable Parent
         else
         {
-            if (_parentTable.Children.Count == Children.Count)
+            int maxChildCount = Math.Min(_parentTable.Children.Count, Children.Count);
+
+            // Measure all children which have corresponding visible DataColumns.
+            for (int i = 0; i < maxChildCount; i++)
             {
-                // TODO: Need to check visibility
-                // Measure all children since we need to determine the row's height at minimum
-                for (int i = 0; i < Children.Count; i++)
+                var child = Children[i];
+                var column = _parentTable.Children[i] as DataColumn;
+                if (column?.Visibility != Visibility.Visible)
+                    continue;
+
+                // For TreeView in the first column, we want the header to expand to encompass
+                // the maximum indentation of the tree.
+                //// TODO: We only want/need to do this once? We may want to do if we're not an Auto column too...?
+                if (i == 0 && _isTreeView)
                 {
-                    if (_parentTable.Children[i] is DataColumn { CurrentWidth.GridUnitType: GridUnitType.Auto } col)
+                    // Get our containing grid from TreeViewItem, start with our indented padding
+                    var parentContainer = this.FindAscendant("MultiSelectGrid") as Grid;
+                    if (parentContainer != null)
                     {
-                        Children[i].Measure(availableSize);
-
-                        // For TreeView in the first column, we want the header to expand to encompass
-                        // the maximum indentation of the tree.
-                        double padding = 0;
-                        //// TODO: We only want/need to do this once? We may want to do if we're not an Auto column too...?
-                        if (i == 0 && _isTreeView)
+                        TreePadding = parentContainer.Padding.Left;
+                        // We assume our 'DataRow' is in the last child slot of the Grid, need to know
+                        // how large the other columns are.
+                        for (int j = 0; j < parentContainer.Children.Count - 1; j++)
                         {
-                            // Get our containing grid from TreeViewItem, start with our indented padding
-                            var parentContainer = this.FindAscendant("MultiSelectGrid") as Grid;
-                            if (parentContainer != null)
-                            {
-                                _treePadding = parentContainer.Padding.Left;
-                                // We assume our 'DataRow' is in the last child slot of the Grid, need to know how large the other columns are.
-                                for (int j = 0; j < parentContainer.Children.Count - 1; j++)
-                                {
-                                    // TODO: We may need to get the actual size here later in Arrange?
-                                    _treePadding += parentContainer.Children[j].DesiredSize.Width;
-                                }
-                            }
-                            padding = _treePadding;
+                            // TODO: We may need to get the actual size here later in Arrange?
+                            TreePadding += parentContainer.Children[j].DesiredSize.Width;
                         }
+                    }
+                }
 
-                        // TODO: Do we want this to ever shrink back?
-                        var prev = col.MaxChildDesiredWidth;
-                        col.MaxChildDesiredWidth = Math.Max(col.MaxChildDesiredWidth, Children[i].DesiredSize.Width + padding);
-                        if (col.MaxChildDesiredWidth != prev)
-                        {
-                            // If our measure has changed, then we have to invalidate the arrange of the DataTable
-                            _parentTable.ColumnResized();
-                        }
+                double width = column.ActualCurrentWidth;
 
-                    }
-                    else if (_parentTable.Children[i] is DataColumn { CurrentWidth.GridUnitType: GridUnitType.Pixel } pixel)
-                    {
-                        Children[i].Measure(new(pixel.DesiredWidth.Value, availableSize.Height));
-                    }
-                    else
+                if (column.IsAuto && !column.IsFixed)
+                {
+                    // We should get the *required* width from the child.
+                    child.Measure(new Size(double.PositiveInfinity, availableSize.Height));
+
+                    var childWidth = child.DesiredSize.Width;
+                    if (i == 0)
+                        childWidth += TreePadding;
+
+                    // If the adjusted column width is smaller than the current cell width,
+                    // we should call DataTable.MeasureOverride() again to extend it.
+                    if (!(width >= childWidth))
                     {
-                        Children[i].Measure(availableSize);
+                        _parentTable.InvalidateMeasure();
                     }
-
-                    maxHeight = Math.Max(maxHeight, Children[i].DesiredSize.Height);
                 }
+                else
+                {
+                    child.Measure(new Size(width, availableSize.Height));
+                }
+
+                maxHeight = Math.Max(maxHeight, child.DesiredSize.Height);
             }
 
-            // TODO: What do we want to do if there's unequal children in the DataTable vs. DataRow?
+            // Returns the same width as the DataTable requests, regardless of the IsAutoFit column presence.
+            return new Size(_parentTable.DesiredSize.Width, maxHeight);
         }
-
-        // Otherwise, return our parent's size as the desired size.
-        return new(_parentTable?.DesiredSize.Width ?? availableSize.Width, maxHeight);
     }
 
     /// <inheritdoc/>
     protected override Size ArrangeOverride(Size finalSize)
     {
+        //Debug.WriteLine($"DataRow.ArrangeOverride");
+
         // If we don't have DataTable, just layout children like a horizontal StackPanel.
         if (_parentTable is null)
         {
@@ -182,37 +186,34 @@ protected override Size ArrangeOverride(Size finalSize)
         // Handle DataTable Parent
         else
         {
-            int column = 0;
-            double x = 0;
-            double spacing = _parentTable.ColumnSpacing;
-            double width = 0;
+            int maxChildCount = Math.Min(_parentTable.Children.Count, Children.Count);
 
-            int i = 0;
-            foreach (UIElement child in Children.Where(static e => e.Visibility == Visibility.Visible))
+            double columnSpacing = _parentTable.ColumnSpacing;
+            double x = double.NaN;
+
+            // Arrange all children which have corresponding visible DataColumns.
+            for (int i = 0; i < maxChildCount; i++)
             {
-                // TODO: Need to check Column visibility here as well...
-                if (column < _parentTable.Children.Count)
-                {
-                    // TODO: This is messy...
-                    width = (_parentTable.Children[column++] as DataColumn)?.ActualWidth ?? 0;
-                }
+                var column = _parentTable.Children[i] as DataColumn;
+                if (column?.Visibility != Visibility.Visible)
+                    continue;
 
-                // Note: For Auto, since we measured our children and bubbled that up to the DataTable layout, then the DataColumn size we grab above should account for the largest of our children.
-                if (i == 0)
-                {
-                    child.Arrange(new Rect(x, 0, width, finalSize.Height));
-                }
+                if (double.IsNaN(x))
+                    x = 0;
                 else
-                {
-                    // If we're in a tree, remove the indentation from the layout of columns beyond the first.
-                    child.Arrange(new Rect(x - _treePadding, 0, width, finalSize.Height));
-                }
+                    x += columnSpacing;
+
+                double width = column.ActualCurrentWidth;
+                if (i == 0)
+                    width = Math.Max(0, width - TreePadding);
+
+                var child = Children[i];
+                child?.Arrange(new Rect(x, 0, width, finalSize.Height));
 
-                x += width + spacing;
-                i++;
+                x += width;
             }
 
-            return new Size(x - spacing, finalSize.Height);
+            return new Size(x, finalSize.Height);
         }
     }
 }