A Great Design Always Starts with Great Navigation
In the world of cross-platform mobile apps, navigation can be a challenge because different platforms favor different navigation paradigms. Android standardizes on the vertical-dot menu in the upper-right corner, but iOS devices tend to place menus at the bottom. Even though Xamarin helps, managing navigation across a range of devices can be overly unwieldy and complex.
Telerik UI for Xamarin offers a handy solution in the form of the SideDrawer control. Patterned after the "hamburger" menu featured in many Web sites and mobile apps, SideDrawer provides a simple and straightforward way for users to navigate your app. But SideDrawer takes the hamburger menu to new levels. For example, it lets you specify its position on the page (top, bottom, left, or right), and it features several built-in effects and transitions. SideDrawer is an excellent tool for creating a clear and consistent navigation experience. That's why it is featured prominently in Tagit.
Adding a SideDrawer control to Tagit requires little more than declaring the control in a page and wiring it up to the view-model. Here is a version, simplified for clarity, of the XAML that creates an instance of SideDrawer in Tagit:
<telerikPrimitives:RadSideDrawer DrawerTransitionDuration="0.2" DrawerLocation="Top" DrawerTransitionType="SlideInOnTop" x:Name="drawer" DrawerLength="300">
SideDrawer exposes two properties that we initialize using XAML's property-element syntax: DrawerContent and MainContent. The former defines a menu or "drawer" of navigational items, which for Tagit is a series of buttons linking to the various pages in the app. MainContent declares the content shown on the page. Rather than define DrawerContent items statically as shown above, Tagit fetches them from an ObservableCollection in the view-model. Among other things, this allows items in the menu to be localized based on the user's language-preference settings.
Tagit locates the menu at the top of the page by setting SideDrawer's DrawerLocation property to Top, and configures the menu to slide down by setting DrawerTransitionType to SlideInOnTop. Here's how it looks on all three platforms when the menu is pulled down:
Using just two controls from Telerik UI for Xamarin, we have implemented a helpful startup experience and provided a framework for navigating between pages. More importantly, we've eliminated a key reason users cite for uninstalling apps after running them for the first time. That's the perfect segue into Part 3, in which we will add to Tagit the ability for users to tag and caption images by placing calls to Microsoft's Computer Vision API.