Overlapping frame in a grid xamarin forms

Question

I am using the latest xamarin forms.

I have a requirement that I need to position a frame between 2 rows in a grid.

I could not make it work with absolute layout or flex layout. Below is my simplified attempt with a grid

 <Grid ColumnSpacing="1" RowSpacing="1">
    <Grid.RowDefinitions>
        <RowDefinition Height="5*"/>
        <RowDefinition Height="8*"/>
    </Grid.RowDefinitions>
    <Grid BackgroundColor="Red" Grid.Row="0">
 <Label Text="Add some stuff here"></Label>
    </Grid>
    <Grid BackgroundColor="Blue" Grid.Row="1">
        <Frame BackgroundColor="Green" HeightRequest="100" WidthRequest="100" Margin="20,-150,20,20"></Frame>
    </Grid>
</Grid>

This is my UNWANTED RESULT

I cannot seem to set the heighrequest of the frame as it remains big.

What is the best approach to overlay a frame between 2 rows?

thanks

You should look into AbsoluteLayout which is perfect for this kind of design. Or RelativeLayout. — Sparsha Bhattarai, Sep 29 '19 at 15:03

score 2 · Accepted Answer · answered Sep 29 '19 at 16:03

2

For your layout, you can use AbsoluteLayout in the following manner:

  <AbsoluteLayout BackgroundColor="Blue" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
        <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Pink"  AbsoluteLayout.LayoutBounds="1,0,1,0.5" AbsoluteLayout.LayoutFlags="All"  />
        <StackLayout AbsoluteLayout.LayoutBounds="1,1,1,0.5" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Beige"/>
        <Frame  AbsoluteLayout.LayoutBounds="0.5,0.5,0.8,0.5" AbsoluteLayout.LayoutFlags="All"  BackgroundColor="White" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"  CornerRadius="20"   />
  </AbsoluteLayout>

You will get the following design from the above implementation.

answered Sep 29 '19 at 16:03

Sparsha Bhattarai

693
11
20

hi there thanks for your answer I need to do with 2 grids as it's an existing page .I need to really understand absolute layout and how it works as I have to move it up a bit. Do you have min to explain what moves it up and down. in the meantime I will re-read the documentation – developer9969 Sep 29 '19 at 17:55
If you need to place the layout within two rows of a grid, you can simply place it on the top row and set the rowspan to 2. Finally set, the AbsoluteLayout height as required. As for the layout itself, the bounds are set in the order of x, y, width and height. The anchor positions can give you the general idea of how a view moves up and down in the AbsoluteLayout. You can read it here: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/absolute-layout#usage – Sparsha Bhattarai Sep 29 '19 at 18:05
@SparshaBhattarai great solution. But I had another question. Can you also put the frame component in a list, so that the background is fixed but you can scroll through multiple frames? – E75 Sep 17 '20 at 20:10
I'm not sure what you mean exactly but I think a normal list with background color should work in that case. Or, a list inside a contentview. Maybe I can explain better if you explain your requirement more. – Sparsha Bhattarai Sep 17 '20 at 22:51
@SparshaBhattarai, see here: [page with frames (cards) in a listview](https://stackoverflow.com/questions/63950563/page-with-frames-cards-in-a-listview-x-forms-4-6) – E75 Sep 18 '20 at 06:47

Overlapping frame in a grid xamarin forms

1 Answers1

Linked