滚动视图控件在 .Net MAUI (Android) 中无法正常工作

Question

I have created custom tab control using ScrollView control and Bindable StackLayout control.

I have first created this solution in Xamarin.Forms (VS for Mac 2019) and it works fine in both platforms, but the same solution when developed in .Net MAUI (VS for Mac 2022 Prev) it's not working properly in Android.

Update 30 Jun 2022

There is an issue with BindableLayout (StackLayout) properties in MAUI currently so when we are changing values it does not get reflected, and because of this, I think I'm facing this issue. Here is the reference

Here is what I have done so far:

MainPage.xaml

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:vm="clr-namespace:poc_maui.ViewModels"
             x:Class="poc_maui.Views.HomePage"
             xmlns:tabs="clr-namespace:poc_maui.Views.SubViews"
             Title="HomePage">

    <ContentPage.BindingContext>
        <vm:MainPageViewModel />
    </ContentPage.BindingContext>

    <Grid RowDefinitions="50, *" RowSpacing="0">
        <ScrollView Grid.Row="0" Orientation="Horizontal" VerticalOptions="Start" HorizontalScrollBarVisibility="Never"
                    Scrolled="ScrollView_Scrolled">
            <StackLayout x:Name="TabsView"
                        Orientation="Horizontal"
                        BindableLayout.ItemsSource="{Binding Tabs}" Spacing="0">
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <Grid RowDefinitions="*, 4" RowSpacing="0">
                            <Label Grid.Row="0"
                                   Text="{Binding TabTitle}"
                                   TextColor="White"
                                   BackgroundColor="navy"
                                   Padding="20,0"
                                   VerticalTextAlignment="Center"
                                   HorizontalTextAlignment="Center"
                                   FontSize="12"
                                   HeightRequest="40"/>
                            <BoxView Grid.Row="1"
                                     Color="Yellow"
                                     IsVisible="{Binding IsSelected}"/>

                            <Grid.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding Path=BindingContext.TabChangedCommand,
                                                                        Source={x:Reference TabsView}}"
                                                      CommandParameter="{Binding .}"/>
                            </Grid.GestureRecognizers>
                        </Grid>

                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </StackLayout>

        </ScrollView>

        <tabs:ParentRecordTabView Grid.Row="1" IsVisible="{Binding IsParentRecordTabVisible}"
                                          VerticalOptions="FillAndExpand"/>
        <tabs:AdditionalInfoTabView Grid.Row="1" IsVisible="{Binding IsAdditionalInfoTabVisible}"
                                            VerticalOptions="FillAndExpand" />
    </Grid>

</ContentPage>

MainPageViewModel

using System;
using System.Collections.ObjectModel;
using System.Diagnostics;
using System.Windows.Input;
using poc_maui.Models;

namespace poc_maui.ViewModels
{
    public class MainPageViewModel : BaseViewModel
    {
        #region Constructor
        public MainPageViewModel()
        {
            GetTabs();
        }

        #endregion

        #region Private Properties

        private bool _isParentRecordTabVisible = true;
        private bool _isAdditionalInfoTabVisible;

        private ObservableCollection<TabViewModel> _tabs { get; set; }
        
        #endregion

        #region Public Properties

        public bool IsParentRecordTabVisible
        {
            get => _isParentRecordTabVisible;
            set { _isParentRecordTabVisible = value; OnPropertyChanged(nameof(IsParentRecordTabVisible)); }
        }

        public bool IsAdditionalInfoTabVisible
        {
            get => _isAdditionalInfoTabVisible;
            set { _isAdditionalInfoTabVisible = value; OnPropertyChanged(nameof(IsAdditionalInfoTabVisible)); }
        }

        public ObservableCollection<TabViewModel> Tabs
        {
            get => _tabs;
            set { _tabs = value; OnPropertyChanged(nameof(Tabs)); }
        }

        #endregion

        #region Commands

        public ICommand TabChangedCommand { get { return new Command<TabViewModel>(ChangeTabClick); } }

        #endregion

        #region Private Methods

        private void GetTabs()
        {
            Tabs = new ObservableCollection<TabViewModel>();
            Tabs.Add(new TabViewModel { TabId = 1, IsSelected = true, TabTitle = "Parent record" });
            Tabs.Add(new TabViewModel { TabId = 2, TabTitle = "Additional Info" });
            Tabs.Add(new TabViewModel { TabId = 3, TabTitle = "Contacts" });
            Tabs.Add(new TabViewModel { TabId = 4, TabTitle = "Previous inspections" });
            Tabs.Add(new TabViewModel { TabId = 5, TabTitle = "Attachments" });

            SelectedTab = Tabs.FirstOrDefault();
        }

