Overlaying control on top of grid

Joey 21 Reputation points
2021-03-29T09:21:11.6+00:00

82335-screen-shot-2021-03-29-at-81535-pm.png

I want to make my dashboard split into 4 quad-like parts. I've made a grid and for simplicity sake have created 4 box views with different colour background as seen in the screenshot provided.

What I am struggling to do is create a 5th box view, however this one will be vertically and horizontally centre and will overlap all of the box views. It will be roughly the same size, but as it's horizontally and vertically centre, it will overlap a portion of each existing box view.

Here is my current sample

<Grid BackgroundColor="White">  
            <Grid.ColumnDefinitions>  
                <ColumnDefinition Width="0.5*" />  
                <ColumnDefinition Width="0.5*" />  
            </Grid.ColumnDefinitions>  
            <Grid.RowDefinitions>  
                <RowDefinition Height="0.5*" />  
                <RowDefinition Height="0.5*" />  
            </Grid.RowDefinitions>  
            <BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Red">  
            </BoxView>  
            <BoxView  Grid.Row="0" Grid.Column="1" BackgroundColor="Blue">  
            </BoxView>  
            <BoxView Grid.Row="1" Grid.Column="0" BackgroundColor="Green">  
            </BoxView>  
            <BoxView Grid.Row="1" Grid.Column="1" BackgroundColor="Yellow">  
            </BoxView>  
        </Grid>  
Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
4,813 questions
No comments
{count} votes

Accepted answer
  1. JarvanZhang 23,846 Reputation points
    2021-03-29T11:09:48.077+00:00

    Hello,​

    Welcome to our Microsoft Q&A platform!

    Try using AbsoluteLayout to wrap the views, then specify value to the AbsoluteLayout.LayoutFlags property and AbsoluteLayout.LayoutBounds properties to define the position of the view.

    Check the code:

       <AbsoluteLayout >  
           <Grid BackgroundColor="White" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">  
               <Grid.ColumnDefinitions>  
                   <ColumnDefinition Width="0.5*" />  
                   <ColumnDefinition Width="0.5*" />  
               </Grid.ColumnDefinitions>  
               <Grid.RowDefinitions>  
                   <RowDefinition Height="0.5*" />  
                   <RowDefinition Height="0.5*" />  
               </Grid.RowDefinitions>  
               <BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Red">  
               </BoxView>  
               <BoxView  Grid.Row="0" Grid.Column="1" BackgroundColor="Blue">  
               </BoxView>  
               <BoxView Grid.Row="1" Grid.Column="0" BackgroundColor="Green">  
               </BoxView>  
               <BoxView Grid.Row="1" Grid.Column="1" BackgroundColor="Yellow">  
               </BoxView>  
           </Grid>  
         
           <BoxView AbsoluteLayout.LayoutBounds="0.5, 0.5, 0.5, 0.5" AbsoluteLayout.LayoutFlags="All" BackgroundColor="LightPink">  
           </BoxView>  
       </AbsoluteLayout>  
    

    82411-%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE-2021-03-29-190730.png

    Check the doc: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/absolutelayout#absolute-positioning-and-sizing

    Best Regards,

    Jarvan Zhang


    If the response is helpful, please click "Accept Answer" and upvote it.

    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.


1 additional answer

Sort by: Most helpful
  1. Alessandro Caliaro 2,796 Reputation points
    2021-03-29T09:52:42.217+00:00

    I think you can use an absolutelayout to add the 5th box

    absolutelayout

    Otherwise use 3 columns and 3 rows so you can have a centered box starting from position 1,1

    No comments