How to Bind a visual element HeightRequest which is inside a ScrollView to equal to the Height of the Page?

Question

I'm trying to set a BoxView's Height to the Height of the page (I'm using Xamarin Essentials for this). The BoxView is contained in a StackLayout and that StackLayout is contained in a ScrollView like this:

<ScrollView Orientation="Vertical">
    <StackLayout>
        <BoxView HeightRequest="{Binding height}" x:Name="TestBox" BackgroundColor="Orange" />
        <BoxView BackgroundColor="Red" HeightRequest="200" />
    </StackLayout>
</ScrollView>

The HeightRequest of the BoxView is being defined in my Code Behind.

I've tried setting this variable to the height of the device in my OnAppearing() and in the Page's constructor, but both times the boxview does not fill the whole page, here is what i have tried:

public Double height;

public MainPage()
{  
    InitializeComponent();
    height = DeviceDisplay.MainDisplayInfo.Height / DeviceDisplay.MainDisplayInfo.Density;
}

The result:

I've also tried adding the following after i set the Height, but this didn't worked either:

this.ForceLayout();

I do however, get my desired result if I manually set the HeightRequest (However, this would only work on my specific device):

<BoxView HeightRequest="720" x:Name="TestBox" BackgroundColor="Orange" />

How can i bind the Height of the BoxView to the Height of the page if the BoxView is cointained inside a ScrollView?

I know it's not very intuitive, but here are some tips: read a little about VerticalOptions and HorizontalOptions in the Microsoft documentation https://learn.microsoft.com/en-us/dotnet/api/xamarin.forms.layoutoptions?view=xamarin-forms, you don't need to know the height of a device to fill a content with something, if you want i can post an answer — Ricardo Dias Morais, Jan 27 '20 at 14:00
I thought this could not be achieved without CustomLayouts (Since its inside StackLayout). But to my surprise binding the Height of super parent to `HeightRequest` of the `BoxView` did the trick. Check my answer I have added the code there. And as @RicardoDiasMorais says you don't need the device Height to fill the Page — Nikhileshwar, Jan 27 '20 at 14:14
@RicardoDiasMorais I don't understand how your answer is answering the question. Vertical options would only work if there wasn't a scroll view. — Ryan Gaudion, Jan 27 '20 at 14:19
@RyanGaudion i didn't post any anwser, yes but if your scrollview doesnt fill the entire space you can never know if it's totaly filled unless the content is heigher than the device, that's what i thought it was your problem, your description is not clear, and the title doesn't make sense either, but you are right tho, vertical and horizontal options woudn't be enough to achive what you are looking for, Nikhileshwar anwser is the way to go — Ricardo Dias Morais, Jan 27 '20 at 14:52
@RicardoDiasMorais thank you for your reply. I've edited the question and I hope this makes it more clear. If not then please can you provide me with more information on how to improve the question. — Ryan Gaudion, Jan 27 '20 at 15:00
@RyanGaudion i have made an edit, if you want you can aprove it if it explains what are you trying to achieve — Ricardo Dias Morais, Jan 27 '20 at 15:34
@RicardoDiasMorais, thank you for the edit - it has been approved. — Ryan Gaudion, Jan 27 '20 at 15:36

score 2 · Answer 1 · answered Jan 27 '20 at 14:10

2

Bind the Height property of the scrollview parent (Direct child of the ContentPage) using x:reference. It worked for me.

<ScrollView x:Name="parentLayout">
    <StackLayout>
        <BoxView
            BackgroundColor="LightBlue"
            HeightRequest="{Binding Height, Source={x:Reference parentLayout}}"/>
        <Label
            Text="Below BoxView"/>
        <Label
            Text="Below BoxView"/>
        <Label
            Text="Below BoxView"/>
        <Label
            Text="Below BoxView"/>
        <Label
            Text="Below BoxView"/>
        <Label
            Text="Below BoxView"/>
        <Label
            Text="Below BoxView"/>
    </StackLayout>
</ScrollView>

UI result in iOS (White space is due to Safe area)

Hope this could help you. Comment if this does not your requirement.

answered Jan 27 '20 at 14:10

Nikhileshwar

1,666
1
11
26

Please can you explain your answer further as I don't understand why you can't bind exactly to the boxview? Also, I would like more control than this. I would like the blue section to be the the height of the page (which you have done). But I would also like the white section to be the height of the page when you scroll down. – Ryan Gaudion Jan 27 '20 at 14:18
1

Exactly???. I have bound the height of scrollview to the Boxview. Since the scrollview fills the page the HeightRequest of BoxView is equal to the Page Height. As far as the white space is conserned wrap the contents in a View and also bind it's HeightRequest to the scrollview's Height. I could not update the code now. Will update later. – Nikhileshwar Jan 27 '20 at 14:31
Once you've updated the code please can you post a git repo link. – Ryan Gaudion Jan 27 '20 at 14:33
Also, later I wanted to set the first box view's height to 1 third of the height of the page and the 2nd boxview to the whole height of the page. Could I do this with the way you have described? – Ryan Gaudion Jan 27 '20 at 14:35
1

You can use converters for setting a fraction of the parent's Height as HeightRequest. – Nikhileshwar Jan 27 '20 at 14:38
I've edited my original question in order to make it more clear. Please can you confirm whether this question is a good question and if not please provide me with feedback on how to improve it? – Ryan Gaudion Jan 27 '20 at 15:02
@Ricardo has already edited your question. Do you still require me add the converters to set fractions of Height as HeightRequest? – Nikhileshwar Jan 27 '20 at 18:37
don't worry about the converters, thank you for your help. – Ryan Gaudion Jan 28 '20 at 08:51

score 1 · Accepted Answer · answered Jan 28 '20 at 02:56

You did not set the bindingContext in code behind so the HeightRequest="{Binding height}" will not work.

Also, remember that you should define the height as a Property.

public partial class MainPage : ContentPage
{

    public Double height { get; set; }

    public MainPage()
    {
        InitializeComponent();

        height = DeviceDisplay.MainDisplayInfo.Height / DeviceDisplay.MainDisplayInfo.Density;

        BindingContext = this;
    }
}

I did a test, after adding the bindingContext and define the height as a Property, you codes works well:).

Also, due to the fact you have high reputation on this site, please can you review my original question. If it needs improving then please can you suggest how to improve it, if not please can you upvote it. Thank you — Ryan Gaudion, Jan 28 '20 at 08:56

How to Bind a visual element HeightRequest which is inside a ScrollView to equal to the Height of the Page?

2 Answers2