Xamarin Forms overlay image as background and place labels in different directions

Question

I would like to do something like the image below. I tried the absolute layout but it changes everything once it gets to the landscape . everything goes out to place again.

The final result will look like the image below (spirit - ticket part )

What I have so far

    <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>

What I get on landscape

It is not clear what you actually want to do. The screenshot does not really help since it does not have your data in it. E.g. where should the "please review ...." text actually go? — Mouse On Mars, Jan 30 '20 at 19:58
I add an edit - I want to place all those labels inside the background image , the code only shows the first label on the black header. — Pxaml, Jan 30 '20 at 20:04
the image you posted HAS NO RELATION to the code you posted. — Jason, Jan 30 '20 at 20:17
stop using all of the nested layouts and just use a simple grid — Jason, Jan 30 '20 at 21:13
@Pxaml I think you can just use a simple StackLayout with background colour blue and add labels to that Statically or Dynamically based on your requirements and it should look like what you are trying to achieve! — FreakyAli, Jan 31 '20 at 06:48
the image I have to use is more complicated than what you see. it contains a lot of labels tru the image — Pxaml, Jan 31 '20 at 13:19

score 0 · Answer 1 · answered Jan 30 '20 at 20:04

0

this creates a centered top label regardless of orientation

<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>

answered Jan 30 '20 at 20:04

Jason

86,222
15
131
146

I added the grid and the text goes on top of the image. not sure how to get every label inside the background image. – Pxaml Jan 30 '20 at 20:12
make the image span the same rows and cols as the labels – Jason Jan 30 '20 at 20:17

score 0 · Answer 2 · answered Jan 30 '20 at 20:15

0

Use AbsoluteLayout.LayoutFlags="All" and set the AbsoluteLayout.LayoutBounds by calculating the percentage of X and Y of Image where you want the field views.

answered Jan 30 '20 at 20:15

Nikhileshwar

1,666
1
11
26

How do I calculate that ? – Pxaml Jan 30 '20 at 20:53

Xamarin Forms overlay image as background and place labels in different directions

2 Answers2