Editing the NavigationPage back button size in xamarin forms

Issue

My aim is to change increase the size of the back arrow button that comes with the NavigationPage class. I have found out that we are able to change its color, but not it's size. Is it possible to do that in xamarin forms or can i atleast use a custom icon there that will suit my UI requirements.

 <Style TargetType="NavigationPage">
        <Setter Property="BarTextColor" Value="Red" />
        <Setter Property="BarBackgroundColor" Value="Black" />
      
  </Style>

Here i am able to set color for the "BarTextColor" but not it's size. Any help is appreciated.

Solution

NavigationPage back button is icon, so you can replace this icon using another bigger icon.

For Android platform, if your MainActivity type is FormsAppCompatActivity, you could custom a PageRenderer and change the Toolbar's NavigationIcon.

[assembly: ExportRenderer(typeof(ContentPage), typeof(NavigationPageRendererDroid))]
namespace FormsSample.Droid
{
public class NavigationPageRendererDroid : PageRenderer
{
    public NavigationPageRendererDroid(Context context) : base(context)
    {

    }
    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Page> e)
    {
        base.OnElementChanged(e);

        var context = (Activity)this.Context;
        var toolbar = context.FindViewById<AndroidX.AppCompat.Widget.Toolbar>(Droid.Resource.Id.toolbar);

        toolbar.NavigationIcon = AndroidX.Core.Content.ContextCompat.GetDrawable(context, Resource.Drawable.c1);
        
    }
}
 }

Please note: ToolBar in Android platform> Resource folder> Layout type is androidx.appcompat.widget.Toolbar

If your ToolBar is other type, you can take a look:

How to change navigation page back button in xamarin forms

Update:

I also reproduce the same problem as you, from I provide the thread , you can follow the last solution, custom a NavigationPageRenderer, override the OnPushAsync method to set the Toolbar's icon.

Firstly, create a class named CustomNavigationPage in the .NET Standard project, and this class inherits from NavigationPage to make our custom renderer applied to that class.

 public class CustomNavigationPage : NavigationPage
{
    public CustomNavigationPage(Page startupPage) : base(startupPage)
    {

    }
}

Secondly, in Android project, create class named NavigationPageRenderer, override the OnPushAsync method.

[assembly: ExportRenderer(typeof(CustomNavigationPage), typeof(NavigationPageRenderer))]
namespace FormsSample.Droid
{
public class NavigationPageRenderer : Xamarin.Forms.Platform.Android.AppCompat.NavigationPageRenderer
{     
    public Activity context;

    public NavigationPageRenderer(Context context) : base(context)
    {

    }
    protected override Task<bool> OnPushAsync(Page view, bool animated)
    {
        var retVal = base.OnPushAsync(view, animated);

       var context = (Activity)this.Context;
       var toolbar = context.FindViewById<AndroidX.AppCompat.Widget.Toolbar>(Droid.Resource.Id.toolbar);

        if (toolbar != null)
        {
            if (toolbar.NavigationIcon != null)
            {
                toolbar.NavigationIcon = AndroidX.Core.Content.ContextCompat.GetDrawable(context, Resource.Drawable.c1);
                toolbar.Title = "back";
            }
        }

        return retVal;
    }
}
}

Finally, in App.xaml.csfile, set the MainPage to NavigtaionPage,

  MainPage = new CustomNavigationPage(new simplecontrol.Page41());

Answered By - Cherry Bu - MSFT