search

dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
22.2k stars 1.75k forks source link

CollectionView or ListView inside Border or Frame with nested Grids throws exception on dragging and resizing #15935

Open vadimffe opened 1 year ago

vadimffe commented 1 year ago

Description

I have been testing NET MAUI (NET 7 with latest updates for Visual Studio and Windows) with different native components and recently noticed several issues.

  1. Once I wrap my layout, that is having CollectionView or ListView inside Frame window, resize on Windows 11 or Windows 10 is not aligning properly CollectionView or ListView items. However changing Frame to Border is fixing this. So Border seems to be acting differently. See video below for demonstration (as you can see at certain point there is an empty space on the right and CollectionView is not taking all the width):

https://github.com/dotnet/maui/assets/72302395/69c7bbb5-6c01-4fed-8999-9a42ebe03f36

  1. While wrapping layout that is having CollectionView or ListView inside Frame or Border, dragging application window from one monitor to another with different scale and resolution on Windows 10.0.19045 is crashing application. However on Windows 11 10.0.22621 Build 22621 it seems to be working fine. Also see below examples of code that is not crashing and that is crashing application on Windows 10.

Exception:

Windows version:
10.0.19045

ExceptionHelpers.<ThrowExceptionForHR>g__Throw|20_0 (Int32 hr)
Microsoft.UI.Xaml.LayoutCycleException: A cycle occurred while laying out the GUI.

WinRT
ExceptionHelpers.<ThrowExceptionForHR>g__Throw|20_0 (Int32 hr)
WinRT
ExceptionHelpers.ThrowExceptionForHR (Int32 hr)
ABI.Windows.ApplicationModel.Core
IUnhandledErrorMethods.Propagate (IObjectReference _obj)
Windows.ApplicationModel.Core
UnhandledError.Propagate ()
Microsoft.AppCenter.Utils
ApplicationLifecycleHelperWinUI.<ctor>b__0_3 (Object sender, UnhandledErrorDetectedEventArgs eventArgs)

Example of code used (crash on Windows 10 with above exception):

  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Frame Margin="5,5,5,10" Grid.Column="0" Padding="10,0,10,10" BackgroundColor="#234543" HandlerChanged="OnHandlerChanged">
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Label Text="Box 1" FontSize="14" FontAttributes="None" Padding="5,10,0,5" Grid.Row="0"></Label>
        <CollectionView ItemsSource="{Binding CollectionItems}" VerticalScrollBarVisibility="Always" Grid.Row="1" SelectionMode="None">
          <CollectionView.ItemTemplate>
            <DataTemplate>
              <Grid Padding="5" HorizontalOptions="FillAndExpand">
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Label Grid.Column="0" Text="{Binding Id}" Margin="0,0,10,0" HorizontalOptions="Start"/>
                <Label Grid.Column="1" Text="{Binding Name}" Padding="0,0,10,0" HorizontalOptions="End"/>
              </Grid>
            </DataTemplate>
          </CollectionView.ItemTemplate>
        </CollectionView>
      </Grid>
    </Frame>

    <Frame Margin="5,5,5,10" Grid.Column="1" Padding="10,0,10,10" BackgroundColor="#234543" HandlerChanged="OnHandlerChanged">
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Label Text="Box 1" FontSize="14" FontAttributes="None" Padding="5,10,0,5" Grid.Row="0"></Label>
        <CollectionView ItemsSource="{Binding CollectionItems}" VerticalScrollBarVisibility="Always" Grid.Row="1" SelectionMode="None">
          <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="models:DataModel">
              <Grid Padding="5" HorizontalOptions="FillAndExpand">
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Label Grid.Column="0" Text="{Binding Id}" Margin="0,0,10,0" HorizontalOptions="Start"/>
                <Label Grid.Column="1" Text="{Binding Name}" Padding="0,0,10,0" HorizontalOptions="End"/>
              </Grid>
            </DataTemplate>
          </CollectionView.ItemTemplate>
        </CollectionView>
      </Grid>
    </Frame>

  </Grid>

Example of code used (does NOT crash on Windows 10):

  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

      <Grid Margin="5,5,5,10" Grid.Column="0" Padding="10,0,10,10" BackgroundColor="#234543" HandlerChanged="OnHandlerChanged">
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Label Text="Box 1" FontSize="14" FontAttributes="None" Padding="5,10,0,5" Grid.Row="0"></Label>
        <CollectionView ItemsSource="{Binding CollectionItems}" VerticalScrollBarVisibility="Always" Grid.Row="1" SelectionMode="None">
          <CollectionView.ItemTemplate>
            <DataTemplate>
              <Grid Padding="5" HorizontalOptions="FillAndExpand">
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Label Grid.Column="0" Text="{Binding Id}" Margin="0,0,10,0" HorizontalOptions="Start"/>
                <Label Grid.Column="1" Text="{Binding Name}" Padding="0,0,10,0" HorizontalOptions="End"/>
              </Grid>
            </DataTemplate>
          </CollectionView.ItemTemplate>
        </CollectionView>
      </Grid>

      <Grid Margin="5,5,5,10" Grid.Column="1" Padding="10,0,10,10" BackgroundColor="#234543" HandlerChanged="OnHandlerChanged">
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Label Text="Box 1" FontSize="14" FontAttributes="None" Padding="5,10,0,5" Grid.Row="0"></Label>
        <CollectionView ItemsSource="{Binding CollectionItems}" VerticalScrollBarVisibility="Always" Grid.Row="1" SelectionMode="None">
          <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="models:DataModel">
              <Grid Padding="5" HorizontalOptions="FillAndExpand">
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Label Grid.Column="0" Text="{Binding Id}" Margin="0,0,10,0" HorizontalOptions="Start"/>
                <Label Grid.Column="1" Text="{Binding Name}" Padding="0,0,10,0" HorizontalOptions="End"/>
              </Grid>
            </DataTemplate>
          </CollectionView.ItemTemplate>
        </CollectionView>
      </Grid>

  </Grid>

Steps to Reproduce

  1. Create NET MAUI APP
  2. Add CollectionView or ListView
  3. Add template for CollectionView or ListView
  4. Add label on top of the CollectionView or ListView
  5. Wrap this all into Frame or Border

Link to public reproduction project repository

https://github.com/vadimffe/DraggingIssueNetMAUI

Version with bug

7.0.306

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

Windows 10.0.19045, Windows 11 10.0.22621 Build 22621

Did you find any workaround?

No response

Relevant log output

No response

jaosnz-rep commented 9 months ago

Verified this issue with Visual Studio Enterprise 17.9.0 Preview 4. Can repro on Windows platforms with sample project. https://github.com/vadimffe/DraggingIssueNetMAUI