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"
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>