Embed Size (px)
Citation preview
Xamarin.FormsNavigation
Patterns
Dan Hermesdeveloper, author, consultant,
founder of Lexicon [email protected]
@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
@danhermes Available on Amazon
