Introduction

This is the first post in a series covering Common UI Patterns in Xamarin.Forms. This post will walk through creating one of the most common UI Navigation Patterns, namely the Springboard (sometimes called a Launchpad or Dashboard).

Springboard Primer

So what is a Springboard?  Springboards are characterized by a landing page of menu options (normally buttons with text) that act as a jumping off point into the application.  Typically they are in a grid format, however, the don’t have to. Some options can be proportionately larger to convey greater importance.  Here are some classic examples of Springboard layouts:

What’s to like about springboards

• Springboards are OS agnostic.  If you think about it all of the major mobile platforms use Springboards in one way or another to launch apps.  Windows Phone probably takes the customization aspects further than the others, but when you boil it down, it’s still a Springboard.  Have a look at the images below and you’ll see what I mean.

• Springboards have a high level of user acceptance because we have grown familiar with them and they don’t involve any hidden offscreen elements like you would find with a slide out menu.
• Springboards are probably best when displaying a flat information hierarchy where there are several “parts” to the application that don’t necessarily relate to each other.

What’s not to like about Springboards

Springboards aren’t for everyone though, here are some reasons why they aren’t the cool kids on the block

•  They are a “navigation first” metaphor.  Meaning, the first thing you see is not content, but rather the user is thrown into the navigation system straight off the bat.
• To a certain degree, Springboards imply an understanding of the information hierarchy that the developers / designers have used.  If this isn’t very logical then it will be difficult for users to know which button they should click on.

Implementation a Springboard in Xamarin.Forms

There are many ways we could implement a Springboard layout in Xamarin Forms. Some simple, some pretty complex. Obviously what you choose is very dependent on the complexity of your springboard and how complex your solution / app is going to be. Because we are early in this series, lets start simple, very simple. Later on, in another post, we can always come back and beef up the implementation with custom renderers and a nicer architectural model.

Before we jump in to code, let’s discuss conceptually how we are going to layout the page. The page we are trying to achieve looks like this:

Looking at the page structure, we want a header, an area for the buttons and a footer. It would be possible to implement with a vertical StackLayout, however, because stacklayouts just grow as you add children, it would be difficult to ensure the page lays out correctly.

So let’s use a grid with 3 rows instead for the main page structure.The first row is the header, the second row is for the buttons and the third row is for the footer. Nice and easy.  Now for the “guts” of the springboard… the buttons.   If we think about springboards, it’s normally just a Grid of buttons, So again let’s use the Grid view to contain our buttons and plonk that in the second row.  Conceptually, its like this:

From there it’s just styling, handling taps and navigation. Enough waffle, let’s create this thing.

Creating the project

The first thing we are going to do is create a brand new Xamarin.Forms Portable Solution.

You will now have a basic Xamarin.Forms Portable solution consisting of three projects.

Springboard – This is the actual Xamarin.Forms project which is where all the shared non-platform specific code lives. This is where we will be doing most of our work

Springboard.Droid – Android platform specific project. We will only be using this for image resource files.

Springboard.iOS – iOS platform specific project. We will only be using this for image resource files

For more information on Xamarin.Forms project structures have a look here at the Xamarin.Forms documentation

Creating the basic page layout

We need to add some images to use for our dashboard solution.  Any images will do, but the location you put the images is important for Xamarin.Forms projects.  In a Xamarin.Forms project we add the images into the platform specific projects:

iOS – Place images in the Resources folder with Build Action: BundleResource . Retina versions of the image should also be supplied – twice the resolution with an “@2x” suffix on the filename before the file extension.

 

Android – Place images in the Resources/drawable directory with Build Action: AndroidResource . High- and low-DPI versions of an image can also be supplied (in appropriately named Resourcessubdirectories such as drawable-ldpi , drawable-hdpi , and drawable-xhdpi ).

 

Windows Phone – Place images in the application’s root directory with Build Action: Content .

More information on using images can be found on the Xamarin site here.

Now we have our project and image resources in place we will want to create our main springboard page under the shared solution “Springboard”. Right click on the shared project, select new and add a new Forms XAML Page called MainSpringboard.xaml

Here is the XAML for the basic page layout.

The key points of interest in the xaml are:

