CollectionView shows no ScrollBar

[SokoFromNZ]

Description

When filling a CollectionView with more data than fits on the screen I can scroll CollectionView, but no ScrollBar is shown. Not even if I set the *ScrollBarVisibility to Always or just do this with the VerticalScrollBarVisibility only.

Steps to Reproduce

Create a new .NET MAUI .NET7 App in VS2022 and change those to files to the following (or load my reproduction repository):

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="CollectionViewScrollBar.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:collectionViewScrollBar="clr-namespace:CollectionViewScrollBar"
    x:DataType="collectionViewScrollBar:MainPage">

    <CollectionView
        HorizontalScrollBarVisibility="Always"
        ItemsSource="{Binding Rows}"
        VerticalScrollBarVisibility="Always">
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="collectionViewScrollBar:Row">
                <Grid RowDefinitions="Auto, Auto">
                    <Label
                        Grid.Row="0"
                        FontAttributes="Bold"
                        Text="{Binding Title}" />
                    <Label
                        Grid.Row="1"
                        FontAttributes="Italic"
                        Text="{Binding Detail}" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

</ContentPage>

MainPage.xaml.cs

using System.Collections.ObjectModel;

namespace CollectionViewScrollBar;

public partial class MainPage : ContentPage
{
	public MainPage()
	{
		InitializeComponent();
        BindingContext = this;

        for (var i = 0; i < 50; i++)
        {
            Rows.Add(new Row($"Title-{i}", $"Detail-{i}"));
        }
	}

    public ObservableCollection<Row>  Rows { get; } = new ();
}

public record Row(string Title, string Detail);

With a ListView it works: MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="CollectionViewScrollBar.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:collectionViewScrollBar="clr-namespace:CollectionViewScrollBar"
    x:DataType="collectionViewScrollBar:MainPage">

    <ListView ItemsSource="{Binding Rows}">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="collectionViewScrollBar:Row">
                <TextCell Detail="{Binding Detail}" Text="{Binding Title}" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

</ContentPage>

Link to public reproduction project repository

https://github.com/SokoFromNZ/MauiCollectionViewScrollBar

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

Android 11

Did you find any workaround?

No

Relevant log output

No response

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[SokoFromNZ]

@Eilon @jsuarezruiz I was kinda schocked to see this go to the backlog!!

The official MAUI doc (https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/collectionview/?view=net-maui-7.0) to CollectionView clearly stated to use the CollectionView over all other views! It even says "It aims to provide a more flexible, and performant alternative to ListView." and even "CollectionView automatically utilizes the virtualization provided by the underlying native controls".

But I cannot use any CollectionView in my whole app if the user cannot see if there is more data to scroll. So this should be a Prio-A bug.

