How to align the message to center in snackbar in MAUI

Question

Hi,

I am using a snackbar in MAUI with a message. Currently, the message in the snackbar is left aligned but I want to show a message aligned in the center of the snackbar. Also I do not want to have an action button in the snackbar. Is there a way to show the message in the center?
Please find the code I am using to show a snackbar

CancellationTokenSource cancellationTokenSource = new CancellationTokenSource();
SnackbarOptions snackbarOptions = new SnackbarOptions
{
	BackgroundColor = Current.RequestedTheme == AppTheme.Light
		? (Color)(Current.Resources["BlueDark"])
		: (Color)(Current.Resources["DShuttleGray"]),
};

ISnackbar snackbar = Snackbar.Make(message, null, "",
	(secondsToShow == 0 ? new TimeSpan(0, 0, 4) : new TimeSpan(0, 0, secondsToShow)),
snackbarOptions);

await snackbar.Show(cancellationTokenSource.Token);

Answer 1

Hello,

The SnackBar in MAUI does not currently have an API for changing the text align API.

For this requirement, you can implement it through a custom popup. Popup is also a control provided by CommunityToolkit, so you don't need to install other packages.

You could refer to the following sample. This example shows how to implement a custom bottom pop-up window and center the text content.

<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup xmlns="
http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="
http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp2.NewPage1"
              xmlns:toolkit="
http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
<VerticalStackLayout WidthRequest="300" HorizontalOptions="Center" Margin="15">
<Label Margin="10"
            x:Name="message"
            VerticalOptions="CenterAndExpand" 
            HorizontalOptions="CenterAndExpand" />
</VerticalStackLayout>
</toolkit:Popup>

public partial class NewPage1 : Popup
{
	public NewPage1(string test)
	{
		this.VerticalOptions = Microsoft.Maui.Primitives.LayoutAlignment.End;

 
        InitializeComponent();
        message.Text = test;
    }
 
}

// invoke this popup page
var pop = new NewPage1("test");
this.ShowPopup(pop);

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.