Xamarin.Forms ScrollView cut off when translated

Question

I am placing a ScrollView inside the AbsoluteLayout and I want to move it downwards according to my requirement, so I have translated the y position of the ScrollView. But after that, only a certain part of the content is visible when scrolling and not all content of the ScrollView. How to overcome this? I need to visualize all content of the ScrollView when scrolling, even after the view is translated. XAML:

            <AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Row="1">
           
            <ScrollView x:Name="scrollView" AbsoluteLayout.LayoutFlags="SizeProportional" 
                        AbsoluteLayout.LayoutBounds="0,0,1,1">
                <StackLayout>
                    <Button Margin="10" Text="Button 1"/>
                    <Button Margin="10" Text="Button 2"/>
                    <Button Margin="10" Text="Button 3"/>
                    <Button Margin="10" Text="Button 4"/>
                    <Button Margin="10" Text="Button 5"/>
                    <Button Margin="10" Text="Button 6"/>
                    <Button Margin="10" Text="Button 7"/>
                    <Button Margin="10" Text="Button 8"/>
                    <Button Margin="10" Text="Button 9"/>
                    <Button Margin="10" Text="Button 10"/>
                    <Button Margin="10" Text="Button 11"/>
                    <Button Margin="10" Text="Button 12"/>
                    <Button Margin="10" Text="Button 13"/>
                    <Button Margin="10" Text="Button 14"/>
                    <Button Margin="10" Text="Button 15"/>
                    <Button Margin="10" Text="Button 16"/>
                    <Button Margin="10" Text="Button 17"/>
                    <Button Margin="10" Text="Button 18"/>
                    <Button Margin="10" Text="Button 19"/>
                    <Button Margin="10" Text="Button 20"/>
                    <Button Margin="10" Text="Button 21"/>
                    <Button Margin="10" Text="Button 22"/>
                    <Button Margin="10" Text="Button 23"/>
                    <Button Margin="10" Text="Button 24"/>
                    <Button Margin="10" Text="Button 25"/>
                    <Button Margin="10" Text="Button 26"/>
                    <Button Margin="10" Text="Button 27"/>
                    <Button Margin="10" Text="Button 28"/>
                    <Button Margin="10" Text="Button 29"/>
                    <Button Margin="10" Text="Button 30"/>
                    <Button Margin="10" Text="Button 31"/>
                    <Button Margin="10" Text="Button 32"/>
                    <Button Margin="10" Text="Button 33"/>
                    <Button Margin="10" Text="Button 34"/>
                    <Button Margin="10" Text="Button 35"/>
                </StackLayout>
            </ScrollView>
           
        </AbsoluteLayout>

C#:

           /// Translated the y position of the grid in code behind

            scrollView.TranslationY = 250;

Before translation, all content is visible when scrolling (i.e. up to 35 button).

After translating y position, a part of the content is cut off, and I can see only up to 31 buttons.

Answer 1

The problem is that your LayoutBounds defines the proportional height with value of 1, which means the same as parent, and when you translate it, it goes outside of the bounds. What you can do is to bind LayoutBounds like this

AbsoluteLayout.LayoutBounds="{Binding rect}

and then in C# do something like this:

        public Rectangle rect { get; set; }

        public MainPage()
        {
            InitializeComponent();           
            Double screenHeigth = DeviceDisplay.MainDisplayInfo.Height / DeviceDisplay.MainDisplayInfo.Density;
            rect = new Rectangle(0,250,1,(screenHeigth - 250)/ screenHeigth);
            BindingContext = this;
        }

Note that I defined the height proportional to the screen height, because I'm not sure how your UI looks like. This is only example for the code you provided, but I guess you can do something similar in your app. From your XAML, it seems that your Absolute Layout is inside the Grid, so you should be able to do something similar with the Row Height in your grid.