Enable and control iOS 11 Large Titles in Xamarin.Forms

With iOS 11, Apple introduced a bunch of new design elements to its mobile platform. One of them are larger titles, that sit in the Navigation Bar and can be scrolled away when more space is needed. Large Titles can be enabled with a few lines of code in iOS. To use them with Xamarin.Forms, we need to extend the framework on our own, as the new titles are not officially supported yet.

iOS 11 Large Titles Screenshots

 

UPDATE: With Xamarin.Forms 2.5, a platform-specific for Large Titles has been added. You can call NavigationPage.On<iOS>().SetPrefersLargeTitles(true) to activate them globally. Then simply use On<iOS>().SetLargeTitleDisplay(LargeTitleDisplayMode.Never) on single pages to opt-out. Read this post for further details.

Enable Large Titles

To add support for Large Titles in Xamarin.Forms all we need to do is overriding the existing NavigationRenderer and enable Large Titles application-wide. Simply add this Renderer to your iOS project and they will be shown everywhere.

 

Control when to display Large Titles

Being in control of when to display the new titles or not is a nice feature as they totally do not make sense on every page and this gives us more flexibility on when and where to use them.

Unfortunately, Xamarin.Forms is struggling with the new Large Titles and bottom offsets sometimes, especially when combined with a TabbedPage. So we need a way to switch them off manually for each page.

Extend Content Page

For this, create a new type of ContentPage in your Xamarin.Forms project, that is aware of Large Titles and offers a property to switch them on and off manually.

Every page, that should be able to switch off large titles (we enable them by default in the Custom Renderer above), must now be type of our newly created page. This has to be declared in XAML…

… and the code-behind as well.

Add a Custom Renderer

All we need now is a Custom Renderer for the new page, that respects the HasLargeTitle property and sets the in iOS 11 introduced LargeTitleDisplayMode property accordingly. Create a new Custom Renderer in the iOS project and expose it.

Et voilà! With 12 lines of code, Xamarin.Forms becomes capable of using the new Large Titles and looks nice and modern for Apple’s new version of iOS.

One Comment on “Enable and control iOS 11 Large Titles in Xamarin.Forms

  1. Pingback: Dew Drop - October 16, 2017 (#2582) - Morning Dew

Leave a Reply