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. 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.


Robin-Manuel Thiel

At daylight, Robin-Manuel talks about new IT trends and development. But at night he turns into a tinker and developer which sometimes leads to insufficient sleep. He loves cool technologies, cross-platform and everything with a power-plug or IP address.

1 Comment

Dew Drop - October 16, 2017 (#2582) - Morning Dew · October 16, 2017 at 13:19

[…] Enable and control iOS 11 Large Titles in Xamarin.Forms (Robin-Manuel Thiel) […]

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.