Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Proper Layout schema for the case

Hi everyone.
I am stuck on a problem.

Task constraints:

  • we've got 3 areas.
  • Area 3 should be always at the bottom and take all the space required for it's own content, area 1 - at the top. Area 2 (with the image) - take up the remaining space (take all width space, align vertically by middle, the top and the bottom of the image which do not fit - can be cropped)
  • Area 3 should be scrollable (when we touch text field the keyboard should appear and it shouldn't overlay text fields)

My idea was to use AbsoluteLayout where one layer will be above another.

  • First layer contains Area 1 + Area 2 (stacklayout)
  • Second layer contains Area 3 with VerticalOptions = "EndAndExpand" (stacklayout)

Example:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="ScrollViewBugiOS.MainPage">

    <AbsoluteLayout>

        <StackLayout AbsoluteLayout.LayoutFlags="All" 
                             AbsoluteLayout.LayoutBounds="0,0,1.0,1.0" Spacing="0" BackgroundColor="Beige">
            <Label Text="Some Logo Image" 
           HorizontalOptions="Center"/>
            <Image x:Name="LoginImage" Source="LoginImage.png" Aspect="AspectFill"/>
        </StackLayout>

        <ScrollView AbsoluteLayout.LayoutFlags="All" 
                             AbsoluteLayout.LayoutBounds="0,0,1.0,1.0">
            <StackLayout VerticalOptions="EndAndExpand" BackgroundColor="Accent">
                <Entry Placeholder="Username" Margin="10"/>
                <Entry Placeholder="Password" Margin="10"/>
                <Button Text="Login" Margin="10"/>
                <Button Text="Register" Margin="10"/>
                <Button Text="Forgot Password" Margin="10"/>
            </StackLayout>
        </ScrollView>
    </AbsoluteLayout>

</ContentPage>

Problem is - that probably in current Xamarin Forms version (v4.5) there is a bug with this solution on iOS (described here github.com/xamarin/Xamarin.Forms/issues/10315)

So, question is

Is there another way to fit the requirements (using some other layout configuration)?

Sign In or Register to comment.