After translating a view it should scroll the full content and if not it should crop the content in the hidden part

Question

This query is the continuation of this post Scroll view scrolling not works when the it is translated in y position such that bottom part gets hidden in xamarin forms

Now scroll view works fine, in some cases I used to define like below, I can either use the content of the absolute layout with scroll view or else directly.

When used directly as in below snippet, after translation by setting layout bounds, all the box view were arranged in the specified height.

But previously it will crop at the bottom after translation. I need the same behavior when scroll view is not used. How to achieve this.

        <AbsoluteLayout x:Name="layout" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Row="1">

         <Grid  x:Name="scrollView" AbsoluteLayout.LayoutFlags="SizeProportional" AbsoluteLayout.LayoutBounds="0,0,1,1" >
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <BoxView Grid.Row="0" BackgroundColor="Red"></BoxView>
            <BoxView Grid.Row="1" BackgroundColor="Black"></BoxView>

            <BoxView Grid.Row="2" BackgroundColor="Blue"></BoxView>
            <BoxView Grid.Row="3" BackgroundColor="Gray"></BoxView>
            <BoxView Grid.Row="4" BackgroundColor="Green"></BoxView>
            <BoxView Grid.Row="5" BackgroundColor="Red"></BoxView>
            <BoxView Grid.Row="6" BackgroundColor="Black"></BoxView>

            <BoxView Grid.Row="7" BackgroundColor="Blue"></BoxView>
            <BoxView Grid.Row="8" BackgroundColor="Gray"></BoxView>
            <BoxView Grid.Row="9" BackgroundColor="Green"></BoxView>
        </Grid>

In this case When I set layout bounds it gets arranged as in second image, but I need as in first image.

Answer 1

If you don't have ScrollView, like you had in this question then just put 1 as a last parameter of your Rectangle constructor.

I don't know how the rest of your code looks like, but you can bind different rectangles with different AbsoluteLayout.LayoutBounds. For example, in a case without ScrollView you can put like this

        <AbsoluteLayout x:Name="layout" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Row="1">
         <Grid  AbsoluteLayout.LayoutBounds="{Binding rectNoScroll}"...

rectNoScroll = new Rectangle(0, 250, 1, 1);

and when you have ScrollView you can do like in here.