Hello friends, Xamarin.Forms 4.0 Preview was made available for some time already, and it has several features which I’m excited about. These features where announced months ago, but the one which caught my attention was the Xamarin.Forms Shell. This feature is not yet available on the UWP platform as I’m writing this blog post today. But you can play with it and get acquainted with the awesome benefits it brings to you on iOS and Android. Do this by browsing and running the source code of the demo application on Github. Or reading the documentation available. I though of making this blog post earlier, but as all my subscribers might have noticed, I wasn’t active here for a few months now I’m glad I’m back ???…
What is the Xamarin.Forms Shell?
The Shell simply put is a brand-new way of structuring your entire application. This approach is very opinionated and comes with several goodies to facilitate the process of scaffolding your entire application, implementing navigation, search etc…
What Are The Awesome Features Brought To You With Xamarin.Forms Shell?
- The shell provides URI navigation from one page to another, which is easier and more efficient than the previous navigation. This liberates you from the lot of code you needed to write to implement navigation and managing the navigation stack.
- You simply specify a URL to the page to which you want to navigate and let Xamarin.Forms do its magic and take you to the appropriate page.
- You can intercept navigation before it completes, and perform what ever task you wish, what ever animation and personalise the navigation’s behavior as you wish.
- You can easily pass data from one page to another while navigating, by adding this data as a URL parameter, (very similar to calling a controller on ASP.Net Core).
- Real access to the navigation bar. As stated by David Ortinau in this video. The navigation bar will be modifiable and really customized by the developer. As compared to the TitleView which permits you to only add views to the navigation bar, with the Xamarin.Forms Shell, modifying core components of the navigation bar like the “Back Button” could be handled by the developer. This brings much more power into our hands ?.
- You can easily structure your application in one main file. Thanks to this, scaffolding your application into hierarchical visual elements is very easy. You just need to grasp the basics and smoothly define the whole structure of what your application will look like directly. In a very clean hierarchical fashion with the shell items, shell section and shell content. Before moving ahead, I think I should state what the shell items, shell section and shell content is all about. As stated in this documentation,
- The Shell Item represent one item present in the shell’s fly-out. This item is represented on the fly-out with a title, an icon and this representation on the fly-out can obviously be personalized with a data template. You can also have Menu Items present on the fly-out, but unlike shell items, menu items lack shell sections.
- Shell sections are children of Shell Items. There can be several shell sections in a shell item. These shell sections will be navigable via bottom tabs. Each has its title and Icons can be set for them too.
- Shell content, these are children of the shell section and each represent a content page of your application. A shell section can have several shell contents. Shell contents are represented by top navigation tabs. As you might have noticed while going through these, adding bottom and top tabbed navigation and separating the content for each section is easy. This along side the flyout navigation, permits you to worry less about structuring complex apps which you build.
- Searching through the content of your page is facilitated by the search handler, which provides you a smart way of handling search. As you can see in this demo source code, all you do is just implement an appropriate search handler for your page, Override the “OnQueryChanged” method for it to perform what ever you want with the searched keyword typed by the user, and add your custom search handler to your page.
- Consistent Look and feel for your app on each platform is possible by default in Xamarin.Forms. As stated by David Ortinau in this video, you will be able to either chose the Material theme or later, the Cupertino theme. And still have the option to have native look and feel for your applications. I wish “Fluent Design” by Microsoft could be available as a them. Fluent design is so beautiful according to me and should not be neglected.
Conclusion
The Xamarin.Forms Shell is a brand-new feature, and an awesome paradigm for building apps with Xamarin.Forms. Several other awesome features to improve developer productivity and ameliorations to Xamarin.Forms are available with the Shell. But these are the ones which I think will impact directly every Xamarin.Forms developer. I think the more Xamarin.Forms will permit building applications with less need to access Platform specific code, the better it becomes for developpers.
To have a detailed explanation and a deep insight of the features talked about in this blog post, source code is required. I could make a demo as I usually do for other blog posts, but here are links to resources which have already been made available to serve this purpose. I went through these resources to write this blog post so, why re-invent the wheel? ?
Gastropods and TailWindTraders apps on Github and the Microsoft documentation about Xamarin.Forms Shell.
Follow me on social media and stay updated
MShaker
NICOLAS KRIER
MShaker
Wayne Winter
Alfeo Salano