Daniel Hindrikes

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.

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;
            }
        }
    }