Improve DataTable control

components/DataTable/samples/DataRowWithoutDataTableSample.cs

@@ -0,0 +1,39 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using CommunityToolkit.WinUI.Controls;
+
+namespace DataTableExperiment.Samples;
+
+[ToolkitSample(id: nameof(DataRowWithoutDataTableSample), "DataRows without DataTable Example", description: $"A sample for showing the default layout of {nameof(DataRow)} withou {nameof(DataTable)} control.")]
+public sealed partial class DataRowWithoutDataTableSample : Page
+{
+    public const int NumberOfRows = 6;
+
+    public ObservableCollection<InventoryItem> InventoryItems { get; set; }
+
+    public DataRowWithoutDataTableSample()
+    {
+        InventoryItem[] items = new InventoryItem[NumberOfRows];
+
+        for (int i = 0; i < NumberOfRows; i++)
+        {
+            items[i] = new()
+            {
+                Id = i,
+                Name = i.ToString(),
+                Description = i.ToString(),
+                Quantity = i,
+            };
+        }
+
+        items[3].Name = "Hello, testing!";
+
+        items[5].Description = "This is a very long description that should have been out of view at the start...";
+
+        InventoryItems = new(items);
+
+        this.InitializeComponent();
+    }
+}

components/DataTable/samples/DataRowWithoutDataTableSample.xaml

@@ -0,0 +1,32 @@
+<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
+<Page x:Class="DataTableExperiment.Samples.DataRowWithoutDataTableSample"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
+      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
+      xmlns:local="using:DataTableExperiment.Samples"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+    <ListView ItemsSource="{x:Bind InventoryItems}">
+
+        <!-- no DataTable in <ListView.Header> -->
+
+        <ListView.ItemTemplate>
+            <DataTemplate x:DataType="local:InventoryItem">
+                <controls:DataRow>
+                    <TextBlock VerticalAlignment="Center"
+                               Text="{x:Bind Id}" />
+                    <TextBlock VerticalAlignment="Center"
+                               Text="{x:Bind Name}" />
+                    <TextBlock VerticalAlignment="Center"
+                               Text="{x:Bind Description}" />
+                    <TextBlock VerticalAlignment="Center"
+                               Text="{x:Bind Quantity}" />
+                </controls:DataRow>
+            </DataTemplate>
+        </ListView.ItemTemplate>
+    </ListView>
+</Page>

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
@@ -62,6 +54,12 @@ If you don't need headers and want to show a simple table of data, just don't pr
 
 > [!Sample DataTableBlankHeaderSample]
 
+### DataRow without DataTable
+
+If you don't provide `DataTable` control, `DataRow` child items will be given equal widths:
+
+> [!Sample DataRowWithoutDataTableSample]
+
 ### Virtualization
 
 Since `DataTable` is just built on top of `ListView` it can handle many data rows just the same as a ListView can.

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,21 +10,34 @@ 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;
 
+    // Pass-thru convenience helper to get reference from WeakReference; computed each time, do not store result!
+    private 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.
@@ -58,10 +71,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();
         }
     }
 
@@ -115,13 +147,10 @@ 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);
+        CurrentWidth = this.ActualWidth;
+        IsFixed = true;
 
         // Notify the rest of the table to update
-        if (_parent?.TryGetTarget(out DataTable? parent) == true
-            && parent != null)
-        {
-            parent.ColumnResized();
-        }
+        DataTable?.ColumnResized();
     }
 }