Проблемы дизайна Xamarin Layout с ротацией

Question

Я действительно новичок в разработке Xaml, отсюда и этот вопрос.

Я пытаюсь создать экран, как показано ниже, в формах Xamarin:

Я пытался использовать следующий код

<StackLayout>
    <StackLayout  VerticalOptions="Start" BackgroundColor="Gray">
        <Label Text="Welcome to Xamarin.Top!" 
       HorizontalOptions="Center"
       VerticalOptions="CenterAndExpand" />
    </StackLayout>

    <StackLayout VerticalOptions="StartAndExpand" BackgroundColor="Blue">
        <!-- middle controls -->
        <Label Text="Welcome to Xamarin.Middle!" 
       HorizontalOptions="Center"
       VerticalOptions="CenterAndExpand" />

    </StackLayout>
    <RelativeLayout VerticalOptions="End" BackgroundColor="Transparent">
        <Label Text="Welcome to Xamarin.Overlay.Bottom!" 
       HorizontalOptions="Center"
       VerticalOptions="CenterAndExpand" />
    </RelativeLayout>
</StackLayout>

однако я не получаю результат, даже если он заставляет его работать частично, он не работает при повороте экрана.

Может кто-нибудь, пожалуйста, помогите мне с кодом xaml.

Answer 1

Код ниже точно отображает то, что вы хотите.

<Grid Padding="10" BackgroundColor="Blue">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <ContentView Grid.Row="0" BackgroundColor="LightGray">
            <Label Text="TopPanel" HorizontalOptions="Center" VerticalOptions="Center" />
        </ContentView>
        <ContentView Grid.Row="1" BackgroundColor="Orange">
            <Label Text="Fill Rest Panel" HorizontalOptions="Center" VerticalOptions="Center" />
        </ContentView>
    </Grid>
    <ContentView Margin="10" HeightRequest="50" VerticalOptions="End" BackgroundColor="Green">
        <Label Text="Overlay Bottom Panel" HorizontalOptions="Center" VerticalOptions="Center" />
    </ContentView>
</Grid>

См. Изображение ниже для вывода.

Answer 2

Из общего кода, он не может понять, что вы хотите. Поскольку RelativeLayout содержится в StackLayout, вы должны сделать RelativeLayout корневым макетом в Xaml. Тогда он может показать эффекты RelativeLayout.

. Поэтому, если вы подумываете об использовании Xamarin.Forms RelativeLayout для его реализации, вы можете посмотретьпо следующему коду:

<RelativeLayout>
    <ContentView x:Name="FirstContent"
                    BackgroundColor="WhiteSmoke"
                    RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0.02,Constant=0}"
                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=.02,Constant=0}"
                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0.96,Constant=0}"
                    RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=.18,Constant=0}">
        <Label Text="Top Panel"
                FontSize="Large"
                HorizontalOptions="Center"
                VerticalOptions="Center" />
    </ContentView>
    <ContentView x:Name="SecondContent"
                    BackgroundColor="SandyBrown"
                    RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0.02,Constant=0}"
                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=.22,Constant=0}"
                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0.96,Constant=0}"
                    RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=.76,Constant=0}">
        <Label Text="Fill Rest Panel"
                FontSize="Large"
                HorizontalOptions="Center"
                VerticalOptions="Center" />
    </ContentView>

    <ContentView x:Name="ThirdContent"
                    BackgroundColor="ForestGreen"
                    RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,ElementName=SecondContent,Property=Width,Factor=0.1,Constant=0}"
                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,ElementName=SecondContent,Property=Height,Factor=1.13,Constant=0}"
                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=.8,Constant=0}"
                    RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=.10,Constant=0}">
        <Label Text="Welcome to Xamarin.Overlay.Bottom!"
                FontSize="Large"
                HorizontalOptions="Center"
                VerticalOptions="Center" />
    </ContentView>

</RelativeLayout>

Эффект: