How could I change the Navigastion's page arrow in Xamarin Forms?

问题

I'm creating an app using xamarin Forms (multiplatform), I'm using a Navigation page, but I want to change the arrow ("<-") to text ("back")

Do you know how could i do it? Thanks

(I'm going to use it in an Android App, but I'm creating the app using Xamarin forms)

回答1:

You could use custom renderer to remove the navigation icon and set it with text. But, when you do that, you need to capture the click of the text and simulate the back event.

Create the interface:

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

    }
}

The implementation of Android:

  [assembly: ExportRenderer(typeof(CustomNavigationPage), 
typeof(NavigationPageRenderer_Droid))]
namespace NavigationPageDemo.Droid
{
public class NavigationPageRenderer_Droid : NavigationPageRenderer
{
    public Android.Support.V7.Widget.Toolbar toolbar;
    public Activity context;
    public NavigationPageRenderer_Droid(Context context) : base(context)
    {

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

        context = (Activity)Forms.Context;
        toolbar = context.FindViewById<Android.Support.V7.Widget.Toolbar>(Droid.Resource.Id.toolbar);

        if (toolbar != null)
        {
            //if (toolbar.NavigationIcon != null)
            //{
            //toolbar.NavigationIcon = Android.Support.V7.Content.Res.AppCompatResources.GetDrawable(context, Resource.Drawable.back);
            //toolbar.NavigationIcon = null;

            toolbar.NavigationIcon = null;
            toolbar.Title = "back";
            toolbar.SetOnClickListener(new OnClick());
        


            //}
        }

        return retVal;
    }

    protected override Task<bool> OnPopViewAsync(Page page, bool animated)
    {
        return base.OnPopViewAsync(page, animated);
    }

}
public class OnClick : Java.Lang.Object, IOnClickListener
{
    void IOnClickListener.OnClick(Android.Views.View v)
    {
        App.Current.MainPage.Navigation.PopAsync();
    }

  
}

In the custom renderer, use the OnClickListener to capture the click on text.

回答2:

when you are working with xamarin forms it is suggested make use of common components and make least use of custom renderer.

Now for your requirement you want to create custom navigation bar so here is how you can do it.

1. Create BaseContent Page
2. Create a Control Template inside your base page your can follow this link
3. Inside your control template using a grid view place your label with text binding (Back),also your can place a label in center to show title of page again u can make use of template binding which u would come to know when u go through the link
4. Now inherit your main page with your basecontentpage page
5. add your control template inside your main page
6. turn off your navigation bar of your main page

and you are done, this would give u more power to add more things like image or toolbar in your navbar

also to dynamically handle your back button u can check the count from navigationstack if its 0 u can show Humburger Icon or if its more than 0 u can show your label using IsVisible True/False

来源：https://stackoverflow.com/questions/64798384/how-could-i-change-the-navigastions-page-arrow-in-xamarin-forms