Improve DataTable control

components/DataTable/samples/DataTable.md

@@ -36,14 +36,6 @@ can be made to look like a table of data:
 There are limitations here with having fixed column sizes that can be difficult to align. Their definitions are
 also duplicated, and every item is recreating this layout and duplicating it within the Visual Tree.
 
-## DataRow Hybrid Setup
-
-As a first step, moving to **DataTable** is easy, just replace the `Grid` in your `ItemsTemplate` with the `DataRow` panel
-and remove the Column attributes from your controls. `DataRow` automatically will lay each subsequent control in the next column
-for you automatically:
-
-> [!Sample DataTableHybridSample]
-
 ## DataTable Setup
 
 The `DataTable` setup provides an easier way to define and manage your columns within your header for this coordinated effort

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

@@ -4,24 +4,39 @@
 
 namespace CommunityToolkit.WinUI.Controls;
 
+/// <summary>
+/// Represents a <see cref="DataTable"/> column.
+/// </summary>
 [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 internal calculated or manually set width of this column.
+    /// NaN means that the column size is no yet calculated.
+    /// </summary>
+    internal double CurrentWidth { get; set; } = double.NaN;
+
     /// <summary>
-    /// Gets or sets the width of the largest child contained within the visible <see cref="DataRow"/>s of the <see cref="DataTable"/>.
+    /// Gets the internal calculated or manually set width of this column, as a positive value.
     /// </summary>
-    internal double MaxChildDesiredWidth { get; set; }
+    internal double ActualCurrentWidth => double.IsNaN(CurrentWidth) ? 0 : CurrentWidth;
+
+    internal bool IsAbsolute => DesiredWidth.IsAbsolute;
+
+    internal bool IsAuto => DesiredWidth.IsAuto;
+
+    internal bool IsStar => DesiredWidth.IsStar;
 
     /// <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.
+    /// Returns <see langword="true"/> if the column width is fixed with the manual adjustment.
     /// </summary>
-    internal GridLength CurrentWidth { get; private set; }
+    internal bool IsFixed { get; set; }
 
     /// <summary>
     /// Gets or sets whether the column can be resized by the user.
@@ -55,18 +70,41 @@ 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();
         }
     }
 
+    /// <summary>
+    /// Initializes a new instance of the <see cref="DataColumn"/> class.
+    /// </summary>
     public DataColumn()
     {
         this.DefaultStyleKey = typeof(DataColumn);
     }
 
+    /// <inheritdoc/>
     protected override void OnApplyTemplate()
     {
         if (PART_ColumnSizer != null)
@@ -108,13 +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);
-
-        // Notify the rest of the table to update
-        if (_parent?.TryGetTarget(out DataTable? parent) == true
-            && parent != null)
+        if (CurrentWidth != this.ActualWidth)
         {
-            parent.ColumnResized();
+            CurrentWidth = this.ActualWidth;
+
+            // Notify the rest of the table to update
+            DataTable?.ColumnResized();
         }
     }
 }

components/DataTable/src/DataTable/DataColumn.xaml

@@ -18,6 +18,7 @@
             <Setter Property="HorizontalContentAlignment" Value="Stretch" />
             <Setter Property="VerticalContentAlignment" Value="Center" />
             <Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}" />
+            <Setter Property="IsTabStop" Value="False" />
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="controls:DataColumn">