CODEWITHSUNDEEP
c#xamlxamarin.forms
solidcomer
solidcomer

Reputation: 459

Why child elements of a StackLayout in a Xamarin.Form XAML file goes out of the screen?

In my Xamarin.Form project, I have several buttons which are child elements of a StackLayout (Orientation = "Horizontal") in a XAML file. The size of these buttons are not being adjusted automatically so that all buttons can be displayed within the screen of any device. They are too big, and some of them go out of the screen.

I have included the StackLayout mentioned above in another StackLayout who has a WidthConstraint that is 100% of the device screen width. And I tried a few HorizontalOptions for the buttons and layouts, that didn't help.

<ContentPage.Content>
    <RelativeLayout>
        <StackLayout
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height,Factor=0.5,Constant=0}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width,Factor=1,Constant=0}"
            BackgroundColor="Aqua">
            <Image Source="map.png" />
        </StackLayout>
        <StackLayout
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=0.5,Constant=0}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width,Factor=1,Constant=0}">
            <Entry Text="pls input here" />
            <StackLayout
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width,Factor=1,Constant=0}"
                Orientation="Horizontal">
                <Button Text="button1"/>
                <Button Text="button2"/>
                <Button Text="button3"/>
                <Button Text="button4"/>
                <Button Text="button5"/>
            </StackLayout>
        </StackLayout>
    </RelativeLayout>
</ContentPage.Content>

What I expect is like the mockup in the picture I uploaded, that the screen is split by half, and the lower half (in a StackLayout) will contain an Entry that allows users to input some texts, below which, 5 buttons (in a StackLayout) will be placed horizontally within the screen (their sizes shall be adjusted to fit various size of the devices automatically).

Actual Result ScreenShot Expected Mockup Picture

Maybe I should not even use StackLayout for the lower half of the region? But I do think I should use RelativeLayout outside in order that the screen will always be split half and half in any device?

Thanks a lot for any help.

Upvotes: 3

Views: 1666

Answers (1)

nevermore
nevermore

Reputation: 15786

Use a Grid can easily meet your requirement:

 <StackLayout
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=0.5,Constant=0}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width,Factor=1,Constant=0}">
        <Entry Text="pls input here" />
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="50" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button Text="Button1" Grid.Row="0" Grid.Column="0" />
            <Button Text="Button2" Grid.Row="0" Grid.Column="1" />
            <Button Text="Button3" Grid.Row="0" Grid.Column="2" />
            <Button Text="Button4" Grid.Row="0" Grid.Column="3" />
            <Button Text="Button5" Grid.Row="0" Grid.Column="4" />
        </Grid>
    </StackLayout>

A FlexLayout is also working:

<StackLayout
        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=0.5,Constant=0}"
        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width,Factor=1,Constant=0}">
    <Entry Text="pls input here" />

    <FlexLayout Direction="Row"
            AlignItems="Center"
            JustifyContent="SpaceEvenly">

        <Button Text="Button1" />
        <Button Text="Button2" />
        <Button Text="Button3" />
        <Button Text="Button4" />
        <Button Text="Button5" />

    </FlexLayout>

</StackLayout>

Upvotes: 3

Related Questions