MAUI DockLayout

Question

I want to build a MAUI app (primary for phones). My goal is to have a button bottom right.

I played around with Grid but that lead to "fixed" values and seems not reliable for different screen sizes.

I discovered DockLayout from the MAUI Toolkit and my code looks like that:

    <toolkit:DockLayout>
        <Label toolkit:DockLayout.DockPosition="Top"
     Text="Welcome to .NET MAUI!"
     VerticalOptions="Center" 
     HorizontalOptions="Center" />

        <Button Text="+" MaximumWidthRequest="65" MaximumHeightRequest="65" Command="{Binding ShowPopupCommand, Mode=OneWay}" CornerRadius="50" toolkit:DockLayout.DockPosition="Bottom" />
    </toolkit:DockLayout>

The label is correct on top but the button is centered in my app and not at the bottom. What do I wrong?

Answer 1

What you observe is correct behavior, the Label is occupying the top portion, and, the area for the Button is actually the rest of the entire layout. This is because you have nothing to take the center area.

If we add an item to take the center area the Button will shrink and only take a minimal area at the bottom, i.e.

<toolkit:DockLayout>
    <Label toolkit:DockLayout.DockPosition="Top"
         Text="Welcome to .NET MAUI!"
         VerticalOptions="Center" 
         HorizontalOptions="Center" />

    <Button Text="+" MaximumWidthRequest="65" MaximumHeightRequest="65" Command="{Binding ShowPopupCommand, Mode=OneWay}" CornerRadius="50" toolkit:DockLayout.DockPosition="Bottom" />

    <Label Text="Center" />
</toolkit:DockLayout>