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.

I just want to see all the 35 buttons upon scrolling as in first imge. — yogapriya shanmugam, May 10 '21 at 04:55
How much you want to move the scrollview, do you want some space above scrollview? — Himanshu Dwivedi, May 10 '21 at 04:56
Yes I will be showing another content at the top and below that this will be positioned, I have replicated my scenario in a simple way. — yogapriya shanmugam, May 10 '21 at 05:04
As per your requirement Absolute layout is the wrong pick, if you can attach the expected UI I can suggest smthg else — Himanshu Dwivedi, May 10 '21 at 05:23
[scroll-an-item-into-view](https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/scrolling#scroll-an-item-into-view) — Shaw, May 10 '21 at 07:28

score 1 · Accepted Answer · answered May 10 '21 at 07:44

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.

answered May 10 '21 at 07:44

adamm

849
1
6
17

Thanks for the solution, It works fine but when I specify content without scroll view, such as by using grid, it gets arranged within that specified bounds, previously it will crop at the bottom but I need the same output for this case. It should scroll only I am using scroll view. – yogapriya shanmugam May 11 '21 at 13:31
I'm not sure now what you are trying to achieve... The question was about content of scrollview being cropped, when you translate it over Y axis. Now you are saying that the problem is when you specify the content without the scrollview. Why would you remove the scrollview, if the question was about the scrollview? Can you please elaborate in more details what you are trying to achieve? – adamm May 11 '21 at 14:10
When I specify the content without scroll view, after translating it will crop some portions of the content at the bottom. I don't want to break this behavior, when scroll view is used content must scroll when it is not used it should crop at the bottom. After trying the solution, scroll view works fine, but when scroll view is not used, in that case it should crop at the bottom but instead it gets arranged within the specified height. Since we have reduced the height. – yogapriya shanmugam May 12 '21 at 05:20
I have accepted this answer for scroll view and raised a separate a query for another case. https://stackoverflow.com/questions/67498181/after-translating-a-view-it-should-scroll-the-full-content-and-if-not-it-should – yogapriya shanmugam May 12 '21 at 06:13

Xamarin.Forms ScrollView cut off when translated

1 Answers1

Linked