[DataTable] Horizontal scrolling problem in DataTable

Bắt đầu bằng cách tái hiện sự cố với mẫu XAML WinUI 3 C# ListView và DataTable được cung cấp, tập trung vào HorizontalScrollBarVisibility="Auto", DesiredWidth="auto" và các giá trị Description dài. Theo dõi hành vi bố cục của DataTable và DataRow, sau đó xác minh rằng các cột có thể hiển thị toàn bộ nội dung của chúng và thanh cuộn được ẩn khi không cần cuộn ngang.

Describe the bug

When we enable horizontal scrollbars in the ListView parent of DataTable, it remains always visible even when not needed.

Also, when a column has lots of content it doesn't expand property to take as much horizontal space as needed to display its content completely, it just makes the rest of the content hidden.

Steps to reproduce

Repro sample

Code Behind


using System.Collections.ObjectModel;
using Microsoft.UI.Xaml.Controls;

namespace AppControlManager.Pages;

public sealed partial class Test : Page
{
	private static Test? _instance;
	public static Test Instance => _instance ??= new Test();

	public ListView MainListViewControl => MainListView;

	public Test()
	{
		this.InitializeComponent();
		_instance = this;

		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[6].Name = "Hello, testing!";
		items[200].Description = "This is a very long description that should have been out view at the start This is a very long description that should have been out view at the start";
		items[1500].Description = "This is a very long description that should have been out of view at the start...";

		InventoryItems = [.. items];
	}
	public const int NumberOfRows = 10000;
	public ObservableCollection<InventoryItem> InventoryItems { get; set; }
}

public class InventoryItem
{
	public int Id { get; set; }
	public string? Name { get; set; }
	public string? Description { get; set; }
	public int Quantity { get; set; }
}


<br>

XAML


<Page
    x:Class="AppControlManager.Pages.Test"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppControlManager.Pages"
    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
    xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid>
        <ListView x:Name="MainListView" Height="300"
                  HorizontalAlignment="Stretch"
                  VerticalAlignment="Top"
                  SelectionMode="Multiple"
                  ScrollViewer.HorizontalScrollBarVisibility="Auto"
                  ScrollViewer.HorizontalScrollMode="Enabled"
                  ItemsSource="{x:Bind InventoryItems}">
            <ListView.Header>
                <Border Padding="8,4,0,4"
                    Background="{ThemeResource SolidBackgroundFillColorTertiaryBrush}"
                    CornerRadius="4">
                    <interactivity:Interaction.Behaviors>
                        <behaviors:StickyHeaderBehavior />
                    </interactivity:Interaction.Behaviors>
                    <controls:DataTable ColumnSpacing="16">
                        <controls:DataColumn Content="Id" CanResize="True" DesiredWidth="auto" HorizontalAlignment="Stretch"/>
                        <controls:DataColumn CanResize="True"
                                         Content="Name" HorizontalAlignment="Stretch" DesiredWidth="auto"/>
                        <controls:DataColumn CanResize="True" HorizontalAlignment="Stretch" DesiredWidth="auto">
                            <TextBlock FontWeight="SemiBold"
                                   Text="Description" />
                        </controls:DataColumn>
                        <controls:DataColumn Content="Quantity" CanResize="True" HorizontalAlignment="Stretch" DesiredWidth="auto"/>
                    </controls:DataTable>
                </Border>
            </ListView.Header>
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="local:InventoryItem">
                    <controls:DataRow HorizontalAlignment="Left">
                        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Stretch"
                               Text="{x:Bind Id}" />
                        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Stretch"
                               Text="{x:Bind Name}" />
                        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Stretch"
                               Text="{x:Bind Description}" />
                        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Stretch"
                               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>
    </Grid>
</Page>


<br>

Expected behavior

I expect each column to expand wide to display its content completely so i can use the scrollbar to horizontally navigate.

I also expect the horizontal scrollbar to not be visible when it's set to "Auto" in the parent ListView, when there is nothing to horizontally scroll to.

Screenshots

Code Platform

• UWP
• WinAppSDK / WinUI 3
• Web Assembly (WASM)
• Android
• iOS
• MacOS
• Linux / GTK

Windows Build Number

• Windows 10 1809 (Build 17763)
• Windows 10 1903 (Build 18362)
• Windows 10 1909 (Build 18363)
• Windows 10 2004 (Build 19041)
• Windows 10 20H2 (Build 19042)
• Windows 10 21H1 (Build 19043)
• Windows 11 21H2 (Build 22000)
• Other (specify)

Other Windows Build number

Windows 11 build 26120.3281

App minimum and target SDK version

• Windows 10, version 1809 (Build 17763)
• Windows 10, version 1903 (Build 18362)
• Windows 10, version 1909 (Build 18363)
• Windows 10, version 2004 (Build 19041)
• Other (specify)

Other SDK version

Windows 11 build 22621

Visual Studio Version

Preview

Visual Studio Build Number

17.14.0 Preview 1.0

Device form factor

Desktop

Additional context

No response

Help us help you

No, I'm unable to contribute a solution.