How to change the size of MAUI Shell back button? For improved use when using tablets with gloves

Question

I am working on a team developing a MAUI app for engineers. Many of our users have suggested enlarging the back button for better use with gloves.

Image shows me setting IconOverride in AppShell.xaml with no effect to back button icon or its size

In my AppShell.xaml I have attempted to use Shell.BackButtonBehaviour and IconOverride to hopefully use and size a custom button but have had no luck. Code shown below

<Shell
x:Class="Veridian.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Veridian.Pages">

<Shell.BackButtonBehavior>
    <BackButtonBehavior>
        <BackButtonBehavior.IconOverride>
            <FontImageSource
               FontFamily="FAS"
               Glyph="{StaticResource IconCamera}"
               Size="50"
               Color="#273743" />
        </BackButtonBehavior.IconOverride>
    </BackButtonBehavior>
</Shell.BackButtonBehavior>

I only managed to change the icon when setting Shell.BackButtonBehaviour and IconOverride in a specific ContentPage .xaml file. The icon changed to my font awesome icon but the size did not seem adjustable.

I attemped to use above to code to set a new back button icon for whole application. I thought doing this would allow me to have more control over the size of the back button.

This resulted in no change to the back button when placed in AppShell.xaml BUT it did change the back button when applied to a specific ContentPage. The Icon changed but the size did not.

Could anyone help with this?

Android is our main platform for use, so just achieving this on Android would be amazing!

Thank you in advance Tom :)

tonyedwardspz · Accepted Answer · 2024-12-18 17:01:57Z

0

Altering the back button with the shell proved to be a real pain, however I managed to get a replacement image at a larger size. Essentially you need to completely replace the back button UI. Use the following as a guide to get you started.

Create a custom control via a content view called BackButtonControl with both XAML and a .cs codebehind.

BackButtonControl.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Shared_Library.Controls.BackButtonControl">

    <HorizontalStackLayout VerticalOptions="Fill"
                           HorizontalOptions="StartAndExpand">
        <Grid HorizontalOptions="FillAndExpand"
              ColumnDefinitions="2*,*,2*">
            <Grid.Margin>
                <OnPlatform x:TypeArguments="Thickness">
                    <On Platform="iOS" Value="5,10,0,10" />
                    <On Platform="Android" Value="-20,15,0,15" />
                </OnPlatform>
            </Grid.Margin>

            <ImageButton Grid.Column="0"
                         x:Name="BackButton"
                         Source="back_button.png"
                         Command="{Binding BackButtonPressedCommand}"
                         Aspect="AspectFit"
                         HorizontalOptions="Start">
            </ImageButton>
        </Grid>
    </HorizontalStackLayout>
</ContentView>

BackButtonControl.xaml.cs

namespace Shared_Library.Controls;

public partial class BackButtonControl : ContentView
{
    public BackButtonControl()
    {
        InitializeComponent();
        BindingContext = this;
    }

    private Command _backButtonPressedCommand;
    public Command BackButtonPressedCommand => _backButtonPressedCommand ??= new Command(async () => await Shell.Current.GoToAsync("..", true));
}

Then within the pages you want to replace the standard back button:

<Shell.BackButtonBehavior>
    <BackButtonBehavior IsVisible="False" />
</Shell.BackButtonBehavior>

<Shell.TitleView>
    <sc:BlankBackButtonControl  />
</Shell.TitleView>

I also needed a blank back button control (no image, no command), for use on pages where a back button isn't needed.

I can't remember why I didn't put this directly in the AppShell.xaml, but pretty sure I tried and it didn't work for some reason. Probably becuase the new back button appeared on pages I didn't need it.

Hope this helps.

answered Dec 18, 2024 at 17:01

tonyedwardspz

1,9502 gold badges25 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tom Roberts Dec 20, 2024 at 11:36

Thank you very much for this! I was thinking a custom nav bar or something would be the only way but this is much simpler, will post results once I have time to implement :)

liyu Dec 25, 2024 at 5:09

Have you solved the problem ?@TomRoberts

Tom Roberts Jan 6 at 14:19

Sorry for delayed reply! After implementing this it has been working well! It does seem like Android has some restriction on how big the nav bar can get (doesn't happen on windows) but using this has allowed for a much larger clickable area for the back button. Thank you :)

tonyedwardspz Jan 8 at 11:51

You're welcome. I'm glad it helped.

Leon Lu · Accepted Answer · 2025-01-01 03:18:31Z

Many of our users have suggested enlarging the back button for better use with gloves. Android is our main platform for use, so just achieving this on Android would be amazing!

You can do this by ShellRenderer and override the CreateToolbarAppearanceTracke method.

Firstly, you can create a CustomShellRenderer in your yourproject.Platforms.Android folder.

Then you can get Toolbar for android platform and get the ImageButton, set button.SetScaleType(ImageButton.ScaleType.FitCenter);.

using Android.Content;
using Microsoft.Maui.Controls.Handlers.Compatibility;
using Microsoft.Maui.Controls.Platform.Compatibility;
using ImageButton= Android.Widget.ImageButton;
 
namespace MauiApp10.Platforms.Android
{
    public class CustomShellRenderer : ShellRenderer
    {
        public CustomShellRenderer(Context context) : base(context)
        {
        }
        protected override IShellToolbarAppearanceTracker CreateToolbarAppearanceTracker()
        {
            return new CustomToolbarAppearanceTracker();
        }       
    }
    public class CustomToolbarAppearanceTracker : IShellToolbarAppearanceTracker
    {
        public void Dispose()
        {
        }
        public void ResetAppearance(AndroidX.AppCompat.Widget.Toolbar toolbar, IShellToolbarTracker toolbarTracker)
        {
        }
        public void SetAppearance(AndroidX.AppCompat.Widget.Toolbar toolbar, IShellToolbarTracker toolbarTracker, ShellAppearance appearance)
        {
 
            for (int i = 0; i < toolbar.ChildCount; i++)
            {
                var view = toolbar.GetChildAt(i);
 
                if (view is ImageButton backButton1)
                {
                    //Change the size of the back button
                    var button = backButton1;                   
                    button.SetScaleType(ImageButton.ScaleType.FitCenter);
                    break;
                }
            }
 
        }
    }
}

In the end, you need register this CustomShellRenderer in the MauiProgram.cs like following code.

   public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
            .ConfigureMauiHandlers((handlers) =>
             {
#if ANDROID
                 handlers.AddHandler(typeof(AppShell), typeof(MauiApp10.Platforms.Android.CustomShellRenderer));
 
#endif
             });

Collectives™ on Stack Overflow

How to change the size of MAUI Shell back button? For improved use when using tablets with gloves

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related