From 2264ed5142b8ffae3aaa87e98f6fadaf2249a134 Mon Sep 17 00:00:00 2001 From: k-hara Date: Wed, 29 Apr 2026 14:19:14 +0900 Subject: [PATCH 1/2] If DataTable is not present, DataRow provides equal widths to the child elements This added behavior just covers a corner case. If a user fails to place corresponding DataTable at correct position, displaying somethings is better than nothing. If there's no main controller to remember the column widths, each DataRow uses the full width of its parent element to provide equal widths to its child elements. --- components/DataTable/src/DataTable/DataRow.cs | 60 +++++++++++++++---- 1 file changed, 50 insertions(+), 10 deletions(-) diff --git a/components/DataTable/src/DataTable/DataRow.cs b/components/DataTable/src/DataTable/DataRow.cs index 19f34e947..aba9cef1a 100644 --- a/components/DataTable/src/DataTable/DataRow.cs +++ b/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) /// 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) { From 09265d530b75eba85baaef597a5d7a92d3ffa0d4 Mon Sep 17 00:00:00 2001 From: k-hara Date: Wed, 29 Apr 2026 14:19:24 +0900 Subject: [PATCH 2/2] Add sample for the 'DataRow without DataTable' case --- .../samples/DataRowWithoutDataTableSample.cs | 39 +++++++++++++++++++ .../DataRowWithoutDataTableSample.xaml | 32 +++++++++++++++ components/DataTable/samples/DataTable.md | 6 +++ 3 files changed, 77 insertions(+) create mode 100644 components/DataTable/samples/DataRowWithoutDataTableSample.cs create mode 100644 components/DataTable/samples/DataRowWithoutDataTableSample.xaml diff --git a/components/DataTable/samples/DataRowWithoutDataTableSample.cs b/components/DataTable/samples/DataRowWithoutDataTableSample.cs new file mode 100644 index 000000000..a55537528 --- /dev/null +++ b/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 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(); + } +} diff --git a/components/DataTable/samples/DataRowWithoutDataTableSample.xaml b/components/DataTable/samples/DataRowWithoutDataTableSample.xaml new file mode 100644 index 000000000..efaaf0dbf --- /dev/null +++ b/components/DataTable/samples/DataRowWithoutDataTableSample.xaml @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + diff --git a/components/DataTable/samples/DataTable.md b/components/DataTable/samples/DataTable.md index c9cdf1a98..9feabffff 100644 --- a/components/DataTable/samples/DataTable.md +++ b/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.