Текст заголовка XAML отсутствует при изменении ориентации предварительного просмотра телефона на горизонтальное и дополнительное поле для абсолютного макета

Question

У меня есть XAML Xamarin с фоновым изображением с текстом заголовка и оверлеем в 3 кнопки внизу. Во-вторых, как убрать лишнее поле между 3 кнопками?

        <AbsoluteLayout>
        <Image Source="Flower.jfif" Aspect="AspectFill" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" />
        <AbsoluteLayout x:Name="ViewControls" AbsoluteLayout.LayoutBounds="1,0,1,0.1" AbsoluteLayout.LayoutFlags="All" Margin="0,20">
            <StackLayout BackgroundColor="Transparent" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
                <Label Text="Relax" TextColor="White" FontSize="30" HorizontalOptions="Center" />
            </StackLayout>
        </AbsoluteLayout>
        <AbsoluteLayout x:Name="ViewControls" AbsoluteLayout.LayoutBounds="1,1,1,0.1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="#66000000">
            <StackLayout Orientation="Horizontal" BackgroundColor="Transparent" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
                <Button Text="Profile" BackgroundColor="Transparent" TextColor="White" HorizontalOptions="FillAndExpand" />
                <Button Text="Meditate" BackgroundColor="Transparent" TextColor="White" HorizontalOptions="FillAndExpand" />
                <Button Text="Theme" BackgroundColor="Transparent" TextColor="White" HorizontalOptions="FillAndExpand" />
            </StackLayout>
        </AbsoluteLayout>
    </AbsoluteLayout>

Answer 1

Текст заголовка XAML отсутствует при изменении ориентации предварительного просмотра телефона на горизонтальный

Это вызвано установленным полем (Margin = "0,20"):

<AbsoluteLayout x:Name="ViewControls" AbsoluteLayout.LayoutBounds="1,0,1,0.1" AbsoluteLayout.LayoutFlags="All" Margin="0,20">

Решение :

Удалите поле и введите Y (здесь я использую 0,05) для ViewControls, например:

<AbsoluteLayout x:Name="ViewControls" AbsoluteLayout.LayoutBounds="1,0.05,1,0.1" AbsoluteLayout.LayoutFlags="All" >

дополнительная маржа для абсолюта макет

Существует пространство по умолчанию стекового размещения, значение по умолчанию - 6,0.

Решение : вы можете добавить spacing = -6 чтобы удалить его:

<StackLayout Orientation="Horizontal" BackgroundColor="Transparent" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" Spacing="-6">

Вот полный код:

<AbsoluteLayout>
    <Image Source="Flower.jfif" Aspect="AspectFill" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" />
    <AbsoluteLayout x:Name="ViewControls" AbsoluteLayout.LayoutBounds="1,0.05,1,0.1" AbsoluteLayout.LayoutFlags="All" >
        <StackLayout BackgroundColor="Transparent" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
            <Label Text="Relax" TextColor="White" FontSize="30" HorizontalOptions="Center" />
        </StackLayout>
    </AbsoluteLayout>
    <AbsoluteLayout x:Name="ViewControlss" AbsoluteLayout.LayoutBounds="1,1,1,0.1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="#66000000">
        <StackLayout Orientation="Horizontal" BackgroundColor="Transparent" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" Spacing="-6">
            <Button Text="Profile" BackgroundColor="Yellow" TextColor="White" HorizontalOptions="FillAndExpand"/>
            <Button Text="Meditate" BackgroundColor="Green" TextColor="White" HorizontalOptions="FillAndExpand"/>
            <Button Text="Theme" BackgroundColor="Red" TextColor="White" HorizontalOptions="FillAndExpand"/>
        </StackLayout>
    </AbsoluteLayout>
</AbsoluteLayout>