ScrollView inside absolute layout not working

CambridgeYang

I'm trying to create something like this:
->absolutelayout
->scrollview with some content
->a label
the scrollview is supposed to fill out the entire page while the label should appear floating on top of the page

I basically tried http://forums.xamarin.com/discussion/comment/62467#Comment_62467
but it seems that without a widthRequest and heightRequest of the scrollView, the scrollView just won't appear

Again, I want the scrollView to Fill the page with LayoutOptions.Fill, but it seems that the absolute layout just ignores the layoutOptions, what should I do??

CraigDunn

This is the difference between managed and unmanaged layouts (see views & layouts).

Controls themselves are hosted inside of a layout. Xamarin.Forms has two different categories of layouts that arrange the controls in very different ways:

• Managed Layouts - these are layouts that will take care of positioning and sizing child controls on the screen and follow the CSS box model. Applications should not attempt to directly set the size or position of child controls. One common example of a managed Xamarin.Forms layout is the StackLayout.
• Unmanaged Layouts - as opposed to managed layouts, unmanaged layouts will not arrange or position their children on the screen. Typically, the user will specify the size and location of the child control as it is being added to the layout. The AbsoluteLayout is an example of an unmanaged layout control.

Basically, in an AbsoluteLayout you need to see the sizes of things, because that's it purpose. You are correct: it does not use the LayoutOptions.

If things need to size themselves then you need a managed layout like the StackLayout.

CambridgeYang

Thanks for the response!

So like there's no way to accomplish what I wish to do within form's regular control?

CraigDunn

On the contrary, you should be able to do it but the layout controls you've chosen mightn't be the best choice. You could definitely do it with AbsoluteLayout and specifying all the measurements yourself (although this doesn't scale so well for many different devices). If you go down this path, the Labs community project has some code to get screensize I think.

A RelativeLayout might also be worth investigating (although unfortunately there are not many examples of this around right now - endeavoring to fix that). There is some discussion in the docs and I've mentioned it once or twice before on the forums.

CambridgeYang

It seems that RelativeLayout is also unmanaged? I've tried and got pretty much the same result as AbsoluteLayout

For the Labs, are you suggesting using the Device's width and height to fill the screen? I don't know if that will work; how can I accommodate status bar, navigation bar etc. ?

CraigDunn

The RelativeLayout API doc might help.

I also added an example to my Todo sample app - the screenshot below shows how the ListView is configured to take up the entire screen (under a nav bar, because I'm using a NavigationPage) and the blue-circle-plus-image is floating over the top of the list view (it has a tap gesture recognizer so it can behave as a button).

        // first set up the controls for the page
        listView = new ListView ();
        listView.ItemTemplate = new DataTemplate (typeof (TodoItemCell));
        var tap = new TapGestureRecognizer ((View obj) => {
            var todoItem = new TodoItem();
            var todoPage = new TodoItemPage();
            todoPage.BindingContext = todoItem;
            Navigation.PushAsync(todoPage);
        });
        newImage = new Image ();
        newImage.Source = "new.png";
        newImage.WidthRequest = 40;
        newImage.GestureRecognizers.Add (tap);

        // the relative layout stuff is from here...
        layout = new RelativeLayout ();
        layout.Children.Add (listView, 
            xConstraint: Constraint.Constant(0), 
            yConstraint: Constraint.Constant(0), 
            widthConstraint: Constraint.RelativeToParent ((parent) => {return parent.Width;}),
            heightConstraint: Constraint.RelativeToParent ((parent) => {return parent.Height;}));
        layout.Children.Add (newImage, 
            xConstraint: Constraint.RelativeToParent((parent) =>
                {
                    return (parent.Width / 2) - 20; // center of image (which is 40 wide)
                }),
            yConstraint: Constraint.RelativeToParent((parent) =>
                {
                    return parent.Height - 60; // 40 pixel image plus 20 pixel margin underneath
                }));
        Content = layout;

which looks like this - replace the image with your label to get the effect you want...

CambridgeYang

Oh thanks!!! I will try it will scroll view right now!

CambridgeYang

Works like a charm! Thanks again

xiaoman

I can't change the location of Label, button,..., there is no properties like "Left","Top", and "X","Y" are read only.

CraigDunn

@Mike‌ start with the documentation on views & layouts and xaml.

Control locations are set differently depending on what sort of layout you are placing the controls in (eg. StackLayout, RelativeLayout, AbsoluteLayout, etc). X, Y, Width and Height are read-only because they are set by the layout engine after the control has been displayed.

MichelangeloFranco

Hi Craig,
I've had similar problem but in Xamarin Forms Android. I have an AbsoluteLayout with label, entry and button inside a scrollview. In iOS all works, but in android I have all control in the upper part of the screen all superimposed.

DirkWilhelm

@WalkingDeadCoder

I can understand that you want to promote your blog, but why do you have to pull up old threads (this one here is from 2014 with the last comment from 2015) all over the forum?

Why don't you add your blog to https://www.planetxamarin.com/ instead?