Search code examples
xamaringrid

Is this layout possible with grid in XamarinForm?

enter image description here

I want to create a grid layout with the following structure: 2 rows and 1 column. I would like to place a yellow control on top of the grid, which is not constrained by the grid.

The yellow control indicates the top layered state.

Solution

  • You can put the grid into the AbsoluteLayout and then use another control to cover the grid. Such as:

    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App23.Page2">
    <ContentPage.Content>
        <StackLayout>
          <AbsoluteLayout HeightRequest="600">
            <Grid AbsoluteLayout.LayoutBounds="0,0,600,400" RowSpacing="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="3*"/>
                    <RowDefinition Height="7*"/>
                </Grid.RowDefinitions>
                <StackLayout HorizontalOptions="Fill" BackgroundColor="Green" Grid.Row="0"/>
                <StackLayout HorizontalOptions="Fill" BackgroundColor="Blue" Grid.Row="1"/>
            </Grid>
            <StackLayout  BackgroundColor="Red"
                         AbsoluteLayout.LayoutBounds="0,0,140,140"/>
          </AbsoluteLayout>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

    And the result image:

    enter image description here

    Update 1:

    You can use the TranslationX property and the Custom Animation to move the red stacklayout. Such as

    In the xaml:

    <StackLayout x:Name="red" BackgroundColor="Red"
                         AbsoluteLayout.LayoutBounds="0,0,140,140"/>

    In the code behind:

    var a = new Animation(v => red.TranslationX= v, 0, 100);
a.Commit(this, "Test", 16, 2000, Easing.CubicIn);