I am feeling the pain MAUI puts on developers since day one (also see https://github.com/dotnet/maui/issues/8602). In Mai we had plans to release our product in January, But instead of implementing our business logic, all we do is try to find workarounds for MAUI bugs to get even the simpliest things done... We even cut back from releasing an Android, iOS and Windows version to just Android, but not even the rudimental things in Android work! And now you moving this to the backlog?!

I am frustrated...

[EmberLynn]

@Eilon @jsuarezruiz I was kinda schocked to see this go to the backlog!!

The official MAUI doc (https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/collectionview/?view=net-maui-7.0) to CollectionView clearly stated to use the CollectionView over all other views! It even says "It aims to provide a more flexible, and performant alternative to ListView." and even "CollectionView automatically utilizes the virtualization provided by the underlying native controls".

But I cannot use any CollectionView in my whole app if the user cannot see if there is more data to scroll. So this should be a Prio-A bug.

I am feeling the pain MAUI puts on developers since day one (also see #8602). In Mai we had plans to release our product in January, But instead of implementing our business logic, all we do is try to find workarounds for MAUI bugs to get even the simpliest things done... We even cut back from releasing an Android, iOS and Windows version to just Android, but not even the rudimental things in Android work! And now you moving this to the backlog?!

I am frustrated...

As a person building an app in MAUI for the first time (first time building an app ever), I assumed that what was written in the documentation was what is actually currently working in MAUI. It's frustrating when the answer is plain as day in the documentation, you follow it, only for it to perform in an unpredictable manner.

I have tried and tried to use the "recommend" CollectionView only for it to never perform as the documentation states. The newest issue I have encountered is not being able to scroll through the CollectioView (thus, how I found this issue!).

Anyway, I too am frustrated and surprised that every issue I encounter (including this) is put on the backlog.

[drasticactions]

Checking this against Xamarin.Forms, Forms doesn't seem to respect the Always Visible setting either for Android, but it does show the bar when scrolling. MAUI does show nothing in main. So this does seem to be a regression.

[SokoFromNZ]

Any update on this guys? Unbelievable nothing happend here in half a year! I really need a list in MAUI where I can select multiple rows... ListView cannot do this... CollectionView is not usable... Any suggestions?

[HobDev]

Facing this issue on Windows. The scrollbar is only visible when user clicks below the CollectionView. Although I set the ScollBarVisibility to always.

[mtarros]

Here is the work around that I used to resolve this issue.

Create a handler and add the following into the ConnectHandler platformView.VerticalScrollBarEnabled = true; platformView.ScrollBarStyle = Android.Views.ScrollbarStyles.InsideOverlay; platformView.VerticalScrollbarThumbDrawable = AppCompatResources.GetDrawable(this.Context, Resource.Drawable.scrollview_thumb); platformView.ScrollbarFadingEnabled = true;

Create resource file in Android Drawables - scrollview_thumb.xml

[neonleo]

I have same issue, MAUI is REALLY not production ready. CollectionView and CarouselView still has many bug and many of them is 6 months old in backlog.

[sergeykonar]

I have the same issue with CollcetionView

[scriptBoris]

OMG

[gubhit1s]

This is still not fixed in MAUI 8

[zeldomar]

Here is the work around that I used to resolve this issue.

Create a handler and add the following into the ConnectHandler platformView.VerticalScrollBarEnabled = true; platformView.ScrollBarStyle = Android.Views.ScrollbarStyles.InsideOverlay; platformView.VerticalScrollbarThumbDrawable = AppCompatResources.GetDrawable(this.Context, Resource.Drawable.scrollview_thumb); platformView.ScrollbarFadingEnabled = true;

Create resource file in Android Drawables - scrollview_thumb.xml

Hello,

Can you give us more details about your workaround, please? I'm very interesting!

Thanks!

[axeldietz]

We are in 2024 now...

[owik100]

I found a nice workaround. Instead of CollectionView i use DevExpress CollectionView Scrollbar is visible, also performance is better in scrolling

[zeldomar]

I found a nice workaround. Instead of CollectionView i use DevExpress CollectionView Scrollbar is visible, also performance is better in scrolling

Are you sure that DevExpress.CollectionView offers fast scrolling?

[owik100]

I found a nice workaround. Instead of CollectionView i use DevExpress CollectionView Scrollbar is visible, also performance is better in scrolling

Are you sure that DevExpress.CollectionView offers fast scrolling?

If you means "no lags" then yes, i achieved better performance when scrolling in a view with grid and images.

[zeldomar]

I found a nice workaround. Instead of CollectionView i use DevExpress CollectionView Scrollbar is visible, also performance is better in scrolling

Are you sure that DevExpress.CollectionView offers fast scrolling?

If you means "no lags" then yes, i achieved better performance when scrolling in a view with grid and images.

No, here is fast scrolling:

[scriptBoris]

2024 year...

[vvoois]

Depending on which platforms you aim for... For Windows, this is a crucial property: VerticalOptions="FillAndExpand"

          <CollectionView x:Name="myCollectionView" VerticalOptions="FillAndExpand"
                          RemainingItemsThreshold="5" 
                          RemainingItemsThresholdReached="OnRemainingItemsThresholdReached" 
                          RemainingItemsThresholdReachedCommand="{Binding LoadMoreDataCommand}">
              <CollectionView.ItemTemplate>

FillAndExpand sets the constraints of the CollectionView so that room for the scrollbar(s) can be calculated.

I can understand the generic struggle because it is not mentioned on the Microsoft documentation page, but they actually should have amplified this matter somewhere there. https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/collectionview/scrolling?view=net-maui-8.0

[shushu789]

I also found the same issue, originally my question was related to this #8888 , but it was closed because they thought it was normal design

[SlavomirDev]

Still not fixed... It would also be better if we could change the color of the scrollbar...

[TalionOak]

What I've discovered is that this won't be fixed as it was done by design. Stacklayout or ContentPage will expand and have an infinite height or the height for all items of the CollectionView. You will need to use a Grid if you want to size to screen and get the scroll.

How to fix:

<ContentPage
    x:Class="Wallet.Views.Transactions.TransactionList"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    
    <Grid ColumnDefinitions="*" RowDefinitions="auto,*">
  <!-- Other code Grid.Row="0".. -->
        <CollectionView
            x:Name="Collection"
            Grid.Row="1">
        </CollectionView>
    </Grid>
</ContentPage>

[Thx1010saascas]

Is the CollectionView supposed to scroll just its items or is whole header/footer supposed to scroll too? It is crazy if the header/footer are in the scroll area. In every other framework ever, they are static and just the items scroll.

The above is using a Grid and using a fixed or "*" row height doesn't change anything. So, it is either a bug, or very poor design.

I thought Maui was supposed to be the latest and greatest, but clearly not for Windows apps anyway given how backwards it seems to be. Blazor is far nicer. I lost days trying to convert my WPF to make it work at least as well as in WPF but that just isn't possible. Hell, out of the box, in "light" mode even the Picker and Editor glyphs are white on a white background with no way to fix it AFAICS except to make the background, not white!

[anotherlab]

I'm seeing this on a page that only uses grids to layout the controls. I'm migrating a Xamarin.Forms app to .NET MAUI and I had to replace a ListView because I couldn't set the selected item background color. Which is documented as issue #13812

This is a regression from Xamarin.Forms, will it be addressed in .NET 9?

[OliveInto]

Here is the work around that I used to resolve this issue. Create a handler and add the following into the ConnectHandler platformView.VerticalScrollBarEnabled = true; platformView.ScrollBarStyle = Android.Views.ScrollbarStyles.InsideOverlay; platformView.VerticalScrollbarThumbDrawable = AppCompatResources.GetDrawable(this.Context, Resource.Drawable.scrollview_thumb); platformView.ScrollbarFadingEnabled = true; Create resource file in Android Drawables - scrollview_thumb.xml

Hello,

Can you give us more details about your workaround, please? I'm very interesting!

Thanks!

Prepare resources first, and Call the below Funtion when program start. You can change colors in scrollview_thumb or something else, just refer to android develop documents. 😭There are so many bugs in maui.

        private void ModifyCollectionView()
        {

            Microsoft.Maui.Controls.Handlers.Items.CollectionViewHandler.Mapper.AppendToMapping("MyCustomization", (handler, view) =>
            {
#if ANDROID
                handler.PlatformView.VerticalScrollBarEnabled = true;
                handler.PlatformView.ScrollBarStyle = Android.Views.ScrollbarStyles.OutsideOverlay;
                handler.PlatformView.VerticalScrollbarThumbDrawable = AppCompatResources.GetDrawable(Microsoft.Maui.ApplicationModel.Platform.AppContext, Resource.Drawable.scrollview_thumb);
                handler.PlatformView.ScrollbarFadingEnabled = true;
                handler.PlatformView.ScrollBarSize = 50;
#elif IOS || MACCATALYST
           
#elif WINDOWS
          
#endif
            });
        }

[smardine]

Could you, by any chance share your scrollview_thumb file?

Your workaround work well, thanks for that 😁

[OliveInto]

Could you, by any chance share your scrollview_thumb file?

Your workaround work well, thanks for that 😁

I made a simple one, please change the color value to fixed before using it, since the color value in my xml is stored in colors.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
  <corners android:radius="4dp" />
  <solid android:color="@color/customColorScrollbar"/>
</shape>

[smardine]

Super thanks for that 😁

[mtarros]

Thanks for sharing the thumb file.

I don't have access code anymore, its a shame this is not fixed yet and looking like its not going to be fixed