Customize DisplayAlert in .NET MAUI

Question

I have this method in my ViewModel

private async Task ShowAlert(string title, string message)
{
    await Application.Current.MainPage.DisplayAlert(title, message, "OK");
}

I'm trying to make the message bold, is there a way to do that in .NET MAUI?

Tried to use the Community.Toolkit.Maui and it's not just for me, still trying to find a solution without using any packages.

Answer 1

I faced similar problem lately, due to issues with modifying the color of the DisplayAlert button, I decided to create a custom AlertDialog Service using platform-specific code. I have implemented only for android platform : android. You could search about iOS'implementation : iOS

public interface ICustomAlertDialogService
{
    Task<bool> ShowAlertAsync(string title, string message, string negativeButton, string positiveButton);

    Task<bool> ShowAlertAsync(string title, string message, string positiveButton);
}

Android

public class CustomAlertDialogService : ICustomAlertDialogService
{
    public CustomAlertDialogService() 
    {

    }

    public Task<bool> ShowAlertAsync(string title, string message, string positiveButton)
    {
        return ShowAlertInternalAsync(title, message, positiveButton, null);
    }

    public Task<bool> ShowAlertAsync(string title, string message, string negativeButton, string positiveButton)
    {
        return ShowAlertInternalAsync(title, message, positiveButton, negativeButton);
    }

    private Task<bool> ShowAlertInternalAsync(string title, string message, string positiveButton, string? negativeButton)
    {
        var tcs = new TaskCompletionSource<bool>(TaskCreationOptions.RunContinuationsAsynchronously);

        MainThread.InvokeOnMainThreadAsync(() =>
        {
            var currentActivity = Platform.CurrentActivity;
            if (currentActivity == null)
            {
                tcs.SetResult(false);
                return;
            }

            var alertDialogBuilder = new AlertDialog.Builder(currentActivity);
            alertDialogBuilder.SetTitle(title);
            alertDialogBuilder.SetMessage(message);

            AlertDialog dialog = null;

            alertDialogBuilder.SetPositiveButton(positiveButton, (sender, args) =>
            {
                tcs.SetResult(true);
                dialog?.Dismiss();
            });

            if (negativeButton != null)
            {
                alertDialogBuilder.SetNegativeButton(negativeButton, (sender, args) =>
                {
                    tcs.SetResult(false);
                    dialog?.Dismiss();
                });
            }

            dialog = alertDialogBuilder.Create();
            dialog.Show();

            SetButtonTextColor(dialog);

            dialog.SetOnDismissListener(new OnDismissListener(() =>
            {
                tcs.TrySetResult(false);
                dialog.Dispose();
            }));
        });

        return tcs.Task;
    }

    private void SetButtonTextColor(AlertDialog dialog)
    {
        var isDarkTheme = (Platform.CurrentActivity.Resources.Configuration.UiMode & UiMode.NightMask) == UiMode.NightYes;
        var buttonTextColor = isDarkTheme ? global::Android.Graphics.Color.White : global::Android.Graphics.Color.Black;

        dialog.GetButton((int)DialogButtonType.Positive).SetTextColor(buttonTextColor);

        var negativeButton = dialog.GetButton((int)DialogButtonType.Negative);
        if (negativeButton != null)
        {
            negativeButton.SetTextColor(buttonTextColor);
        }
    }
}

public class OnDismissListener : Java.Lang.Object, IDialogInterfaceOnDismissListener
{
    private readonly Action _onDismiss;

    public OnDismissListener(Action onDismiss)
    {
        _onDismiss = onDismiss;
    }

    public void OnDismiss(IDialogInterface dialog)
    {
        _onDismiss?.Invoke();
        dialog.Dispose();
    }
}

you could add something like this :

  // Create a TextView for the message
   var messageView = new TextView(currentActivity);
   messageView.Text = message;
   messageView.SetTypeface(null, TypefaceStyle.Bold); // Set the Typeface to Bold       
   var alertDialogBuilder = new AlertDialog.Builder(currentActivity);
   alertDialogBuilder.SetTitle(title);

   // Use the custom TextView for the message
   alertDialogBuilder.SetView(messageView);