Search code examples
c#xamarin.formsxamarin.iosscrollview

Can't scroll Xamarin.Forms ScrollView when small views are stacked on top


I have an Image and some Buttons at the top of an AbsoluteLayout, stacked over a ScrollView. There is plenty of space between the items to "reach down to" the scroll view and swipe to scroll, but swiping to scroll doesn't work. So then I tried stacking them inside of a Grid as suggested here, but same problem. What am I doing wrong here?

<ContentPage.Content>
    <AbsoluteLayout LayoutFlags="All" LayoutBounds="0,0,1,1" BackgroundColor="Default">
        <Grid AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <ScrollView x:Name="ScoreScrollView" Orientation="Horizontal" ScrollX="{Binding ScoreScrollX}" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" 
                    HorizontalScrollBarVisibility="Always" VerticalScrollBarVisibility="Never" BackgroundColor="White">
                <AbsoluteLayout LayoutFlags="HeightProportional" BackgroundColor="LightGray">
                    <AbsoluteLayout x:Name="ScoreContainer" LayoutFlags="All" LayoutBounds="0,0,1,0.75" BackgroundColor="White">
                        <skia:SKCanvasView x:Name="ScoreCanvas" PaintSurface="PaintScore" IgnorePixelScaling="True" Scale="1.0" 
                                       AbsoluteLayout.LayoutFlags="None"
                                       AbsoluteLayout.LayoutBounds="{Binding ScoreImageRect}"
                                       BackgroundColor="Default"
                                       />
                        <skia:SKCanvasView x:Name="ScoreOverlayCanvas" PaintSurface="PaintScoreOverlay" IgnorePixelScaling="True" Scale="1.0" 
                                       AbsoluteLayout.LayoutFlags="None"
                                       AbsoluteLayout.LayoutBounds="{Binding ScoreImageRect}"
                                       />
                    </AbsoluteLayout>
                    <AbsoluteLayout x:Name="VisualizationContainer" LayoutFlags="All" LayoutBounds="0,1,1,0.25"
                                BackgroundColor="Purple">
                        <skia:SKCanvasView x:Name="TimingViz" PaintSurface="PaintTiming" IgnorePixelScaling="True" Scale="1.0" 
                                   AbsoluteLayout.LayoutFlags="All"
                                   AbsoluteLayout.LayoutBounds="0,0,1,1"
                                   BackgroundColor="White"
                                   />
                    </AbsoluteLayout>
                </AbsoluteLayout>
            </ScrollView>
            <AbsoluteLayout LayoutFlags="All" LayoutBounds="0,0,1,1">
                <AbsoluteLayout x:Name="EvaluationStickyNote" LayoutFlags="None" LayoutBounds="32,0,150,150" Rotation="-15" 
                            IsVisible="False">
                    <Image Source="{Binding StickyNoteImage}" 
                       AbsoluteLayout.LayoutFlags="All"
                       AbsoluteLayout.LayoutBounds="0,0,1,1" />
                    <Label LineBreakMode="WordWrap" 
                       AbsoluteLayout.LayoutFlags="All"
                       AbsoluteLayout.LayoutBounds="0.5,0.5,0.8,0.8"
                       Text="{Binding EvaluationText}"
                       FontSize="20"
                       TextColor="Blue">
                    </Label>
                </AbsoluteLayout>
            </AbsoluteLayout>
            <StackLayout IsVisible="True" Orientation="Vertical" AbsoluteLayout.LayoutFlags="WidthProportional" AbsoluteLayout.LayoutBounds="0,0,1,32" BackgroundColor="Default">
                <StackLayout x:Name="TopButtons" Orientation="Horizontal" VerticalOptions="Start" HorizontalOptions="CenterAndExpand" BackgroundColor="Default">
                    <StackLayout IsVisible="False" Orientation="Horizontal" HorizontalOptions="Start">
                        <!--<Button Image="{Binding HomeIcon}" Clicked="Home"></Button>-->
                        <!--<Button Image="{Binding FeedbackIcon}" Clicked="FeedBack"></Button>-->
                    </StackLayout>
                    <StackLayout x:Name="MetronomeGroup" Orientation="Horizontal" HorizontalOptions="Center">
                        <Stepper x:Name="MetronomeStepper" Minimum="20" Maximum="300" Increment="2" Value="{Binding MetronomeBpm}"></Stepper>
                        <Entry Text="{Binding MetronomeBpmText}" Completed="MetronomeBpmEntry_OnTextChanged"></Entry>
                        <Label Text="bpm"></Label>
                        <ImageButton Source="{Binding MetronomeIcon}" Clicked="ToggleMetronome" Aspect="AspectFit" HeightRequest="32"></ImageButton>
                    </StackLayout>
                    <!--<Button Image="{Binding HamburgerIcon}" Clicked="ToggleHamburger"></Button>-->
                </StackLayout>
                <Label x:Name="MidiWarningLabel" VerticalOptions="End" HorizontalOptions="CenterAndExpand"></Label>
            </StackLayout>
        </Grid>
    </AbsoluteLayout>
