Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fluent Theme: ListView inside TabControl has erratic resize behavior when scrolling vertically #9939

Open
bent-rasmussen opened this issue Oct 11, 2024 · 0 comments

Comments

@bent-rasmussen
Copy link

Description

When nesting a ListView inside a TabControl, it can exhibit strange resize behavior when scrolling vertically. Since RC2 the ListView seemingly wants to use as little horizontal space as possible but this leads to usability issues as can be seen below.

Reproduction Steps

Create a .NET 9 WPF application and use the following markup in MainWindow.xaml:

<Window
    x:Class="Fluent_ListViewScrollBarJumps.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:Fluent_ListViewScrollBarJumps"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    ThemeMode="Light"
    mc:Ignorable="d">
    <Grid Margin="10">

        <TabControl>
            <TabItem Header="Test">
                <ListView ItemsSource="{Binding Path=Items, Mode=OneWay}" />
            </TabItem>
        </TabControl>

    </Grid>
</Window>

In MainWindow.xaml.cs code-behind, use this code:

using System.Collections.ObjectModel;
using System.Windows;

namespace Fluent_ListViewScrollBarJumps;

/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        void Add(int max)
        {
            var n = Random.Shared.Next(1, max);
            Items.Add(LoremIpsum[..n]);
        }

        for (var i = 0; i < 1_000; i++)
        {
            if (i <= 100)
            {
                Add(10);
            }
            else if (i <= 500)
            {
                Add(50);
            }
            else
            {
                Add(120);
            }
        }

        DataContext = this;
    }

    private const string LoremIpsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

    public ObservableCollection<string> Items { get; } = [];
}

Expected behavior

The vertical scrollbar stays at the same horizontal position (here the ThemeMode attribute was removed).

Image

Actual behavior

The vertical scrollbar jumps to the right when scrolling down.

Image

Regression?

This defect was introduced in the switch between .NET 9 RC1 and RC2.

Known Workarounds

No response

Impact

Makes ListView inside a TabControl unusable.

Configuration

Property Value
SDK .NET 9 RC2
OS Name Microsoft Windows 11 Pro
Version 10.0.22631 Build 22631
System SKU Surface_Pro_8_1983

Other information

No response

@bent-rasmussen bent-rasmussen changed the title Fluent Theme: ListView inside TabControl has erratic resize behavior when scrolling vertically Fluent Theme: ListView inside TabControl has erratic resize behavior when scrolling vertically Oct 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant