[BUG] Creating an End-aligned button that honors container boundaries / Button with EndAndExpand does not expand to cover available space

janne-hmp commented 5 months ago

Description

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. If I use HorizontalOptions="Fill" MaximumWidthRequest="200" the control is not horizontally End aligned. If I use either HorizontalOptions="End" MaximumWidthRequest="200" or HorizontalOptions="EndAndExpand" MaximumWidthRequest="200", the button is of as small size as it can get, rather than 200.

I believe that HorizontalOptions="EndAndExpand" MaximumWidthRequest="200"should expand the button to cover the available space, making the button 200 wide when there is enough space. But it works just the same as HorizontalOptions="End" MaximumWidthRequest="200" If EndAndExpand is supposed to work only for StackLayouts, then how is the Xamarin resizing behavior of HorizontalOptions="End" WidthRequest="200" supposed to be done in MAUI?

Steps to Reproduce

Create a default .NET MAUI 9.0 project in Visual Studio 17.10.0 Preview 2.0

Add a grid on the top of the existing UI components and a button with HorizontalOptions="EndAndExpand" MaximumWidthRequest="200" inside the grid. The code is then:

<?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" />
    </Grid>
</Grid>
</ContentPage>

The Hello button is still just as wide as Hello text, rather than 200. It also seems to cover vertically the whole screen for some reason, rather than being size needed for Hello.

Link to public reproduction project repository

No response

Version with bug

9.0.0-preview.1.9973

Is this a regression from previous behavior?

Yes, this used to work in Xamarin.Forms

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 14, didn't test the other platforms

Did you find any workaround?

No, it seems impossible to make buttons that have the same layout behavior as HorizontalOptions="End" WidthRequest="200" had in Xamarin.

Relevant log output

No response

janne-hmp commented 5 months ago

Need additional testing

janne-hmp commented 5 months ago

I read the specifications a bit more, and it seems that EndAndExpand may be limited to StackLayouts only. So how is then the Xamarin behavior of HorizontalOptions="End" WidthRequest="200" supposed to be done in MAUI?

ninachen03 commented 4 months ago

Verified this issue with Visual Studio 17.10.0 Preview 3 ( 8.0.20). 17.10.0 Preview 4(9.0.0-preview.3.10457) I can repro it.

dotnet / maui