Editing the NavigationPage back button size in xamarin forms - user-interface

Question

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.

Answer 1

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());