Placing uneven height items horizontal/vertical in a Layout without spacing in Xamarin forms

Question

Placing uneven height items horizontal/vertical in a Layout without spacing in Xamarin forms

For ex: Below is the example items should be placed. There should not be space between Item1 & Item3. If we place in Grid or FlexLayout there will be space in between them due to Item2 height. (px is the height). In the attached screenshot there is space between blue & gray tile. I don't want that space in between them.

Item1 - 100px Item2 - 150px
Item3 - 150px. Item4 - 200 px

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

For Grid, It has a ColumnSpacing and RowSpacing defaults. If you want to remove the white space, you need to set the RowSpacing="0" ColumnSpacing="0" in the <Grid> tag.

For FlexLayout, I use following code, it do not have white space. The spacing is based on the area left after allocating all the children. You got a lot of area left verizontally so the space between rows got larger. you can try to add AlignItems="Stretch" or JustifyContent="Start" AlignItems="Start".

   <FlexLayout Direction="Column">  
     
               <!-- Header -->  
               <Label Text="HEADER"  
                  FontSize="Large"  
                  BackgroundColor="Aqua"  
                  HorizontalTextAlignment="Center" />  
     
               <Label Text="FOOTER"  
                  FontSize="Large"  
                  BackgroundColor="Pink"  
                  HorizontalTextAlignment="Center" />  
     
               <Label Text="FOOTER"  
                  FontSize="Large"  
                  BackgroundColor="Red"  
                  HorizontalTextAlignment="Center" />  
           </FlexLayout>  

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.