question

Joey-2264 avatar image
0 Votes"
Joey-2264 asked Joey-2264 commented

Overlaying control on top of grid

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>

dotnet-xamarinforms
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered Joey-2264 commented

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://docs.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
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Perfect thanks!

0 Votes 0 ·
alessandrocaliaro avatar image
0 Votes"
alessandrocaliaro answered

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

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.