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

Søren Kurgan Jacobsen 5 Reputation points
2024-09-05T10:16:06.29+00:00

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.

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,960 questions

4 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Søren Kurgan Jacobsen 5 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)
    User's image

    1 person found this answer helpful.
    0 comments
  2. youzeliang 885 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:

    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"/>
  3. 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

  4. Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 48,666 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.

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.