Provide suitable DataRow behavior when DataTable is not present

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,38 @@
+<!--  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.ItemContainerStyle>
+            <Style BasedOn="{StaticResource DefaultListViewItemStyle}"
+                   TargetType="ListViewItem">
+                <Setter Property="HorizontalContentAlignment" Value="Left" />
+            </Style>
+        </ListView.ItemContainerStyle>-->
+    </ListView>
+</Page>

components/DataTable/samples/DataTable.md

@@ -62,6 +62,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/DataTable/DataRow.cs

@@ -84,17 +84,33 @@ protected override Size MeasureOverride(Size availableSize)
 
         double maxHeight = 0;
 
-        if (Children.Count > 0)
+        // If we don't have a grid, provides equal widths to child elements.
+        if (_parentPanel is null)
         {
-            // If we don't have a grid, just measure first child to get row height and take available space
-            if (_parentPanel is null)
+            double width = this.DesiredSize.Width;
+
+            if (!double.IsInfinity(availableSize.Width))
+                width = Math.Max(width, availableSize.Width);
+
+            for (int i = 0; i < Children.Count; i++)
             {
-                Children[0].Measure(availableSize);
-                return new Size(availableSize.Width, Children[0].DesiredSize.Height);
+                var child = Children[i];
+                if (child?.Visibility != Visibility.Visible)
+                    continue;
+
+                child.Measure(availableSize);
+
+                maxHeight = Math.Max(maxHeight, child.DesiredSize.Height);
             }
+
+            return new Size(width, maxHeight);
+        }
+
+        if (Children.Count > 0)
+        {
             // Handle DataTable Parent
-            else if (_parentTable != null
-                     && _parentTable.Children.Count == Children.Count)
+            if (_parentTable != null &&
+                _parentTable.Children.Count == Children.Count)
             {
                 // TODO: Need to check visibility
                 // Measure all children since we need to determine the row's height at minimum
@@ -178,19 +194,43 @@ protected override Size MeasureOverride(Size availableSize)
     /// <inheritdoc/>
     protected override Size ArrangeOverride(Size finalSize)
     {
+        // If we don't have a grid, provides equal widths to child elements.
+        if (_parentPanel is null)
+        {
+            if (Children.Count == 0)
+                return new Size(0, finalSize.Height);
+
+            double x = 0;
+            double width = finalSize.Width / Children.Count;
+
+            for (int i = 0; i < Children.Count; i++)
+            {
+                var child = Children[i];
+                if (child?.Visibility != Visibility.Visible)
+                    continue;
+
+                child.Arrange(new Rect(x, 0, width, finalSize.Height));
+
+                x += width;
+            }
+
+            return new Size(x, finalSize.Height);
+        }
+
         int column = 0;
-        double x = 0;
 
         // Try and grab Column Spacing from DataTable, if not a parent Grid, if not 0.
         double spacing = _parentTable?.ColumnSpacing ?? (_parentPanel as Grid)?.ColumnSpacing ?? 0;
 
-        double width = 0;
-
         if (_parentPanel != null)
         {
+            double x = 0;
+
             int i = 0;
             foreach (UIElement child in Children.Where(static e => e.Visibility == Visibility.Visible))
             {
+                double width = 0;
+
                 if (_parentPanel is Grid grid &&
                     column < grid.ColumnDefinitions.Count)
                 {