Xamarin - SignalR - Presented at Xamarin meeting in Hilversum
Xamarin Navigation Patterns - Lexicon Systems - Dan …lexiconsystemsinc.com/ftp/Xamarin...
Transcript of Xamarin Navigation Patterns - Lexicon Systems - Dan …lexiconsystemsinc.com/ftp/Xamarin...
Xamarin Navigation Patterns
Dan Hermesdeveloper, author, consultant,
founder of Lexicon Systems
www.mobilecsharpcafe.com
@danhermes
for Your Florida Xamarin User Group
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?
• More than menus
• Nav controls are a means to an end
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
• 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
Xamarin.Forms Navigation
Navigation 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: 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
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
• Static Properties dictionary on the Application object to persist key/ value pairs to disk
• Static data instance (global) available to all pages
• Static properties on the Application object
Passing Data
• Demo: PropertiesPage1
• Demo:GlobalPage1, Global
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 NavigationPage
public class App : Application
{
public App()
{
MainPage = new NavigationPage(new DrilldownListViewByItem());
}
}
Drill-down Lists
• Demo: DrilldownListViewByItem
• Demo: DrilldownListViewByPage
• Demo: DrilldownTableView
Navigation Drawer
• Demo: 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
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
Android State Management
Android uses a class called Bundle, which is a dictionary that contains passed values, housed inside a class called Intent, which we use to call new activities
iOSState Management
iOS developers favor public properties on the destination view controller, but iOS supports passing parameters into the destination page’s constructor
Xamarin.Forms Navigation
Navigation 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
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 training
• My firm does Xamarin development
• We help make Xamarin projects work
Xamarin NavigationPatterns
Dan Hermesdeveloper, author, consultant,
founder of Lexicon Systems
Available on Amazon
My blog: www.mobilecsharpcafe.com
Twitter: @danhermes