[Bug] Changing ItemsLayout of CollectionView at runtime does not work on UWP

[DoubleL222]

Description

Changing the ItemsLayout of CollectionView at runtime does not work properly on UWP. The collection is not affected after changing the ItemsLayout property. I tried setting it to:

• CollectionOne.ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical);
  • Expected: Create a vertical, scrollable list
  • Actual: Same! (Works)
• CollectionOne.ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal);
  • Expected: Create a horizontal, scrollable list
  • Actual: The list is not scrollable
• new GridItemsLayout(2, ItemsLayoutOrientation.Vertical);
  • Expected: Create a vertical, 2 columned, scrollable grid
  • Actual: The grid has only one column (it makes 2 columns once you resize the window)
• new GridItemsLayout(3, ItemsLayoutOrientation.Vertical);
  • Expected: Create a vertical, 3 columned, scrollable grid
  • Actual: The grid has only one column (it makes 3 columns once you resize the window)

Steps to Reproduce

1. Run my zipped project and test the functionality
   CollectionViewBugDemo.zip

or

1. Take my three files and add them to a new project (common) and test the functionality.
   MainPageAndModel.zip

or

1. Build basic CollectionView with some content
2. Create a button to change the ItemsLayout property of the collection
3. Change the CollectionView ItemsLayout property to any described above AT RUNTIME!
4. The collection view is not changed

Relevant code

    public void SetVerticalList()
    {
        CollectionOne.ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical);
    }

    public void SetHorizontalList()
    {
        CollectionOne.ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal);
    }

    public void SetTwoGrid()
    {
        CollectionOne.ItemsLayout = new GridItemsLayout(2, ItemsLayoutOrientation.Vertical);
    }

    public void SetThreeGrid()
    {
        CollectionOne.ItemsLayout = new GridItemsLayout(3, ItemsLayoutOrientation.Vertical);
    }

Basic Information

• Version with issue: (Xamarin.Forms) v4.8.0.1451

• Platform Target Frameworks:

  • UWP: Windows 10, version 2004 (10.0; Build 19041)

• Affected Devices: Windows 10 PC

Environment

Microsoft Visual Studio Enterprise 2019
Version 16.8.4

Screenshots

Should be 2 columns

Should be scrollable

Workaround

Resizing the window sometimes applies the appropriate ItemsLayout.

[jsuarezruiz]

Can reproduce the issue.

[hartez]

@jsuarezruiz The problems switching from linear to grid view can be solved by adding a call to UpdateItemSize() at the end of the FindItemsWrapGrid() method in FormsGridView.cs.

We have a UI test for this (Issue10482), but it works accidentally - because the images in the test grid are loaded asynchronously, they cause a cell resize which refreshes the grid. Basically the images are doing the same thing as the window resizing is doing in the report above - calling UpdateItemSize.

The change could probably be made in 4.8 and then merged up to 5.0.

@DoubleL222 For the horizontal scroll bar, I think you can work around this for now by setting the HorizontalScrollBarVisibility property to 'Always' when you switch to a horizontal grid.

@jsuarezruiz In StructuredItemsView.cs, I think we need to set _defaultHorizontalScrollVisibility and _defaultVerticalScrollVisibility to null in UpdateItemsLayout, after we call SetNativeControl but before we call UpdateVerticalScrollBarVisibility() and UpdateHorizontalScrollBarVisibility().

[jsuarezruiz]

The issue will be fixed by #13470