Почему Xamarin Absolute Layout не соблюдает порядок детей - PullRequest
Новая
       40

Почему Xamarin Absolute Layout не соблюдает порядок детей

0 голосов
/ 23 апреля 2019

Я пытаюсь создать макет, в котором содержимое имеет изображение на фоне (расположено в левом нижнем углу, расширяется на 100% по вертикали и на 60% по горизонтали)

Весь контент оборачивается в AbsoluteLayout, основной контент является потомком этого макета и состоит из StackLayout (и некоторого другого содержимого внутри).

Средство предварительного просмотра в Visual Studio (Visual Studio Community 2017) правильно показывает макет - изображение находится ниже содержимого, содержимое размещается посередине, как и предполагалось. Тем не менее, как VS Emulator, так и Genymotion показывают изображение над содержимым.

Я обрезал код, чтобы он был максимально читабельным (лишив его стиля)

... 

        <Frame VerticalOptions="End" AbsoluteLayout.LayoutFlags="All" Margin="0" Padding="0" IsClippedToBounds="True" AbsoluteLayout.LayoutBounds="0,1,0.6,1">
            <Image Source="Graphic_Anna.png" />
        </Frame>

        <!-- Start: Actual Page Content -->
        <StackLayout VerticalOptions="Center" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" x:Name="ApplicationLayoutContentLevel">

            <Label Text="This is some text in main content" />

        </StackLayout>
        <!-- End: Actual Page Content -->

    </AbsoluteLayout>
</ContentPage.Content>

...

Ожидаемый результат показан на этом скриншоте (из Previewer): https://i.imgur.com/C8GBMSi.png

Однако, результат в обоих эмуляторах, похоже, делает это: https://i.imgur.com/NvJFZan.png

К сожалению, в данный момент у меня нет возможности протестировать приложение на реальном телефоне Android

1 Ответ

0 голосов
/ 24 апреля 2019

Вы хотите добиться, как на следующем скриншоте? Я не знаю, какой размер вы использовали, поэтому вырезал картинку из вашего скриншота.

enter image description here

Если так, то есть мой код. Если вы хотите достичь эффекта слияния, я использовал два stacklayout, первый макет будет покрыт вторым макетом. Примечание: Если вы установите VerticalOptions, это повлияет на AbsoluteLayout.LayoutBounds

 <ContentPage.Content>
    <AbsoluteLayout>


        <StackLayout VerticalOptions="End" AbsoluteLayout.LayoutFlags="All" Margin="0" Padding="0" IsClippedToBounds="True" AbsoluteLayout.LayoutBounds="0,1,0.6,1">

            <Image Source="Graphic_Anna.png" />

        </StackLayout>
        <!-- Start: Actual Page Content -->
        <StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0.8,0.7,0.5,0.5"  x:Name="ApplicationLayoutContentLevel">
            <Image Source="start.png"  Scale="0.7"/>
            <Label Text="10/10" TextColor="Black" FontSize="50" Margin="20,10,0,0"/>
            <Label Text="Great job! you got everything" TextColor="Black" Margin="0,10,0,0" />
            <Label Text="Back to games" TextColor="red"  Margin="25,20,0,0"  />
        </StackLayout>
    <!-- End: Actual Page Content -->

    </AbsoluteLayout>

</ContentPage.Content>
...