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

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 :)

Solution

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.