Reputation: 3671

Xamarin Forms: How to place one layout on top of another layout

I am trying to create a UI like below:

My Code:

<RelativeLayout>
    <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand">
         <Grid>
            <Grid.ColumnDefinitions>
               <ColumnDefinition Width="33.3*" />
               <ColumnDefinition Width="33.4*" />
               <ColumnDefinition Width="33.3*" />
             </Grid.ColumnDefinitions>
             <StackLayout Grid.Column="0" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#F0BB1D" Margin="-10">
                <Label Text="Daily Readings" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
             </StackLayout>

              <StackLayout Grid.Column="1" HorizontalOptions="FillAndExpand" HeightRequest="40" Orientation="Vertical" BackgroundColor="#FD728B" Margin="-10">
                  <Label Text="Saint of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
               </StackLayout>

               <StackLayout Grid.Column="2" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#1FB5D6" Margin="-10">
                  <Label Text="Quiz of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
                </StackLayout>
            </Grid>
         </StackLayout>

         <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" >
             <Grid>
                 <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="33.3*" />
                    <ColumnDefinition Width="33.4*" />
                    <ColumnDefinition Width="33.3*" />
                 </Grid.ColumnDefinitions>
                  <Image Source="ic_daily_reading_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="0" />
                  <Image Source="ic_saint_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="1" />
                   <Image Source="ic_quiz_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="2"/>
                 </Grid>
           </StackLayout>
     </RelativeLayout>

Current Output:

How can I create a layout like the top? What property of relative layout needs to use to achieve this?

Upvotes: 2

Answers (4)

charles young

Reputation: 2289

Just to supplement the solution by Alex Logvin, I was able to superimpose images and text with transparency over a photo in my gammaDog application:

  <Grid>
    <ffimageloading:CachedImage
        x:Name="MyImage"
        Source="{Binding MyImage}" >
    </ffimageloading:CachedImage>

    <Image HorizontalOptions="Center"
           VerticalOptions="Center"
           Rotation="{Binding Heading}"
           Source="arrow.png"
           Margin="75"
           x:Name="ImageArrow"/>
    <Image HorizontalOptions="FillAndExpand"
           VerticalOptions="FillAndExpand"
           Rotation="{Binding HeadingCompass}"
           Source="compass.png"/>
    <Label Text="{Binding MyTitle, StringFormat='{0}'}"
           FontSize="Large" TextColor="Red"
           HorizontalTextAlignment="Center"></Label>
    <Label Text="{Binding MyNote, StringFormat='{0}'}"
           FontSize="Large" TextColor="Red"
           HorizontalTextAlignment="Center"
           VerticalTextAlignment="Bottom"></Label>
  </Grid>

Upvotes: 0

Alex Logvin

Reputation: 881

You can do it this way:

<Grid>
    <Button HeightRequest="50" WidthRequest="100" HorizontalOptions="Start" VerticalOptions="Start" BackgroundColor="Red"/>
    <Button HeightRequest="100" WidthRequest="50" HorizontalOptions="Start" VerticalOptions="Start" BackgroundColor="Green"/>
</Grid>

Pay attention to HorizontalOptions and VerticalOptions properties, these specify how controls are placed. (In my case the objects are anchored to top left corner)

And controls order matter. You can see that green button is on top of the red one, it's because in the code it's placed after the red one.

Upvotes: 1

Lucas Zhang

Reputation: 18861

Agree with @Roubachof. Or you can put the stacklayouts in the same grid cell .

<Grid>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>

        <StackLayout Grid.Row="0" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand">
            <Grid HeightRequest="30">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="33.3*" />
                    <ColumnDefinition Width="33.4*" />
                    <ColumnDefinition Width="33.3*" />
                </Grid.ColumnDefinitions>
                <StackLayout Grid.Column="0" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#F0BB1D" >
                    <Label Text="Daily Readings" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
                </StackLayout>

                <StackLayout Grid.Column="1" HorizontalOptions="FillAndExpand" HeightRequest="40" Orientation="Vertical" BackgroundColor="#FD728B" >
                    <Label Text="Saint of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
                </StackLayout>

                <StackLayout Grid.Column="2" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#1FB5D6" >
                    <Label Text="Quiz of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
                </StackLayout>
            </Grid>
        </StackLayout>

        <StackLayout Grid.Row="0" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" >
            <Grid HeightRequest="30">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="33.3*" />
                    <ColumnDefinition Width="33.4*" />
                    <ColumnDefinition Width="33.3*" />
                </Grid.ColumnDefinitions>
                <Image BackgroundColor="Red" WidthRequest="30" HeightRequest="30" Grid.Column="0" />
                <Image BackgroundColor="Red" WidthRequest="30" HeightRequest="30" Grid.Column="1" />
                <Image BackgroundColor="Red" WidthRequest="30" HeightRequest="30" Grid.Column="2"/>
            </Grid>
        </StackLayout>
</Grid>

Upvotes: 1

Roubachof

Reputation: 3401

In fact it's pretty simple, use the TranslationY property on your images view:

<Image Grid.Column="0" 
       TranslationY="-20"
       Source="ic_daily_reading_icon_xx.png" 
       WidthRequest="30" 
       HeightRequest="30" />

Upvotes: 2

Xamarin Forms: How to place one layout on top of another layout

Answers (4)

Related Questions