.net maui 8 - how to implement a button that fills its horizontal space, and has conents left justified?

Søren Kurgan Jacobsen 0

Id like to create a button that fills its horizontal space (width of parent) , and has its own contents left justified.
It seems this was what StartAndExpand did, but it is now deprecated.
I can ofcourse implement my own button using a Border/frame and TapGestureRecognizer, but id like to still use Pressed/Released/Clicked handlers.

Vicente Gerardo Guzmán Lucio 0 Reputation points

2024-09-05T15:40:13.4066667+00:00

Hi,

Do you have any drawings of how you want it to look? How you want it to look? This would help me understand what you need.

Regards!
Søren Kurgan Jacobsen 0 Reputation points

2024-09-05T15:47:13.6033333+00:00

something like this:
Søren Kurgan Jacobsen 0 Reputation points

2024-09-05T15:49:28.48+00:00

edit: image appeard in above post.. guess the forum is just a bit laggy ;)

4 answers

youzeliang 735 Reputation points

2024-09-05T16:02:31.4533333+00:00
In .NET MAUI 8, you can achieve this by using a HorizontalOptions="Fill" on the Button and setting HorizontalTextAlignment="Start" to align the button's text to the left. Here’s how you can implement it:

Explanation:

HorizontalOptions="Fill": This makes the button fill the available horizontal space of its parent container.

HorizontalTextAlignment="Start": This ensures that the content (text) of the button is left-justified.

Padding: This provides some space between the text and the button’s edges, so the text isn’t flush with the side.

Event Handlers: You can still use the Clicked, Pressed, and Released event handlers without needing to re-implement the button functionality using custom controls.

By following this approach, you get the desired behavior without needing to create a custom button using a Border or Frame.

<Button Text="My Left-Aligned Button" HorizontalOptions="Fill" HorizontalTextAlignment="Start" VerticalOptions="Center" Padding="10" Clicked="OnButtonClicked" Pressed="OnButtonPressed" Released="OnButtonReleased"/>
Please sign in to rate this answer.
Søren Kurgan Jacobsen 0 Reputation points

2024-09-05T16:49:06.68+00:00

Im using community toolkit markup, Im getting this:

Severity Code Description Project File Line Suppression State Details

Error (active) CS0117 'Button' does not contain a definition for 'HorizontalTextAlignment' PadelScore (net8.0-android34.0), PadelScore (net8.0-ios), PadelScore (net8.0-maccatalyst) C:\Users\kurga\source\repos\PadelScore\PadelScore\Util.cs 863

Søren Kurgan Jacobsen 0 Reputation points

2024-09-05T17:07:58.85+00:00

Button does not have HorizontalTextAlignment, at least not in CommunityToolkitMarkup

Søren Kurgan Jacobsen 0 Reputation points

2024-09-05T17:19:45.4766667+00:00

I just checked the suggested solution is not valid in XAML either not in Maui 8 nor in Maui 7
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.
Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Comments have been turned off. Learn more
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 43,926 Reputation points Microsoft Vendor

2024-09-06T06:20:58.69+00:00
Hello,

You can use a custom control to implement a button that can align text to the left and fill the entire screen. Please refer to the following code snippet:

public class FillButton:Button { public FillButton() { this.HandlerChanged += (s, e) => { // this.WidthRequest = DeviceDisplay.Current.MainDisplayInfo.Width / DeviceDisplay.Current.MainDisplayInfo.Density * 0.9; // this.Padding = new Thickness(0, 10, this.WidthRequest - this.FontSize * this.Text.Length, 10); }; } }

Best Regards,

Alec Liu.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Søren Kurgan Jacobsen 0 Reputation points

2024-09-06T06:34:20.6833333+00:00

its the best suggestion yet, but its not quite there look wise, the scaling of the contents, as well as the sizing/paddig/margin of the button itself needs a lot of cutom work to match the regular buttons...

Søren Kurgan Jacobsen 0 Reputation points

2024-09-06T09:52:41.8433333+00:00

also the calculations of length is based on fixed-width fonts?

Søren Kurgan Jacobsen 0 Reputation points

2024-09-06T13:37:04.0466667+00:00

well .. it works sort of , but its an very ugly (code) solution, it boggles the mind that a simple design like this should take so much garbage :

public class FillButton : Button { public FillButton() { this.HandlerChanged += (s, e) => { this.WidthRequest = (DeviceDisplay.Current.MainDisplayInfo.Width / DeviceDisplay.Current.MainDisplayInfo.Density) - Theme.MarginVar*2-Theme.PaddingVar*2; double w = TextMeasurementUtility.MeasureTextWidth(this.Text, this.FontFamily, this.FontSize ); this.Padding = new Thickness(Theme.PaddingVar, Theme.PaddingVar, this.WidthRequest - w-24-24-Theme.PaddingVar*2-Theme.MarginVar*2, Theme.PaddingVar); }; } } public static class TextMeasurementUtility { public static double MeasureTextWidth(string text, string fontFamily, double fontSize) { var typeface = SKTypeface.FromFamilyName(fontFamily); var paint = new SKPaint { Typeface = typeface, TextSize = (float)fontSize }; double width = paint.MeasureText(text); return width; } }

Søren Kurgan Jacobsen 0 Reputation points

2024-09-08T13:50:08.3966667+00:00

This makes the APP (on Android) footprint go fra 38MB to 51MB

So I found another workaround essentially implementing the look of the button with Border/Grid, and overlay a transparent Button to handle the interation.

I must admit Im shocked this simple design decision should be so difficult to implement, it seems whoever is in charge of these things at the Maui team, should at least talk to designers.

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 43,926 Reputation points Microsoft Vendor

2024-09-09T05:36:43.01+00:00

Thanks for your feedback.

Currently, Maui does not provide an API for text alignment in Buttons. It is recommended that you post this requirement to GitHub as a feature request to make the development team aware of it.

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 43,926 Reputation points Microsoft Vendor

2024-09-19T06:16:29.9533333+00:00

May I know whether your issue has been solved or not? If you're still having problems, please explain in detail what is still going wrong and what you need help with.
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.
Søren Kurgan Jacobsen 0 Reputation points

2024-09-19T06:30:25.58+00:00

Well I found a workaround , I still think that this should have an easier solution (if they want Maui to be a popular appdev platform)
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

.net maui 8 - how to implement a button that fills its horizontal space, and has conents left justified?

4 answers

Your answer