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.