Xamarin Navigation Patterns

Xamarin.FormsNavigation

Patterns

Dan Hermesdeveloper, author, consultant,

founder of Lexicon Systemsdan@lexiconsystemsinc.comwww.mobilecsharpcafe.com

@danhermes

Xamarin Dev Days Boston

About me

• Software consultant since 1999• Code, write, and lead teams • Minecraft, tiki cocktails, digital art, and

parrot• 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 advise on and build apps for business.

Our Clients Include

What is Navigation?

• More than menus• Nav controls are a means to an end

What is Navigation?

What is Navigation?

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

• This may include menus, tappable icons, buttons, tabs, and list items, as well as many types of gesture-sensitive screens to display data, information, and options to the user

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

Hierarchical

Modal

Drill-down List

Navigation Drawer

Tabs

Springboard

Carousel

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

• Single, interruptive pop-up or screen

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

Modal

• 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: Alerts

Boolean 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

Hierarchical vs. Modal

• Hierarchical – stack-based down and back up• Modal – lateral interruption

Xamarin.Forms Navigation

• Hierarchical navigation using NavigationPage• Modal using NavigationPage, alerts, and ActionSheets• Drill-down lists using NavigationPage, ListView, and

TableView• Navigation drawer using MasterDetailPage• Tabs using TabbedPage• Springboard using images with gesture recognizers• Carousel using CarouselPage

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

• Use MasterDetailPage

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

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

It’s all on GitHub

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

Xamarin.FormsNavigation

PatternsDan Hermes

developer, author, consultant, founder of Lexicon Systems

dan@lexiconsystemsinc.comwww.mobilecsharpcafe.com

@danhermes Available on Amazon