Xamarin Forms Shell

Screen Shot 2019-07-01 at 00.15.54

Finally, Xamarin team releases a set of features in Xamarin Forms that makes easier and quicker to get started with than before.

One of them, as you might have known is Shell template that has been there since pre-release version but now it’s has been released in stable version along with other new features introduced by Xamarin Forms 4.0.0, so no need to set the experimental flag in each platform main entry class anymore to activate this Shell feature.

For you who still have not heard about Shell yet, it is at least in this first major version, introduces an application foundation or bootstrap consists of Flyout and Tabs components that easily to be set up and provide many properties as modern navigation components.

In addition, Navigation Routing and Deep linking capability that never been this easier to be implemented thanks to Route and its query parameters and the last, Shell Page Search control. All those come with a bunch of overridable methods if you would like to have custom ones and all controls implemented fast renderers pattern.

In this article, I’m trying to introduce in brief these new set of fundamental features which required by most mobile apps.

Common Navigation User Experience

Flyout and Tabs are 2 top-level navigation components brought by Shell to help you accomplish navigation tickets in your project as shown in the following images below.

An application can have both Flyout and Tab bar or only one of them at a time. Besides its appearance and behaviour is greatly customizable through the properties and methods that the various Shell classes expose, it’s also possible to create a Shell custom renderer when more refined platform-specific customizations are required like other custom renderers. Followings are overridable methods provided by ShellRenderer class that can be customized and exported from each platform project.

iOS Android
SetElementSize
CreateFlyoutRenderer
CreateNavBarAppearanceTracker
CreatePageRendererTracker
CreateShellFlyoutContentRenderer
CreateShellItemRenderer
CreateShellItemTransition
CreateShellSearchResultsRenderer
CreateShellSectionRenderer
CreateTabBarAppearanceTracker
Dispose
OnCurrentItemChanged
OnElementPropertyChanged
OnElementSet
UpdateBackgroundColor
CreateFragmentForPage
CreateShellFlyoutContentRenderer
CreateShellFlyoutRenderer
CreateShellItemRenderer
CreateShellSectionRenderer
CreateTrackerForToolbar
CreateToolbarAppearanceTracker
CreateTabLayoutAppearanceTracker
CreateBottomNavViewAppearanceTracker
OnElementPropertyChanged
OnElementSet
SwitchFragment
Dispose

 

URI-based Navigation Scheme

 

Routes

Optimized navigation using Routes enables the user experience to navigate to a specific page without having to follow a set navigation hierarchy. Routes can be defined on FlyoutItem, Tab, and ShellContent objects in code behind or tag in XAML, through their Route properties. Given the sample visual hierarchy of app navigation:

To navigate to the ShellContent object for the ‘dogs’ route, the absolute route URI is //animals/domestic/dogs. Similarly, to navigate to the ShellContent object for the ‘about‘ route, the absolute route URI is //about.

Additional routes can be explicitly registered for any sort of pages that does not exist in the Shell visual hierarchy.

Navigation can be performed by either bypassing a valid route string/URI absolute route path or relative route (after registering the unique route name to the routing table) into GoToAsync() method of Current property of Shell object.

Or

 

 

Deep Linking

When a Shell app receives Deep Link or App Link, the URL can be easily processed by removing the schema and app domain. And then it leaves the rest path including the query parameters as an argument to navigate to the target page. This is also can be used as in-app navigation.

And the target ViewModel can capture the parameter by decorating the ViewModel property with QueryPropertyAttribute which specifies the name of the property that will receive the data, with the second argument specifying the query parameter id. Note that when you pass the query parameter, the value is being URL encoded so it needs to be decoded before use. Multiple QueryPropertyAttribute objects are also supported in a class.

Integrated Search Control with Shell Page

The integrated search functionality in the pages is also provided by Shell application to save development time. With a search box that can be added to the top of each page, the search query is handled by custom Search Handler that processes the underlying data source and returns the results back to the search box and displays them in a popup list.

That’s all the brief in introduction of Xamarin Forms Shell. See you in next article.

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/

Share this:

1 Comment

  1. Eric 08/12/2019
    Reply

    This looks great! Thanks for the write-up. But, if a user logs out using the Shell Flyout Item “Logout” … How does one replace the menu item with “Log In”?

Leave your comment

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