Stacking of Layouts

[MAUIoxo]

Hi there,

I would like to ask a question about stacking of layouts. I am not talking about a StackLayout which stacks the elements underneath horizontally/vertically.

What is mean is stacking elements on top of each other so that I can have a Background Image underneath, a LinearGradient on top of that, other elements on top of the Gradient, e.g. another Grid which is transparent and contains the elements on top of all that. The Grid containing a Border in there which visually contains other elements.

Hope, I could explain correctly. I want to stack all elements on top of each other that's it.

What I used to do so far was something like:

<Grid RowDefinitions="Auto">

    <!-- Container for Image and LinearGradient -->
    <Grid Grid.Row="0">

        <!-- Image at the bottom --> 
        <Image x:Name="BackgroundImage" Source="image.jpg" Aspect="AspectFill"/>

        <!-- LinearGradient on top --> 
        <Grid>
            <Grid.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Color="White" Offset="0.0" />
                    <GradientStop Color="Transparent" Offset="1.0" />
                </LinearGradientBrush>
            </Grid.Background>
        </Grid>
    </Grid>

    <!-- Needs to be down there, otherwise the Border is not on top of the Image and LinearGradient -->
    <Grid Grid.Row="0" RowDefinitions="*" Grid.RowSpan="2">

        <Border x:Name="HelpPageBorder" Grid.Row="0" VerticalOptions="Start" Style="{StaticResource BorderStyleView}" />

        <VerticalStackLayout Grid.Row="0" Margin="10, 35, 0, 10">
            <Label Text="Welcome to Help!" VerticalOptions="Center" HorizontalOptions="Center" />

            <searchBarControl:SearchBarLang ios:SearchBar.SearchBarStyle="Minimal" Margin="0, 0, 0, 5"  Placeholder="DASFDSDDSFSD" Text="{Binding SearchText}" CancelButtonText="{loc:Translate CancelButtonText}"/>
        </VerticalStackLayout>
    </Grid>
</Grid>

Problem here is actually the need to be in the same Grid.Row and to display correctly.

Or would you try and do it all with ZIndex here? What do you think is cleanest to layout and would be the preferred way? Downsides of methods?

<Grid>

    <!-- Image at the bottom -->
    <Image x:Name="BackgroundImage" ZIndex="1" Source="help_page.jpg" Aspect="AspectFill"/>

    <!-- LinearGradient on top -->
    <Grid ZIndex="2">
        <Grid.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <GradientStop Color="White" Offset="0.0" />
                <GradientStop Color="Transparent" Offset="1.0" />
            </LinearGradientBrush>
        </Grid.Background>
    </Grid>

    <Grid ZIndex="3" RowDefinitions="*">
        <Border x:Name="HelpPageBorder" VerticalOptions="FillAndExpand" Style="{StaticResource BorderStyleView}" />
    </Grid>

    <VerticalStackLayout ZIndex="4" Margin="15, 15, 15, 10">
        <searchBarControl:SearchBarLang ios:SearchBar.SearchBarStyle="Minimal" Margin="0, 0, 0, 5"  Placeholder="{loc:Translate HelpPage_SearchBarText}" Text="{Binding SearchText}" CancelButtonText="{loc:Translate CancelButtonText}"/>
    </VerticalStackLayout>

</Grid>

I wanted to ask if there are better ways to achieve such a kind of stacking which is cleaner?

[sjordanGSS]

I remember a few years ago there was talk of a ZStackLayout which would've done exactly this, but I can't find the issue.
I would guess that using ZIndex would be the way to accomplish this now.

[MAUIoxo]

Thanks - then I will go for that. I really had some problems in the past using ZIndex as it did not work. But this is working here and so I go for that

[tschbc]

In my opinion, I would avoid using ZIndex unless I needed to explicitly override a ZIndex that didn't match where the view is in the XAML structure.

If you want to display views on top of other views, you probably want AbsoluteLayout. Grid can do a limited amount of this, as you're already using, but AbsoluteLayout gives you a bit more control on how to layout everything.

<Border>
    <AbsoluteLayout>

        <Image 
            x:Name="BackgroundImage"
            AbsoluteLayout.LayoutFlags="All"
            AbsoluteLayout.LayoutBounds="0,0,1,1"
            Aspect="AspectFill" />

        <Grid
            AbsoluteLayout.LayoutFlags="All"
            AbsoluteLayout.LayoutBounds="0,0,1,1">

            <Grid.Background />

            <!-- Implement UI -->

            <searchBarControl:SearchBarLang />

            <!-- etc. -->
        </Grid>

    </AbsoluteLayout>
</Border>

In detail:

1. Use Border as the parent View so it inherently surrounds its children
2. Add AbsoluteLayout as Border's sole child
3. Place BackgroundImage first so it's on the bottom of the Z stack
4. Place Grid with gradient background after BackgroundImage and implement your UI in it
5. Set layout options for the BackgroundImage and Grid to:
   • AbsoluteLayout.LayoutFlags="All" -> Lets you specify the View's position and its width/height
   • AbsoluteLayout.LayoutBounds="0,0,1,1" -> Two (x,y) pairs: 0,0 and 1,1, each value between 0.0 and 1.0 inclusively
     • 0,0 -> Position the view at the AbsoluteLayout's (x,y) position
     • 1,1 -> Set its width and height to 1.0x of the AbsoluteLayout's width/height

Say you wanted to float a centered title or something as well. You could use:

<Label
    AbsoluteLayout.LayoutFlags="PositionProportional"
    AbsoluteLayout.LayoutBounds="0.5,0.25"/>

would position the label at 1/2 of the AbsoluteLayout's width and 1/4 of the AbsoluteLayout's height (from top), then let the Label decide its own actual width and height.

[MAUIoxo]

How is the Stacking actually applied? Is it like all AbsoluteLayouts are stacked on top of each other automatically and would cover each other and just with the positions you determine where they start and end? So for my case I wanted to have a Background Image first on the very bottom. Then on top of that a certain transparency defined by the LinearGradient. On top of that a Border with a certain opacity. Would they all need to be placed in an AbsoluteLayout as a child of the parent AbsoluteLayout and in there put other layouts and UI elements to have the style on the topmost element of this stack?

[tschbc]

Is it like all AbsoluteLayouts are stacked on top of each other automatically and would cover each other and just with the positions you determine where they start and end?

Did you mean views instead of AbsoluteLayouts? In that case, yes, they will cover each other based on the AbsoluteLayout options you set on the views.

For stacking, elements that appear first (top-most) in XAML will be at the bottom of the stack:

1. Border first, so it surrounds everything in the AbsoluteLayout (I'm assuming you're making a Card-style layout with rounded corners?)
2. AbsoluteLayout next, to act as the main container for the rest of the views
3. Image next: it sits within ("on top") the AbsoluteLayout, and in this case, its AbsoluteLayout options say that it should take the entire amount of space that the AbsoluteLayout takes
4. and so on

Would they all need to be placed in an AbsoluteLayout as a child of the parent AbsoluteLayout and in there put other layouts and UI elements to have the style on the topmost element of this stack?

That part's up to your UI design. The only time you need to place a view in an AbsoluteLayout is if you want to explicitly tell it what position and/or size it should use. It's perfectly reasonable to cover an Image with a layout (like Grid) with the same AbsoluteLayout options, and then continue using the Grid as normal for the rest of the UI.