microsoft / microsoft-ui-xaml

Windows UI Library: the latest Windows 10 native controls and Fluent styles for your applications
MIT License
6.35k stars 678 forks source link

Margins of ListViewItem top Margin visibly changes if it ListViewItem shrinks or grows. #8217

Open ScottAtBarco opened 1 year ago

ScottAtBarco commented 1 year ago

Describe the bug

If I have any item in a ListView (or GridView) container change height size, e.g. as the result of a checkbox or toggle button changing, the space above the item shrinks if the item grows and grows if the item shrinks, seemingly ignore any Margin defined on the item.

Steps to reproduce the bug

    <ListView
    HorizontalAlignment="Left"
    Width="200"
    Margin="10"
    BorderBrush="Green"
    BorderThickness="1">
    <Grid
        BorderBrush="Red"
        BorderThickness="1"
        RowDefinitions="Auto,Auto">
        <CheckBox x:Name="CheckBox" Content="CheckBox" />
        <Rectangle
            Grid.Row="2"
            Width="50"
            Height="50"
            Fill="Blue"
            Visibility="{x:Bind CheckBox.IsChecked, Mode=OneWay}" />
    </Grid>
</ListView>

Expected behavior

The distance between a ListView item and its predecessor (or the top of the ListView if it's the first item) should not change when the height of the item changes.

Screenshots

image image

NuGet package version

WinUI 3 - Windows App SDK 1.2.3: 1.2.230118.102

Windows version

Windows 10 (21H2): Build 19044

Additional context

ListBox doesn't have this problem (but it doesn't support drag-and-drop reordering out of the box so less desireable for my purposes).

With the XAML provided, checking/unchecking the box shows/hides the rectangle. It makes no difference if you wrap the Grid in the example in a ListViewItem. GridView has the same problem. I suspect TreeView might have this issue, but it's more complicated to construct a repro and its re-order behavior is cumbersome to use.

ranjeshj commented 11 months ago

This seems to be an issue with ListViewItem's layout. I can repro with this simpler scenario with just a stackpanel and ListviewItem

<StackPanel
HorizontalAlignment="Left"
Width="200"
Margin="10"
BorderBrush="Green"
BorderThickness="1">
    <ListViewItem>
        <Grid
    BorderBrush="Red"
    BorderThickness="1"
    RowDefinitions="Auto,Auto">
            <CheckBox x:Name="CheckBox" Content="CheckBox" />
            <Rectangle
        Grid.Row="2"
        Width="50"
        Height="50"
        Fill="Blue"
        Visibility="{x:Bind CheckBox.IsChecked, Mode=OneWay}" />
        </Grid>
    </ListViewItem>
</StackPanel>