The new Xamarin.Forms shell is designed to improve the productivity of mobile developers. Shell content makes it much easier to organize and navigate application content, giving developers more time to focus on application content. This article explores the basics of Xamarin.Forms Shell and how to get started.
Mobile app development should be fun. But the realities of enterprise application development often put mobile developers on tight deadlines. Freelance developers who create mobile apps often try to get the most out of nights and weekends. Any framework, tool or technique allowing mobile developers to increase their productivity is therefore welcome.
Mobile developers often look for shortcuts – a good starting point is definitely worth it. Wouldn’t it be nice if we could get some standard functionality and be able to focus on the functionality of the apps? Most applications follow a content organization and navigation structure. Wouldn’t it be nice to have something beautiful, ready to use, that works seamlessly across platforms? What application developers want is a burrito shell – and then be able to populate it with the content of the applications.
Xamarin.Forms allows .NET developers to create applications for iOS, Android and much more easily. Xamarin.Forms allows you to create truly native applications from a single shared code base – applications with a nice native user interface .
Xamarin.Forms 4.0 was released earlier this year and has significantly improved the user interface game with the introduction of the Shell shell. Just like Xamarin.Forms synthesizes user interface elements in an easy-to-use API, Shell eliminates application architecture and navigation complexity.
Shell provides a container for your application. This container includes a MasterDetailPage a TabbedPage and a NavigationPage or a combination of both. Shell also provides rudimentary search functionality. And to top it all, URI-based navigation has been integrated. It’s almost like the shell is the tortilla from our burrito app and the pages are delicious toppings! Now that the metaphor of burrito is anchored to the ground, let’s dive in and create a Xamarin.Forms application based on Shell!
Our demo application
First, here is the app that we will be creating today.
It’s like a Seattle tour guide – except for a demo app. He has a MasterDetailPage with 2 children – one is a TabbedPage the other is a normal old ContentPage . This TabbedPage has 2 tabs. Each page of these tabs has a ListView and pressing the ListView elements allows you to navigate in the application. You can retrieve all the demo code for this application on GitHub, clone it and follow it! Cool? Cool.
Shell basics
To create an application in a Shell application, you need a Shell page. And it looks like this:
Then, in the constructor of your Application page:
app publique () { InitializeComponent (); MainPage = new ShellPage (); }
The Xamarin.Forms Shell documentation contains a ton of detailed information on booting a Shell application. Now let’s make sure the shell contains something!
Shell components
As indicated, there are 3 main components of a Shell application: the MasterDetailPage (or flyout), the TabbedPage . and the NavigationPage . You can use them all together or select them as you wish. Let’s start with the MasterDetailPage .
The Flyout
Looking at the above application, there are two “detail” pages for the MasterDetailPage . One is a TabbedPage and the other is a ContentPage . So let’s see how you would add this: ContentPage :
It’s quite simple. In the element we have inserted an element . And in this context, reference to your personalized page.
Now let’s take a minute to stop and take a look at some shortcuts when creating the shell. There are other elements such as who could fit into this hierarchy. But the Xamarin.Forms team designed it for the XAML analyzer to put them on if you omit them. Xamarin.Forms already knows that should be in . So we can leave that out and let the forms do the work. You can dive deep into the mechanics of Flyout in the documents or find out more about what Forms is still doing for you.
The Tabs
The next step is to add the TabbedPage . Or Tabs as Shell likes to call them. Since it is also part of MasterDetailPage it will also go to a FlyoutItem . And then tell Xamarin.Forms to turn this FlyoutItem into tabs, you put elements in it .
The syntax is as follows:
We are going somewhere. A MasterDetailPage ending a TabbedPage with two tabs and a ContentPage .
What if you don’t want ContentPage .
What if you don’t want MasterDetailPage at all? Leave the FlyoutItem elements FlyoutItem . Only put in elements. And if you want, you can also wrap all of these in an element . And here’s the best thing: by default, all the pages at the bottom are already in a NavigationPage .
You know what that means, it’s time to go boating!
Navigation
Shell gives us something called URI-based routing. This means that you assign a channel identifier to a page, then call Shell.Current.GoToAsync specifying the identifier of this page. And .. you pass arguments to the new page as query string parameters.
So, in the case of the bus stop page: as it is not referenced anywhere in the XAML of the page we have to define a route for that. . We do this in the constructor of our Shell page:
public ShellPage () { InitializeComponent (); Routing.RegisterRoute ("arrêt de bus", typeof (BusStopPage)); }
This will allow Shell to access the BusStopPage . And we will do it in the ListView.ItemSelected de BusRoutePage :
async void Handle_ItemSelected (expéditeur d'objet, Arguments SelectedItemChangedEventArgs) { var selectedRoute = e.SelectedItem as BusRouteInfo; wait Shell.Current.GoToAsync ($ "arrêt du bus = route {selectedRoute.RouteNumber}"); }
Shell will then reassemble and access the BusStopPage , indicating the bus route number of the selected element. How do you get to the one passed as a parameter? You can use a class level attribute. It specifies the name of the incoming parameter with a property of the class to be filled in.
So here’s what it looks like:
[QueryProperty("RouteNumber", "route")] classe partielle publique BusStopPage: ContentPage
The route parameter will fill the RouteNumber property. There is much much more navigation in Shell. The documents are there to help you.
summary
That’s it, Xamarin.Forms Shell sums up some of the complexities of creating applications in an intuitive API. The element is the basis of everything. To this you add to create a MasterDetailPage . In these elements, you add elements to create a TabbedPage or your custom pages. In the elements add your custom pages. And you can navigate anywhere using Shell’s all-new URI-based navigation.
Shell can do much more, including research and a multitude of visual styles.