Xamarin Forms накладывает изображение в качестве фона и размещает метки в разных направлениях - PullRequest
Новая
       82

Xamarin Forms накладывает изображение в качестве фона и размещает метки в разных направлениях

0 голосов
/ 30 января 2020

Я хотел бы сделать что-то вроде изображения ниже. Я попробовал абсолютный макет, но он меняет все, как только попадает в ландшафт. все выходит на место снова.

Окончательный результат будет выглядеть как на картинке ниже (дух - часть билета)

enter image description here

Что у меня есть

enter image description here

    <StackLayout BackgroundColor="#F0F0F0">

        <Grid Margin="10" RowSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                 <RowDefinition Height="Auto"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="40" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

             <Label Grid.Row="0" Grid.ColumnSpan="2" Text="Please review your reservation below" LineBreakMode="WordWrap"/>
            <StackLayout  Grid.Row="1"  Grid.ColumnSpan="2" >

                <AbsoluteLayout>
                    <Image>
                        <AbsoluteLayout.LayoutBounds>
                            <OnPlatform x:TypeArguments="Rectangle">
                                <On Platform="Android" Value=".5,.5,1.0,1.8" />
                                <On Platform="iOS" Value=".5,.10,1.8,1" />
                            </OnPlatform>
                        </AbsoluteLayout.LayoutBounds>
                        <AbsoluteLayout.LayoutFlags>
                            <OnPlatform x:TypeArguments="AbsoluteLayoutFlags">
                                <On Platform="Android" Value="All" />
                                <On Platform="iOS" Value="All" />
                            </OnPlatform>
                        </AbsoluteLayout.LayoutFlags>
                        <Image.Source>
                            <OnPlatform x:TypeArguments="ImageSource">
                                <On Platform="Android" Value="ticketone.png" />
                                <On Platform="iOS" Value="ticket.png" />
                            </OnPlatform>
                        </Image.Source>
                    </Image>
                  <Label  AbsoluteLayout.LayoutBounds="0.1,99,.56,50" AbsoluteLayout.LayoutFlags="XProportional,WidthProportional" Text="ROOMSHFBHE GFDJHBCSJSJJ HJSDHSJ no snonnoj" TextColor="White"  FontSize="20" FontAttributes="Bold"  LineBreakMode="WordWrap" />
              </AbsoluteLayout>

Что я получаю в ландшафте

enter image description here

Ответы [ 2 ]

0 голосов
/ 30 января 2020

Используйте AbsoluteLayout.LayoutFlags="All" и задайте AbsoluteLayout.LayoutBounds, вычисляя процентное соотношение X и Y изображения, где вы хотите просматривать поля.

0 голосов
/ 30 января 2020

это создает метку по центру, независимо от ориентации 

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="100" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <Label Grid.Row="0" Grid.Column="0" VerticalTextAlignment="Center" 
    HorizontalOptions="FillAndExpand" BackgroundColor="Black"
    TextColor="White" HorizontalTextAlignment="Center" Text="center" />
</Grid>
...