DEV Community

Cover image for Align the Button Text in .NET MAUI
Victor Hugo Garcia
Victor Hugo Garcia

Posted on

5

Align the Button Text in .NET MAUI

Mobile app developers often encounter seemingly simple UI challenges that require platform-specific solutions. One such challenge is the proper alignment of button text across iOS and Android platforms in .NET MAUI applications. In this article, we'll explore how to achieve precise control over button text alignment in .NET MAUI by leveraging custom handlers.


Create a static class FormHandler

using Microsoft.Maui;
using System.Drawing;

#if IOS
using UIKit;
using Foundation;
#endif

#if ANDROID
using Microsoft.Maui.Controls.Compatibility.Platform.Android;
#endif

namespace DemoApp.Handlers;

public static class FormHandler
{
    public static void AlignButtonTextToLeftBottom()
    {
        Microsoft.Maui.Handlers.ButtonHandler.Mapper.AppendToMapping("ButtonTextAlignmentToLeftBottom", (handler, view) =>
       {
         if (view is Button b && b.ClassId=="ButtonTextAlignmentToLeftBottom")
         {
#if IOS
        handler.PlatformView.VerticalAlignment = UIControlContentVerticalAlignment.Bottom;
        handler.PlatformView.HorizontalAlignment = UIControlContentHorizontalAlignment.Left;
#elif ANDROID
        handler.PlatformView.Gravity = Android.Views.GravityFlags.Left | Android.Views.GravityFlags.Bottom;
#endif
        }
      });
    }
}
Enter fullscreen mode Exit fullscreen mode

In certain scenarios you may need to apply the alignment only to a single button on your UI, if that is the case you can use the ClassId property. This way the style will be applied for only those elements with the defined ClassId, otherwise, just remove the conditional from the code above. Thanks to our friend MarcAlx for sharing this idea.

<Button ClassId="ButtonTextAlignmentToLeftBottom"/>
Enter fullscreen mode Exit fullscreen mode

Register the handler

On the MauiProgram.cs file register the handler
FormHandler.AlignButtonTextToLeftBottom();

Conclusion

Custom handlers in .NET MAUI provide the flexibility needed to fine-tune platform-specific behaviors while maintaining a clean, cross-platform codebase. By implementing these solutions for button text alignment, we've not only solved an immediate visual challenge but also demonstrated the power and versatility of MAUI's handler architecture. Whether you're aiming for center-aligned text, left-justified content, or any specific style, I hope this guide will help you implement it seamlessly.

Follow me on Social:

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay