xamarin navigation patterns

Xamarin Navigation Patterns

Dan Hermesdeveloper, author, consultant,

founder of Lexicon Systems

dan@lexiconsystemsinc.comwww.mobilecsharpcafe.com

@danhermes

About me• Software consultant since 1999• Code, write, and lead teams •Minecraft, tiki cocktails, my parrot, and digital art• I love Xamarin

Xamarin Book

Now Available on Amazon

“This weighty book gives clear guidance that will help you build quality apps, starting with architectural considerations, and then jumping into practical code strategies.” - Bryan Costanich, Vice President, Xamarin

“Dan Hermes’ extraordinary book is the most intelligent work on cross-platform mobile development I’ve seen.” – Jesse Liberty, Director of New Technology Development, Falafel Software, Xamarin Certified Developer / Xamarin MVP

• Founded in 1999• Develop web and mobile

apps• Microsoft technology stack

We build apps for business

Our Clients Include

What is Navigation?

What is Navigation?

Gets our user from place to place

What is Navigation?

Provides the UI skeleton of our entire app

What is Navigation?

Gives users what they need to get around an app quickly, moving from screen to screen with confidence and ease

Navigation Patterns

•Hierarchical •Modal •Drill-down list •Navigation drawer•Tabs•Springboard•Carousel

Hierarchical

Modal

Drill-down List

Navigation Drawer

Tabs

Springboard

Carousel

Xamarin.Forms NavigationNavigation Pattern Xamarin.Forms Class

Hierarchical NavigationPage

Modal NavigationPage, alerts, and ActionSheets

Drill-down lists NavigationPage, ListView, and TableView

Navigation drawer MasterDetailPage

Tabs TabbedPage

Springboard images with gesture recognizers

Carousel CarouselPage

Most Common Navigation Patterns

• Hierarchical• Modal

Hierarchical

• stack-based pattern • allows users to move down into a stack of screens • pop back out again, one screen at a time• drill-down or breadcrumb

Hierarchical: Up and Back Buttons

Up

Back

Up

Hierarchical Navigation using NavigationPage• Instantiate a NavigationPage and pass in a ContentPage• In the child page:• Set Title and Icon Properties• Navigation.PushAsync (new MyPage)• Navigation.PopAsync();

NavigationPage

public class App : Application {{ public App() {

MainPage = new NavigationPage(new HomePage()); }}

NavigationPage

• Demo: HomePage

NavigationPage:Remove and Insert• Navigation.RemovePage(page);• Navigation.InsertPageBefore(insertPage, beforePage);

Back Button

public override void OnBackButtonPressed(){ // your code here base.OnBackButtonPressed ();}

Modal

Modal Types

1. Box: floats on top of the main page and is usually an alert, dialog box, or menu that the user can respond to or cancel

2. Screen: replaces the main page entirely, interrupting the hierarchical navigation stack

Modals in Xamarin.Forms

• NavigationPage for full-page modals • Alerts for user notifications • Action sheets for pop-up menus

Full Screen Modal using Push and Pop• Navigation.PushModalAsync( new nextPage());

• Navigation.PopModalAsync();

Full Screen Modal using Push and Pop• Demo: ModalPage

Modal: AlertsBoolean answer = await DisplayAlert(" Start", "Are you ready to begin?", "Yes", "No");

Modal: Action Sheets

Button button = new Button { Text = "Show ActionSheet" };button.Clicked += async (sender, e) =>{ String action = await DisplayActionSheet("Options", "Cancel", null, "Here", "There", "Everywhere"); label.Text = "Action is :" + action;};

Modal: Action Sheets

Modal: Action Sheets

• Demo: PopupMenu

State Management

• Maintain the illusion of continuity during navigation• Sharing of data between screens• Pass variables directly into an instantiated ContentPage

Passing Data

Pass data values directly into a page’s constructor

Other ways to pass data between pages:• Static data instance (global) available to all pages• Static properties on the Application object• Static Properties dictionary to persist key/ value pairs to disk

• Application.Current.Properties["id"] = 12345;

Passing Data

Pass data values directly into a page’s constructor • Demo: DrilldownListViewByItem

Other ways:• Demo:GlobalPage1, Global• Demo: PropertiesPage1

Drill-down Lists

• by Item• by Page

• Grouped

Drill-down Lists

• by Item – use a ListView• by Page – use a ListView

• Grouped – use a TableView

Use PushAsync when user clicks a row

Drill-down Lists:NavigationPage

• Wrap list page in a NavigationPagepublic class App : Application{ public App() { MainPage = new NavigationPage(new DrilldownListViewByItem ()); }}

Drill-down Lists

• Demo: DrilldownListViewByItem• Demo: DrilldownListViewByPage• Demo: DrilldownTableView

Navigation Drawer

• Demo: MasterDetailPage• App.cs• NavigationDrawer.cs• HomePage.cs

Tabs using TabbedPage

• Static • Data-bound

• Demos

Springboard: Images with Gesture Recognizers• Roll your own Springboard (demo)

Carousel using CarouselPage

this.Children.Add(new FirstPage()); this.Children.Add(new SecondPage()); this.Children.Add(new ThirdPage());

demo

Xamarin.Forms NavigationNavigation Pattern Xamarin.Forms Class

Hierarchical NavigationPage

Modal NavigationPage, alerts, and ActionSheets

Drill-down lists NavigationPage, ListView, and TableView

Navigation drawer MasterDetailPage

Tabs TabbedPage

Springboard images with gesture recognizers

Carousel CarouselPage

Xamarin.Android Navigation• Hierarchical navigation using Toolbar or ActionBar• Modal using DialogFragment, AlertDialog, and PopupMenu• Drill-down list using ListView• Navigation drawer using DrawerLayout• Tabs using ActionBar

Xamarin.iOSNavigation• Hierarchical navigation using UINavigationController, the push segue,

or the PushViewController• Modal using the modal segue, the PresentViewController, and

UIAlertAcontroller• Drill-down list using UINavigationController• Navigation drawer using components• Tabs using UITabBarController

It’s all on GitHub

https://github.com/danhermes/xamarin-book-examples

Jesse Liberty’s Video Courses: Pluralsight.com

• Creating Custom Controls in Xamarin.Forms• Beginning Automated Testing of Xamarin Applications• Beginning Mobile Development with Xamarin• Xamarin.Forms and Data• XAML for Xamarin.Forms

https://www.pluralsight.com/authors/jesse-liberty

Need Something Xamarin-flavored?

• I do Xamarin consultations• I do Xamarin coaching and training• My firm does Xamarin development• We help make Xamarin projects work

Xamarin Navigation Patterns

Dan Hermesdeveloper, author, consultant,

founder of Lexicon Systems

dan@lexiconsystemsinc.com

Available on Amazon

My blog: www.mobilecsharpcafe.com

Twitter: @danhermes