mauiscrollview

Issue with ScrollView multiple Listviews in MAUI

I have created a Grid and inside it I created a ScrollView

Inside the ScrollView I created another Grid that has 5 columns, three of them has a ListView inside it

enter image description here

I am expecting the following behaviour: when I scroll the view, All of the 3 ListView should move at same speed and direction, please correct me if I am wrong!

when I run the program on Android , I get this wierd behaviour; I upload it on Youtube (scrolling starts at second 45)

here

it looks like there is kind of Lag! the ListViews does not get 100% aligned, however they all look to move same direction as desired!

Could You please advice and point out what I am doing here wrong, thanks in advance!

My Xaml looks like this

<?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:models="clr-namespace:muf.Models"
                 x:Class="muf.Rooms.Sailor"
                 xmlns:lang="clr-namespace:muf.Resources.Languages"
                 xmlns:local="clr-namespace:muf"
                 BackgroundColor="{DynamicResource BackgroundColor}"
                 xmlns:barcode="clr-
    namespace:BarcodeScanning;assembly=BarcodeScanning.Native.Maui"
                 Unloaded="ContentPage_Unloaded">
        <AbsoluteLayout>
            <Grid x:Name="GridUpperBar" ColumnDefinitions="*, *, *" 
             AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,0.1">
                <Border HeightRequest="80" 
                WidthRequest="100"
                StrokeShape="RoundRectangle 80,80,80,80"
                HorizontalOptions="Center"
                Grid.Column="0"
                StrokeThickness="1"
                Margin="0,0,0,0">
                </Border>
                <Border HeightRequest="80" 
                WidthRequest="100"
                StrokeShape="RoundRectangle 80,80,80,80"
                HorizontalOptions="Center"
                Grid.Column="1"
                StrokeThickness="1"
                Margin="0,0,0,0">
                </Border>
                <Border HeightRequest="80" 
                WidthRequest="100"
                StrokeShape="RoundRectangle 80,80,80,80"
                HorizontalOptions="Center"
                Grid.Column="2"
                StrokeThickness="1"
                Margin="0,0,0,0">
                </Border>
    
                <ImageButton x:Name="BtnBarcode" Grid.Column="0" WidthRequest="50" 
                HeightRequest="50" CornerRadius="25" Source="barcode.png" 
                Clicked="BtnBarcodeClicked"/>
                <ImageButton x:Name="BtnItems" Grid.Column="1" WidthRequest="50" 
                HeightRequest="50" CornerRadius="25" Source="gallery.png" 
                Clicked="BtnBarcodeClicked"/>
                <ImageButton x:Name="BtnTypeBox" Grid.Column="2" WidthRequest="50" 
                HeightRequest="50" CornerRadius="25" Source="typebox.png" 
                Clicked="BtnBarcodeClicked"/>
            </Grid>
    
            <Grid x:Name="GridBarcode" ColumnDefinitions="*" AbsoluteLayout.LayoutFlags="All" 
            AbsoluteLayout.LayoutBounds="0,0.2,1,0.25">
                <barcode:CameraView
                AbsoluteLayout.LayoutBounds="0.5,0.5,110,25"
                AbsoluteLayout.LayoutFlags="PositionProportional" 
                OnDetectionFinished="CameraView_OnDetectionFinished"
                CaptureQuality="High"
                ForceInverted="True"
                TapToFocusEnabled="True"
                BarcodeSymbologies="All"
                AimMode="True"
                x:Name="Barcode"
                IsVisible="True"
                Grid.Column="0"
                Margin="5"/>
                <GraphicsView
                  AbsoluteLayout.LayoutBounds="0.5,0.2,200,125"
                  AbsoluteLayout.LayoutFlags="PositionProportional" 
                  x:Name="Graphics"
                  InputTransparent="True"
                  IsVisible="True"
                  Grid.Column="0"/>
            </Grid>
            <Grid x:Name="GridBill0" ColumnDefinitions="*" 
            AbsoluteLayout.LayoutFlags="PositionProportional" 
            AbsoluteLayout.LayoutBounds="0.5,0.8,450,350">
            <ScrollView x:Name="ScrListInvoice" Grid.Column="0" AbsoluteLayout.LayoutFlags="All" 
            AbsoluteLayout.LayoutBounds="0,0,1,1">
            <Grid x:Name="GridBill" ColumnDefinitions="*,*,*,*,*" 
            AbsoluteLayout.LayoutFlags="PositionProportional" 
            AbsoluteLayout.LayoutBounds="0.5,0.8,450,350">
                    <ListView x:Name="ListInvoice"
                    BackgroundColor="Bisque"
                    SeparatorColor="Silver"
                    Grid.Column="1"
                    ItemSelected="ListInvoiceOnItemSelected">
                            <ListView.Header>
                                <StackLayout BackgroundColor="Red">
                                    <Label Margin="10,0,0,0"
                                Text="{x:Static lang:AppResources.ItemName}"
                                FontSize="12"
                                FontAttributes="Bold"/>
                                </StackLayout>
                            </ListView.Header>
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <TextCell Text="{Binding Name}"
                                          TextColor="Blue">
                                        <TextCell.ContextActions>
                                            <MenuItem
                                        Text="Delete"
                                        Clicked="MenuItem_Clicked"
                                        CommandParameter="{Binding .}">
                                            </MenuItem>
                                        </TextCell.ContextActions>
                                    </TextCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                        <ListView x:Name="ListInvoice2"
                    BackgroundColor="Bisque"
                    SeparatorColor="Silver"
                    Grid.Column="2"
                    SelectionMode="None">
                            <ListView.Header>
                                <StackLayout BackgroundColor="Red">
                                    <Label Margin="10,0,0,0"
                        Text="{x:Static lang:AppResources.Price}"
                        FontSize="12"
                        FontAttributes="Bold"/>
                                </StackLayout>
                            </ListView.Header>
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <TextCell Text="{Binding Price}"
                                TextColor="Blue">
                                    </TextCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                        <ListView x:Name="ListInvoice3"
                     BackgroundColor="Bisque"
                     SeparatorColor="Silver"
                     Grid.Column="3"
                     ItemSelected="ListInvoice3OnItemSelected">
                            <ListView.Header>
                                <StackLayout BackgroundColor="Red">
                                    <Label Margin="10,0,0,0"
                                 Text="{x:Static lang:AppResources.Count}"
                                 FontSize="12"
                                 FontAttributes="Bold"/>
                                </StackLayout>
                            </ListView.Header>
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <TextCell Text="{Binding Count}"
                                TextColor="Blue">
                                    </TextCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </Grid>
                </ScrollView>
            </Grid>
        </AbsoluteLayout>
    </ContentPage>
Solution

  • You are writing interface for invoice.

    I understand you have some Document, that has list of Items, and each item has price/quantity/name.

    I recommend some changes to your program:

    1. Instead of displaying 3 lists (this is extremely inefficient), display a single list.
    2. Instead of ListView, change your code to make use of CollectionView. (I want to stress on this)
    3. Remove the ScrollView ouside of your CollectionView.
    4. Change the ItemTemplate of your CollectionView to display price/quantity/name of the items.

    (CollectionView, unlike ScrollView, loads and displays items when it needs them. If you have a ScrollView with 100000, the lag you will get will kill you. The collection view is perfectly fine with this. It knows that you do not actually need to see 100000 times, and it will load to display the ones that can fit on your screen. It can be setup to load more items, when you are getting to the end of the list, etc... just do it.)