</ContentPage.Content>

In the screenshot below, the sticky note is x:Name="EvaluationStickyNote", and the +/- 60bpm [icon] is x:Name="TopButtons"

enter image description here


Solution

  • The scrolling works once the ScrollView is wrapped in a StackLayout with HorizontalOptions and VerticalOptions both set to "FillAndExpand" (as well as setting the AbsoluteLayout.* properties), rather than having the ScrollView as a direct child of the AbsoluteLayout. The inability to scroll had nothing to do with having other views in the AbsoluteLayout overlaying the ScrollView.

       <ContentPage.Content>
            <AbsoluteLayout LayoutFlags="All" LayoutBounds="0,0,1,1" BackgroundColor="Default">
                <StackLayout AbsoluteLayout.LayoutBounds = "0,0,1,1" AbsoluteLayout.LayoutFlags = "All">
                    <ScrollView x:Name="ScoreScrollView" Orientation="Horizontal" ScrollX="{Binding ScoreScrollX}" 
                                HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                                HorizontalScrollBarVisibility="Always" VerticalScrollBarVisibility="Never" 
                                BackgroundColor="White">
                        <AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" LayoutFlags="HeightProportional" BackgroundColor="LightGray">
                            <AbsoluteLayout x:Name="ScoreContainer" LayoutFlags="All" LayoutBounds="0,0,1,0.75" BackgroundColor="White">
                                . . . .
                            </AbsoluteLayout>
                            <AbsoluteLayout x:Name="VisualizationContainer" LayoutFlags="All" LayoutBounds="0,1,1,0.25"
                                        BackgroundColor="Purple">
                                <skia:SKCanvasView x:Name="TimingViz" PaintSurface="PaintTiming" IgnorePixelScaling="True" Scale="1.0" 
                                           AbsoluteLayout.LayoutFlags="All"
                                           AbsoluteLayout.LayoutBounds="0,0,1,1"
                                           BackgroundColor="White"
                                           />
                            </AbsoluteLayout>
                        </AbsoluteLayout>
                    </ScrollView>
                </StackLayout>
    
                <AbsoluteLayout LayoutFlags="All" LayoutBounds="0,0,1,0.25">
                    <AbsoluteLayout x:Name="EvaluationStickyNote"
                                    LayoutFlags="None"
                                    LayoutBounds="32,16,150,150"
                                    IsVisible="False">
                        . . . .
                    </AbsoluteLayout>
                </AbsoluteLayout>
                <StackLayout IsVisible="True" Orientation="Vertical" AbsoluteLayout.LayoutFlags="WidthProportional" AbsoluteLayout.LayoutBounds="0,0,1,32" BackgroundColor="Default">
                    . . . .
                </StackLayout>
            </AbsoluteLayout>
        </ContentPage.Content>