Question ScrollView does not scroll unless window is resized in .NET MAUI

ddabrahim

New member
Joined
Dec 26, 2022
Messages
3
Programming Experience
1-3
Hi.

I am new to .NET MAUI and XAML.

I have a scroll view inside a ContentPage and inside the scroll view I have a Vertical Stack Layout with 2 items, a label and a button.

XML:
<ScrollView>
    <VerticalStackLayout
        x:Name="Stack"
        Spacing="25"
        Padding="30,0"
        VerticalOptions="Center">

        <Label
            Text="Hello, World!"
            SemanticProperties.HeadingLevel="Level1"
            FontSize="32"
            HorizontalOptions="Center" />

        <Button
            x:Name="ThirdButton"
            Text="Create Label"
            Clicked="OnCreateClicked"
            HorizontalOptions="Start" />

    </VerticalStackLayout>
</ScrollView>

When the button is clicked, I add labels to the stack dynamically.

C#:
private void OnCreateClicked(object sender, EventArgs e)
{
    Label label = new Label { Text = "This is a new label" };
    Stack.Add(label);
}

What I expect to happen is when the content size of the StackLayout is bigger than the size of the ScrollView, the scrollbar appear and I can scroll the view.
However it is not happening. I need to resize the window at least a few pixels in order to get the scrollbar appear and able to scroll the view.

I have tried to set ScrollbarVisibility to "Always" and Position to "FillAndExpand" but did not make any difference.

Would anyone have any idea why the view doesn't scroll once the item list inside the scroll view is bigger than the window?
Any help is appreciated.

Using:
macOS 13.1
Visual Studio 2022 for Mac
.NET 7
Target platform: Mac(MacCatalyst)

Thank you.
 
If you use the same search words on Google, this seems to be a common problem on Macs. Have you tried the same on a PC or Android?
 
As a quick aside, your code above works fine on my PC running Win10 Version 21H2, .NET 6.0. Going to try .NET 7.0 next.

Update: .NET 7.0 also works as well.
 
Last edited:
Thank you for the reply.

Yes I was thinking it is Mac specific bug in the framework maybe. I was just wondering if is there any workaround. Since I am new to XAML and MAUI no idea what to try other than tweaking some properties.

I have also asked the question on Stackoverflow and they recommended me to signal to the view to recompute measure value each time I add a new item to the stack.

C#:
private void OnCreateClicked(object sender, EventArgs e)
{
    Label label = new Label { Text = "This is a new label" };
    Stack.Add(label);
    // Signals that the measure value of this View must be recomputed
    (myscroll as IView).InvalidateMeasure();
}

It works but I need to do this for every single control. For example if I add an editor, I need to do this also every time the editor change.

Is there any way to tell the ScrollView to recompute measure value if anything has changed in the view?

Thank you.
 
This is a complete kludge, but if push comes to shove just have a timer call that invalidate measurement every 2 seconds or less. It'll probably suck from a power usage standpoint, but Macs supposedly have great battery life, so why not use some of it?

A more elegant solution and one that would benefit the entire community would be to actually look at the MAUi source code and fix the root cause. Like you, I am a complete novice with MAUI l. Unfortunately, I am also anti-Apple. The only Apple devices in the house are an iPad for remote learning for my kids and ancient iPhone to manage the parental controls on the iPad.
 
Last edited:
Out of curiosity, have you tried using an MVVM architecture with the labels data bound to a list of items using a data template? The button action adds to the model's list, and the view model notifies the view that items have been added, and then the view will pull the items from the view model to figure out what to display and in the process hopefully figure out that it needs to recompute the stack layout's size. Yes, it sounds as overly complex and over engineered as it sounds -- but MVVM is how Microsoft originally intended all of its early XAML based technologies.
 
Yes I did play around with the MVVM architecture and data bindings today but could not yet figure out how to add new elements dynamically to an x:Array element which I use to populate the ItemSource with a list of items. I am new to all of this and my C# knowledge is also very rusty. But yes once I find my way around I am going to look in to this and see if MVVM solves this problem or not.

Agree it would be nice to get it fixed in the MAUI source code. Maybe I should report this on GitHub
Unfortunately I am not anti-Apple, I do actually like to use their software and hardware but I dislike Xcode and SwiftUI.
So I am very happy for MAUI and to be able to target iPhone, iPad, tvOS and macOS alongside Android and Windows with C#. I've been waiting for something like this so long and so far apart from this small glitch, it works surprisingly good. I was expecting more trouble to be honest.
 
You're the 3rd Mac dev I've heard over the past few months express that about how well MAUI is turning out to be.
 
Back
Top Bottom