dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
21.95k stars 1.7k forks source link

MaximumWidthRequest should not include Margin #21917

Open janne-hmp opened 4 months ago

janne-hmp commented 4 months ago

Description

MaximumWidthRequest accounts for margins. If you have a button with at least 250 horizontal free space around it, and which has HorizontalOptions="Fill" MaximumWidthRequest="150" Margin="50,0,50,0", the button will be 50 wide, not 150 wide. This makes margins and MaximumWidthRequest difficult to use, since it works differently to how WidthRequest used to work with Margin in Xamarin, and also how WidthRequest works in MAUI.

If you want a button that is at most 150 wide with 50 wide margins around it, you have to use MaximumWidthRequest="250" Margin="50,0,50,0", which makes Margin look more like a Padding. This is also inconsistent with MAUI's WidthRequest="150" Margin="50,0,50,0", which gives a button of 150 width.

MaximumWidthRequest and MaximumHeightRequest should not account for margins in order to accomplish behavior similar to WidthRequest and Margin in both MAUI and Xamarin. This would make porting of resizable buttons etc. from Xamarin to MAUI much easier, and make WidthRequest and MaximumWidthRequest have consistent margin behavior within MAUI.

Steps to Reproduce

  1. Create a new default MAUI project.
  2. Add the following to the "Click me" button: MaximumWidthRequest="150" Margin="50,0,50,0" (and HorizontalOptions="Fill" if it does not already have it)
  3. Start the app on on a device, where the page is at least 150 wide (probably all devices)
  4. The button is 50 wide, not 150.

Link to public reproduction project repository

No response

Version with bug

9.0.0-preview.2.10293

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android

Affected platform versions

iOS 17.3.1, Android 14

Did you find any workaround?

Have to use fixed width buttons; modify MaximumWidthRequest based on margins, or not using Margin with MaximumWidthRequest.

Relevant log output

No response

Zhanglirong-Winnie commented 4 months ago

Verified this issue with Visual Studio 17.10.0 Preview 3(8.0.20&9.0.0-preview.2.10293). Can repro on iOS and android platforms. image