        private void ChangeTabClick(TabViewModel tab)
        {
            try
            {
                var tabs = new ObservableCollection<TabViewModel>(Tabs);

                foreach (var item in tabs)
                {
                    if (item.TabId == tab.TabId)
                    {
                        item.IsSelected = true;
                    }
                    else
                    {
                        item.IsSelected = false;
                    }
                }

                Tabs.Clear();
                Tabs = new ObservableCollection<TabViewModel>(tabs);

                switch (tab.TabId)
                {
                    case 1:
                        IsParentRecordTabVisible = true;
                        IsAdditionalInfoTabVisible = false;
                        break;
                    case 2:
                        IsParentRecordTabVisible = false;
                        IsAdditionalInfoTabVisible = true;
                        break;
                }
            }
            catch (Exception ex)
            {
                Debug.WriteLine(ex.Message);
            }
        }

        #endregion
    }
}

#ParentTabView.xaml

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="poc_maui.Views.SubViews.ParentTabView">
    <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" >
        <Label 
            Text="Welcome to Parent tab!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
    </StackLayout>
</ContentView>

#AdditionalInfoTabView.xaml

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="poc_maui.Views.SubViews.AdditionalInfoTabView">
    <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" >
        <Label 
            Text="Welcome to Additiona info tab!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
    </StackLayout>
</ContentView>

So what happens here in Android is when I'm clicking AdditionalInfo Tab then it will show a blank white screen and if you press the hardware back button and open the app again it will show AdditionalTab as selected and its views content as well.

If I remove switch() code part from the ViewModel then it will work fine but tabs will not change. Does anyone have idea about this kind of behavior of scroll view in MAUI?

The full source code is here: maui_sample

Answer 1

Does this work-around fix it?

MainPage.xaml:

<ScrollView x:Name "theScrollView" ... >

MainPage.xaml.cs:

public MainPage()
{
    InitializeComponent();

    MessagingCenter.Subscribe<MainPageViewModel>(this, "update", (sender) =>
    {
        // Tell theScrollView to re-layout its contents.
        (theScrollView as IView).InvalidateArrange();
    });
}    

MainPageViewModel:

private void ChangeTabClick(TabViewModel tab)
{
    ... make changes ...

    MessagingCenter.Send<MainPageViewModel>(this, "update");
}

---

MAYBE:

I'm not sure if MessagingCenter Subscribe is on Dispatcher (Main) thread. To be reliable, do:

    MessagingCenter.Subscribe<MainPageViewModel>(this, "update", (sender) =>
    {
        Dispatcher.Dispatch( () =>
        {
            (theScrollView as IView).InvalidateArrange();
        });
    }

---

UPDATE

There are other Maui bugs, that have a common "theme": Maui on Android does "something" related to layout only once - at the time the page is first drawn. UNFORTUNATELY, anything that is "not visible" at that time, is skipped. And won't work when later made visible.

Until such bugs are fixed, you'll have to do some work-around.

WORK-AROUND #1:

• Start with ALL tabs IsVisible="True" .
• As soon as the page has been drawn the first time, in code-behind, create the desired Bindings on those IsVisible properties. Page drawn first time can be intercepted in a custom handler. But this is a temp work-around, so its easier to just run a method after a 250 ms delay. Use a boolean "flag" to make the method only run the first time.
• Might have to do InvalidateArrange as shown above, to force the Bindings to function the first time.

OR WORK-AROUND #2:

• Each time tab changes, use shell route to go to MainPage again. Keep same view model, so knows which tab to show first (and remembers any other state you care about).

Both of these are ugly.

---

I recommend creating an issue at .Net Maui github, and providing link to your github sample.

Answer 2

This is still not works for me properly but after looking at below two links I found that it it not what we are looking for. The Isvisible : false first and then on switch or check box change you are trying to make it visible then it will not visible but the actual control visible. So on look after I have see this link but again the answer is not what I was looking for.

Step to resolve.

1. On View use the Parent as ScrollView or control belongs to IView,IElement.

<ScrollView x:Name "myScrollView"> .....

...

2. Add Action on ViewModel

public delegate void Action(T obj);

3. Invoke the Action Note: Make sure you call this on require not all the time. eg On Visibility set in ViewModel call after visibility update.

MeasureAction?.Invoke("reSetVisibility");

4. Now on View's Code File, use Viewmodel and accept the invoke

Here Call the below line will works perfectly.

(myScrollView as IView).InvalidateMeasure();

That's IT... Enjoy IsVisible now and make your layout as require.