How to change the navigation page back icon?

In Xamarin Forms, there is no way to change the back icon in PCL. Actually, there is a property in NavigationPage class, called TitleIcon and also a function called SetTitleIcon. But they just add a Icon below the title like this.

resource

But that is not what we want, if we want like this, we need create PageRenderer for iOS and Android.

In iOS, we need to add a UIBarButtonItem into LeftBarButtonItem. But the interesting thing is, we cannot access the NavigationController.TopViewController.NavigationItem in OnElementChanged function, which we usually do the renderer things. After some research I find that we can do this in ViewWillAppear function.

In Android, I used the Android 6.0 SDK to build the App. The navigation bar in Xamarin.Android is the ActionBar, so we need few things to do here. First, we need to hide the App icon, then we need to replace the Up caret with custom icon, last we need to make title alignment in center. The default alignment is left, so we need to set customer view to ActionBar.

Here is the codes.

Also, I have added some logic for hiding the back icon in some pages. As sometimes we navigation to some pages, like after login page, we don’t want to customer to go back. It works well in iOS, but not Android. In Android, I can hide the back icon in screen, but if user press the physical button, this page still can go back. The better solution for this, is designing a good navigation stack, like after use login, we can clear the navigation stack or put this page as the root of navigation stack.

If you want to the whole dome solution, please check here

https://github.com/jessejiang0214/ChangeBackIconInXF

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s