Использование AbsoluteLayout для фонового изображения, но некоторые элементы неправильно расположены Xamarin Forms

Question

У меня есть фоновое изображение, которое я должен установить для моего ContentPage, однако изображение увеличено. Мне нужно, чтобы оно было в Aspect = "Fill", чтобы оно отображалось правильно.Я посмотрел в Интернете, и решение было иметь либо AbsoluteLayout или RelativeLayout с изображением.Но при добавлении этого изображения, которое должно быть внизу страницы, больше не существует.

<RelativeLayout Parent="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

    <Image Source="Background.jpg" Aspect="Fill" RelativeLayout.WidthConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width}"
            RelativeLayout.HeightConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Height}"></Image>

    <StackLayout>

        <Label Text="Timetable" TextColor="Silver" HorizontalOptions="EndAndExpand" Margin="0, 10, 20, 0">
        </Label>

        <Image Margin="15, 20" HorizontalOptions="Center" WidthRequest="350" Source="subtle-logo.png"></Image>

        <Image HorizontalOptions="Center" x:Name="PlayPauseButton" Source="play.png" WidthRequest="75">
        </Image>

        <Image HorizontalOptions="Center" x:Name="shareButton" Source="share-button.png" WidthRequest="50" 
               VerticalOptions="End" Margin="0, 0, 0, 20">
        </Image>

    </StackLayout>

   </RelativeLayout> 

Однако этоКнопка «Поделиться» должна быть внизу страницы из-за свойства VerticalOptions = «End».Как мне это исправить?

Answer 1

AbsoluteLayout лучше по соображениям производительности.Кроме того, вы спрашиваете о AbsoluteLayout, но используете RelativeLayout в коде, которым вы поделились.

Независимо от того, вам нужно VerticalOptions для этого последнего изображения, равное VerticalOptions="EndAndExpand", которое расширит область, чтобы заполнить доступное пространство, а затем поместит изображение в вертикальный конец этой области.

В основном параметры макета Start, Center, End и Fill указывают, где разместить элемент в доступном пространстве или увеличить элемент для заполнения доступного пространства, где StartAndExpand, CenterAndExpand, EndAndExpand и FillAndExpand расширит доступное пространство, если это возможно, и затем установит для элемента в этом пространстве значение Start, Center и т. Д. AndExpand применимы только параметрыв StackLayout

Вот код, если вы хотите использовать вместо него AbsoluteLayout (, рекомендованный командой разработчиков Forms ):

<AbsoluteLayout>

    <Image Source="Background.jpg" Aspect="AspectFill" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" />

    <StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">

        <Label Text="Timetable" TextColor="Silver" HorizontalOptions="EndAndExpand" Margin="0, 10, 20, 0">
        </Label>

        <Image Margin="15, 20" HorizontalOptions="Center" WidthRequest="350" Source="subtle-logo.png"></Image>

        <Image HorizontalOptions="Center" x:Name="PlayPauseButton" Source="play.png" WidthRequest="75">
        </Image>

        <Image HorizontalOptions="Center" x:Name="shareButton" Source="share-button.png" WidthRequest="50" 
               VerticalOptions="EndAndExpand" Margin="0, 0, 0, 20">
        </Image>

    </StackLayout>

</AbsoluteLayout>