• The page layout itself is just a simple 3 row grid containing the header, the body and the footer.  Notice the outer grid has a RowSpacing of 0, this is This is because by default grids put a bit of spacing between rows and columns, but in our case we don’t want that – we want the rows to butt against each other. Also note that the second row is set to fill the available space by using a Height of “*” . The top and bottom rows we have specified a size, but we could also have used a height of “AUTO” if we wanted to do something like space it out for a logo.
• We use boxviews to put some colors behind the grids
• We have just thrown a label into the header but more than likely you might use an app logo
• We have added a 2×2 grid into the middle row to serve as the button grid. Obviously depending on your needs you could use as may rows and columns as you want.
• Inside the button grid we have added images controls for the buttons.

Before we can see any of this we have to modify our main app class to actually call our new page. So let’s modify the App class to call our new page.

public App()
{
  // The root page of your application
  MainPage = new MainSwitchboard();
}

Run the application and we’ve got the basic layout looking pretty good.

Awesome!

But we need to put labels under each of those buttons. Unfortunately, we can’t use the standard Xamarin.Forms button control because it only allows putting the text to the right of the image.  A way we could get around this is to use a vertical StackLayout containing an image and a label underneath and replicate this into each button cell.

Whilst that doesn’t seem like too much overhead, but it’s still a bunch of boilerplate code scattered throughout your page. Also the big problem is you would be replicating style and layout in each button and therefore if you wanted to change the font or something you would have to change it for every button.

There’s got to be a better way, and of course there is.

Creating a Reusable Button Content View

We can create a Content View with a Image and Label which will essentially make a composite user control for us.

• In Xamarin Studio you can just create a new “Forms ContentView Xaml” file in the solution.
• In Visual Studio there isn’t this template so you need to create a new “Forms Xaml Page” and then change it from being a ContentPage to a ContentView. You need to do this inside the Xaml file, but also in the code behind of the page.

So Create a new ContentView Xaml control called SpringboardButton.xaml.  Because we want to be able to set the Image and the Label text for each instance of the button, we need to add some properties for these in the code behind and bind them to the Xaml form.

Xaml File

Code behind

Using our new Button Control

Back in the MainSpringboard page, let’s replace our images with instances of our new SpringboardButton.

In order to reference the new SwitchboardButton control we need to include the namespace into the XAML namespaces at the top of the file. Modify the namespaces to include:

xmlns:controls=”clr-namespace:Switchboard;assembly=Switchboard”

Now we can replace our images with the controls, like this:

Run the application and we should be in pretty good shape. And of course as a bonus if we wanted to change the font on all those buttons we could easily do it in just one place.

You will notice however, that we can’t interact with our buttons. We need to add the ability to respond to taps.

Handling Taps on the Buttons

Some controls in Xamarin.Forms have Tapped (or clicked) events, but images and labels don’t, and our new composite content view control certainly does not. Fortunately Xamarin.Forms has a concept called GestureRecognizers which you can add to any view to enable handling of tapped events. You can read more about them here.

In our simple situation we will add a gesture recognizer to each of our buttons which will call a corresponding tapped event in the code behind page.  So in the MainSwitchboard.xaml we expand each button to have a GestureRecognizer that calls a method in the code behind.

Now let’s make those taps do something.

Adding Navigation

Talking about navigation is a whole post in itself, but we will cover just enough to get this Springboard working.

Xamarin.Forms has a navigation framework baked in. It has methods to push and pop pages into the navigation stack. However, in order to do this you need to first create that navigation stack. Fortunately all we have to do is surround our first page with a NavigationPage and we are magically given this navigation context.

So we modify the App Main Page to add a navigation context

MainPage = new NavigationPage(new MainSwitchboard());

We need to add page(s) that we want to navigate to. In my case I created 4 simple pages.

Now we do the modification of the code behind on the MainSpringboard to navigate to those pages, like this:

If we run the application now, we are pretty much there. Our pages should navigate and we have a functioning switchboard.

Summary

So there you have it, a simple implementation of a Springboard page. We covered:

• Creating the basic page layout
• Creating a reusable control for the buttons
• Adding gesture recognizers to the controls
• Simple navigation

The code for this sample is on Github at https://github.com/kphillpotts/XamarinForms-NavigationPatterns

Thanks for reading and if you have any questions, comments, or improvements please let me know.