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

Question

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.

Answer 1

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:

1. HorizontalOptions="Fill": This makes the button fill the available horizontal space of its parent container.
2. HorizontalTextAlignment="Start": This ensures that the content (text) of the button is left-justified.
3. Padding: This provides some space between the text and the button’s edges, so the text isn’t flush with the side.
4. 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"/>

Answer 2

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.

Answer 3

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)