Creating a button in MAUI that is horizontally End aligned, certain width, and honors container boundaries

[janne-hmp]

I'm upgrading my app from Xamarin to MAUI. There seems to be a change in the behavior of WidthRequest that the control is always of the requested size regardless of the container boundaries. However, I need to make a button that is horizontally aligned End, is 200 wide, no smaller or bigger, but honors container boundaries, if there is less space.

In Xamarin, I could just use HorizontalOptions="End" WidthRequest="200". In MAUI, I apparently cannot use WidthRequest, because it does not honor the container boundaries. What is the way to do the above in MAUI? If I use HorizontalOptions="Fill" MaximumWidthRequest="200" the control is not horizontally End aligned. If I don't use Fill, the button is of as small size as it can get, rather than 200.

[gautambjain]

Try this: HorizontalOptions="EndAndExpand" and remove WidthRequest="200". Also keep MaximumWidthRequest="200".

[janne-hmp]

Unfortunately, it does not work. It functions just the same as End. Only Fill fills the available space. Should this work according to XAML specification? If so, should I report it as a bug?

[gautambjain]

Please share the xaml code

[janne-hmp]

See the answer below. By the way, the documentation also says that *AndExpand layout options work with StackLayout only.

[janne-hmp]

Here's the default .NET MAUI 9.0 Preview 2 project with a grid with a button:

<?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="Net9MauiTest.MainPage">

    <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        <ScrollView>
            <VerticalStackLayout
                Padding="30,0"
                Spacing="25">
                <Image
                    Source="dotnet_bot.png"
                    HeightRequest="185"
                    Aspect="AspectFit"
                    SemanticProperties.Description="dot net bot in a race car number eight" />

                <Label
                    Text="Hello, World!"
                    Style="{StaticResource Headline}"
                    SemanticProperties.HeadingLevel="Level1" />

                <Label
                    Text="Welcome to &#10;.NET Multi-platform App UI"
                    Style="{StaticResource SubHeadline}"
                    SemanticProperties.HeadingLevel="Level2"
                    SemanticProperties.Description="Welcome to dot net Multi platform App U I" />

                <Button
                    x:Name="CounterBtn"
                    Text="Click me" 
                    SemanticProperties.Hint="Counts the number of times you click"
                    Clicked="OnCounterClicked"
                    HorizontalOptions="Fill" />
            </VerticalStackLayout>
        </ScrollView>
        <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
            <Button Text="Hello" MaximumWidthRequest="200" HorizontalOptions="EndAndExpand" VerticalOptions="Start" />
        </Grid>
    </Grid>
</ContentPage>

The result is: