Почему дочерние элементы StackLayout в XAML-файле Xamarin.Form исчезают с экрана?

Question

В моем проекте Xamarin.Form у меня есть несколько кнопок, которые являются дочерними элементами StackLayout (Orientation = "Horizontal") в файле XAML. Размер этих кнопок не регулируется автоматически, поэтому все кнопки могут отображаться на экране любого устройства. Они слишком большие, и некоторые из них выходят за пределы экрана.

Я включил StackLayout, упомянутый выше, в другой StackLayout, который имеет WidthConstraint, который составляет 100% ширины экрана устройства. И я попробовал несколько горизонтальных вариантов для кнопок и макетов, которые не помогли.

<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>

То, что я ожидаю, похоже на макет на загруженной мной картинке, что экран разделен пополам, а нижняя половина (в StackLayout) будет содержать запись, позволяющую пользователям вводить некоторые тексты, ниже которых 5 кнопок (в StackLayout) будет располагаться горизонтально внутри экрана (их размеры должны быть скорректированы так, чтобы автоматически подходить к разным размерам устройств).

Может быть, мне даже не следует использовать StackLayout для нижней половины региона? Но я думаю, что я должен использовать RelativeLayout снаружи, чтобы экран всегда был разделен пополам в любом устройстве?

Большое спасибо за любую помощь.

Answer 1

Использование Сетка может легко удовлетворить ваши требования:

 <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 также работает:

<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>