Xamarin.Forms 4 In Action: Rapid Prototyping

Hello as part of the #XamarinUIJuly I want to share with you a few tips that can help you to quickly create beautiful prototypes.

As a Google services fan I will inspire in the Google Play Music app to create our Xamarin.Forms prototype.

As part of the Xamarin.Forms 4 we get the brand new an stable version of Xamarin.Forms Shell a new and powerful way to create cross platform applications, and starting on Visual Studio 2019 / Visual Studio for Mac 8.0 we have a Forms Shell template allowing devs to have a boilerplate code to start working with it and you can create it by following the next steps:

You'll noticed that the solution is almost the same as a normal Xamarin.Forms app but we have now the "AppShell.xaml" and "AppShell.xaml.cs" files those files contains the main logic and structure for our Xamarin.Forms Shell App.

Now lets take a look to the XAML code I divide it in 4 sections for our prototype

1. Shell style definition
2. Flyout Header
3. Flyout Items and Item Template
4. Menu Items and Menu Item Template

the XAML code for our prototype is the next:

as you can noticed our app will contains a custom UI color definition for the Shell UI elements, a custom flayout header view, 1 Flyout item that contains 3 tabs(2 single page tabs and 1 with 3 subtabs) with a custom menu item template And also we have a definitions for our menu items take a look that even if we set a default menu item template we're able to define a custom template for an specific item.

IMPORTAN NOTE: you'll see that im using ContentTemplate to define the Content pages templates this a best practice to allow Shell to create the instances once the view is required and not all views at boot up.

Shell really speed up our App UI structure creation time so with that simple XAML code we're able to have a complete App structure so now lets continue with another good feature(currently experimental but almost prepared to be stable in the next Xamarin.Forms version) from Xamarin.Forms 4 and it is called CollectionView.

In our App we will use 2 types of CollectionViews

1. Regular vertical sort elements(same as ListView)
2. Grid Layout with 2 columns

in the next XAML you can find the config for both CollectionView.

Is very easy to implement CollectionView which is a really awesome feature it will attack the performance issues while we use ListView.

Now we will use a good feature of Xamarin.Forms Shell which is the SearchHandler this feature is helping us to easily implement a search behavior for our apps and is very easy to implement we need to have:

1. Custom class that implements SearchHandler
2. In our Page XAML add a tag to an instance of our custom SearchHandler

In the next code you can find a very simple implementation of a custom search handler.

And with those new features you're able to create a very well-looking POC or prototype as follow without requiring any platform specific code.

iOS

Android




GITHUB COMPLETE SOURCE CODE: https://github.com/AlejandroRuiz/PlayMusicXamarinClone

Hope that you can enjoy creating prototypes for your future projects one of the advantages of using Xamarin.Forms is that you can easily turn a prototype to a functional application at any time, also please follow me on Github for future updates of the Clone app, also if you have any. doubt or question please drop me a line at alejandro@alejandroruizvarela.com