Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Scrollview scrolls up-and-over other content when scrolling

When layin out this form, I want a header the size of its content, footer the size of the content, and a middle that expands to take up the rest. Easy in XAML/UWP. But in Xamarin Forms when the ScrollView content has data it floats and overlays the top and bottom. Also when I drag/scroll the ScrollView it can go to the top of the screen. How to dock the scrollview properly so I have a scrolling middle region? Thx...

Pictures and XAML layout below....

enter image description here

enter image description here

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="BaseProject.MainPage">
<Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" />
<Grid>
<Grid.RowDefinitions>
  <RowDefinition Height="Auto"/>
  <RowDefinition Height="*"/>
  <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TableView Grid.Row="0" Intent="Settings" BackgroundColor="Blue" HeightRequest="150" >
  <TableSection Title="Search">
    <ViewCell>
      <Button x:Name="Button_Search" Text="Go"/>
    </ViewCell>
    <EntryCell x:Name="Entry_Cell_SearchFor" />
  </TableSection>
</TableView>
<ScrollView Grid.Row="1" VerticalOptions="FillAndExpand" Orientation="Vertical">
  <StackLayout BackgroundColor="Red" >
    <Label Text="body" x:Name="Label_Body" BackgroundColor="Yellow" />
  </StackLayout>
</ScrollView>
  <StackLayout Grid.Row="2">
    <Label Text="footer"/>
  </StackLayout>
  </Grid>
</ContentPage>
like image 281
Joe Healy Avatar asked Feb 08 '23 13:02

Joe Healy


1 Answers

Set IsClippedToBounds property as true of ScrollView

like image 80
eakgul Avatar answered May 08 '23 17:05

eakgul