iOS 11 Large Titles in Xamarin.Forms apps

In iOS 11 Apple introduce large tiles in their design language. You can read more about it on the Xamarin blog, https://blog.xamarin.com/go-large-ios-11/, this post will focus on how to implement that in Xamarin.Forms.



Note: There is a pull request for Xamarin Forms about iOS11 fixes created by Rui Marinho, so this will probably be in Xamarin.Forms out of the box soon, https://github.com/xamarin/Xamarin.Forms/pull/1238

The way to do it is to create a custom page renderer, but I don’t want it to affect every page, I want to control it on each page. While I don’t want to create a new base page I decided to use attached properties.

So the first thing I do is to create a property to attach.

public class LargeTitle
{
        public static readonly BindableProperty ShowLargeTitleProperty =
            BindableProperty.CreateAttached("ShowLargeTitle", typeof(bool), typeof(LargeTitle), false);
 
        public static bool GetShowLargeTitle(BindableObject view)
        {
            return (bool)view.GetValue(ShowLargeTitleProperty);
        }
 
        public static void SetShowLargeTitle(BindableObject view, bool value)
        {
            view.SetValue(ShowLargeTitleProperty, value);
        }
}

After that, I can use it in the XAML. I just have to import the namespace.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"            
             xmlns:ap="clr-namespace:Demo.Client"
             x:Class="Demo.Client.Views.MainView" Title="This is a large title"
             ap:LargeTitle.ShowLargeTitle="True">
    <ContentPage.Content>
        <Grid Padding="10">
            <Button Text="Get started" HorizontalOptions="Fill" VerticalOptions="Center" Command="{Binding GetStarted}" />
        </Grid>
    </ContentPage.Content>
</ContentPage

The last thing is to create the custom renderer for iOS. I will override the ViewWillAppear method to set the PreferLargeTitle method to the value of the ShowLargeTitle property that I set the value for in the XAML. And I will also override the ViewDidDisappear to restore the value to false, to ensure that it not will be large on pages I don’t want it to be large on.

public class CustomPageRenderer : PageRenderer
    {
        public override void ViewWillAppear(bool animated)
        {
            base.ViewWillAppear(animated);
 
            var showLargetTitle = LargeTitle.GetShowLargeTitle(Element);
 
            if (UIDevice.CurrentDevice.CheckSystemVersion(11, 0) && NavigationController != null && NavigationController.NavigationBar != null)
            {
                NavigationController.NavigationBar.PrefersLargeTitles = showLargetTitle; 
            }
        }
 
        public override void ViewDidDisappear(bool animated)
        {
            base.ViewDidDisappear(animated);
 
            if (UIDevice.CurrentDevice.CheckSystemVersion(11, 0) && NavigationController != null && NavigationController.NavigationBar != null)
            {
                NavigationController.NavigationBar.PrefersLargeTitles = false;
            }
        }
    }

One thought on “iOS 11 Large Titles in Xamarin.Forms apps

Leave a Reply

Your email address will not be published. Required fields are marked *