AbsoluteLayout proportional position flag not working properly in .net MAUI

Question

I'm trying to position a StackLayout to the bottom of the page using an AbsoluteLayout as demonstrated in below code sample. However the position flag is treated as absolute value not proportional resulting in having the StackLayout positioned in the top of the page (rather in the bottom). When I inclemently increase the position value, the StackLayout starts to shift downward which it should not since the the layoutFlags are set to "All". Any help would be appreciated in help to resolve this issue, is it a bug in .net MAUI?

<AbsoluteLayout Margin="5">
    <StackLayout  BackgroundColor="White"
                                 AbsoluteLayout.LayoutBounds="0,1,1,0.2"
                                 AbsoluteLayout.LayoutFlags="All">
            <StackLayout Orientation="Horizontal" HorizontalOptions="Center">
                        <Label  Text="التاريخ المحدد:"/>
                        <Label x:Name="selectedDeliveryDate"/>
            </StackLayout>
            <Button x:Name="confirmDateSelected" Text="تأكيد" BackgroundColor="#009688"  Margin="20,5,20,5" Clicked="confirmDateSelected_Clicked"/>
    </StackLayout>
</AbsoluteLayout>

ToolmakerSteve · Accepted Answer · 2022-08-06T03:02:15.057

2

It works for me.

The problem is something you don't show:

What did you place <AbsoluteLayout ... inside of?

The proportions of AbsoluteLayout are relative to whatever layout it is inside of.

Here I've taken your code, but changed background color to "Red", and placed it directly inside a page:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp7t.Page3"
             Title="Page3">
<AbsoluteLayout Margin="5">
    <StackLayout  BackgroundColor="Red"
                                 AbsoluteLayout.LayoutBounds="0,1,1,0.2"
                                 AbsoluteLayout.LayoutFlags="All">
            <StackLayout Orientation="Horizontal" HorizontalOptions="Center">
                        <Label  Text="التاريخ المحدد:"/>
                        <Label x:Name="selectedDeliveryDate"/>
            </StackLayout>
    </StackLayout>
</AbsoluteLayout>
</ContentPage>

This does what you describe: My "red" area is at bottom of screen:

Tested on both Windows and Android.
Tested both as a stand-alone page, and as a page within AppShell.

edited Aug 06 '22 at 03:02

answered Aug 06 '22 at 02:46

ToolmakerSteve

18,547
14
94
196

Thank you for your answer, the absolute layout is inside a stack layout. So how can I make it work with this setup? – Ali Alfaraj Aug 06 '22 at 06:03
How to make it work, depends on **where** on the screen you want other stuff. **Add to your question** a brief summary of where on screen you want items that are NOT inside the AbsoluteLayout. Will there be elements at **top** of page? In **middle** (vertically) of page? At **left or right** edge? And **Show the xaml** for any other "Layout" (or Grid) classes you use on that page. Show the "hierarchy" starting at the top of the xaml. If that StackLayout is inside of something else, show what it is inside of. – ToolmakerSteve Aug 06 '22 at 18:50
I only have a navigation control outside the absolute layout which comes at the top of the page. – Ali Alfaraj Aug 20 '22 at 10:56
I set the VerticalOptions="FillAndExpand" for the AbsoluteLayout and it worked. – Ali Alfaraj Aug 20 '22 at 11:10

AbsoluteLayout proportional position flag not working properly in .net MAUI

1 Answers1