CommunityToolkit / CommunityToolkit/Labs-Windows

[DataTable] Horizontal scrolling problem in DataTable

Open
#645 3 comments 2 reactions 0 assignees View on GitHub
bug :bug: experiment :test_tube: functional help wanted issue 🧪 labs 🧪
Dominant language
C#
Stars
482
Forks
89
PR merge metrics
No merged PRs in 30d

Description

### 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

```text
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 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; }
}


XAML






























<Setter Property="HorizontalContentAlignment" Value="Left" />





```

### 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

![Image](https://github.com/user-attachments/assets/a30a2c2d-7672-4fa1-bd59-a2b1aa813f5d)

![Image](https://github.com/user-attachments/assets/9c573fac-747b-49e2-b7e4-0e6298f5d9d1)

### Code Platform

- [ ] UWP
- [x] 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)
- [x] 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)
- [x] 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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.