navigation in xamarin.forms
TRANSCRIPT
![Page 1: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/1.jpg)
Navigation In Xamarin.Forms
Kym Phillpotts [email protected]
@kphillpotts
code & slides: https://github.com/kphillpotts/XFNavigation
![Page 2: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/2.jpg)
Topics
Xamarin.Forms Overview • Where does Xamarin.Forms fit in? • What does the XF framework give you?
Navigation in Xamarin.Forms • Push, Pop and Modal • Lists Navigation • Tabbed Pages • Master / Detail Pages • Carousel Pages
Additional Resources • Design Resources • Xamarin Resources
![Page 3: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/3.jpg)
Xamarin.Forms Overview
![Page 4: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/4.jpg)
Traditional Xamarin Approach
Android (Platform Specific C#)
iOS (Platform Specific C#)
Windows (Platform Specific C#)
Shared C# Backend (Typically PCL or Shared libraries)
![Page 5: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/5.jpg)
Shared C# Backend (Typically PCL or Shared libraries)
Shared User Interface Code Xamarin Forms - C# or XAML
Xamarin Forms Approach
![Page 6: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/6.jpg)
How Xamarin.Forms Renders Controls
Button button = new Button { Text = "Click Me!" };
UI uses a Xamarin.Forms Button
Platform Renderer takes view and turns it into platform-specific control
Android.Widget.Button
UIButton
System.Windows.Button
![Page 7: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/7.jpg)
What’s in the box? • Pages
Content Page Master Detail NavigationPage TabbedPage CarouselPage
![Page 8: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/8.jpg)
What’s in the box? • Pages • Layouts
StackLayout AbsoluteLayout RelativeLayout GridLayout ContentView ScrollView Frame
![Page 9: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/9.jpg)
What’s in the box? • Pages • Layouts • Controls
ActivityIndicator
Entry
BoxView
Image
Button
Label
DatePicker
ListView
Editor
Map
OpenGLView
Stepper
Picker
TableView
ProgressBar
TimePicker
SearchBar
WebView
Slider
EntryCell
ImageCell SwitchCell TextCell ViewCell
![Page 10: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/10.jpg)
Topics
Xamarin.Forms Overview • Where does Xamarin.Forms fit in? • What does the XF framework give you?
Navigation in Xamarin.Forms • NavigationPage • Lists Navigation • Tabbed Pages • Carousel Pages • Master / Detail Pages
Additional Resources • Design Resources • Xamarin Resources
![Page 11: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/11.jpg)
NavigationPage
![Page 12: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/12.jpg)
Navigation Page
Basic Concepts • Push pages onto the stack • Pop pages off the stack
Hierarchical Navigation • PushAsync() • PopAsync() • PopToRootAsync()
Modal Navigation • PushModalAsync() • PopModalAsync()
![Page 13: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/13.jpg)
Implementing NavigationPage – Wrap it! !!public App() !{ ! MainPage = new MyPage(); !} !!
![Page 14: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/14.jpg)
Implementing NavigationPage – Wrap it! !!public App() !{ ! // MainPage = new MyPage(); ! MainPage = new NavigationPage(new MyPage()); !} !!
![Page 15: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/15.jpg)
Hierarchical Navigation
Navigate Forward (Push) Navigation.PushAsync(new SecondPage());!!
Navigate Back One Page (Pop) Navigation.PopAsync();!
!Navigate Back To First Page (PopToRoot) Navigation.PopToRoot();!
!
![Page 16: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/16.jpg)
Modal Navigation
Display A Modal Page Navigation.PushModalAsync(new MyNewModalPage());!!
Remove A Modal Page Navigation.PopModalAsync();!
!
![Page 17: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/17.jpg)
GUIDELINES – DO NOT USE SLIDE
![Page 18: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/18.jpg)
Other NavigationPage Goodness ■ Have access to the NavigationStack
- InsertPage - RemovePage
■ BackButtonPressed Events
■ Customizing the navigation bar - var navPage = new NavigationPage(new MyPage()); - navPage.BarBackgroundColor = Color.Green; - navPage.BarTextColor = Color.White;
■ NavigationBar Icons - NavigationPage.SetTitleIcon(this, “your-logo-here.png");
![Page 19: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/19.jpg)
ListView Navigation
![Page 20: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/20.jpg)
Using ListViews for Navigation
■ Make sure you wrap your ListView page inside a NavigationPage
■ Setup your listview data and bindings (as per normal)
■ Respond to the ItemTapped Event (as per normal)
■ Use the NavigationPage methods to Push to new pages
![Page 21: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/21.jpg)
GUIDELINES – DO NOT USE SLIDE
![Page 22: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/22.jpg)
Other ListView goodness you should check out
■ Pull To Refresh
■ Action Buttons
■ Search Bar
■ Circle Images – Plugin
■ Grouped Lists – James Montemagno - http://bit.ly/GroupedListView
![Page 23: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/23.jpg)
TabbedPage
![Page 24: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/24.jpg)
TabbedPage
Basic Concepts • Creates a tabbed interface for a collection of
child pages
Platform Differences • On iOS Tabs at bottom with icon • On Android tabs at the top without icon • On Windows Phone uses Pivot control
![Page 25: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/25.jpg)
![Page 26: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/26.jpg)
Implementing TabbedPage
Adding pages to the TabbedPage public class TabsPage : TabbedPage!{ !public TabsPage () !{ !
this.Children.Add (new Page1 () { Title = “Page1", Icon = “Page1.png" }); !this.Children.Add (new Page2 () { Title = “Page2",Icon = “Page2.png" }); !this.Children.Add (new Page3 () { Title = “Page3", Icon = “Page3.png" }); !this.Children.Add (new Page4 () { Title = “Page4", Icon = “Page4.png" }); !
} !} !!
![Page 27: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/27.jpg)
Navigation inside a TabbedPage
It’s easy, just wrap your children in a NavigationPage Children.Add ( new NavigationPage (new ChildPage()) !
{ !Title = “PageName", !Icon = “PageIcon.png" !
}); !!
![Page 28: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/28.jpg)
![Page 29: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/29.jpg)
CarouselPage
![Page 30: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/30.jpg)
![Page 31: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/31.jpg)
Implementing CarouselPage
Adding pages to the CarouselPage public class FlippyPage : TabbedPage!{ !public FlippyPage () !{ !
Children.Add(new BucketItemDetail(buckteItem)); ! Children.Add(new BucketItemDetail(buckteItem)); ! Children.Add(new BucketItemDetail(buckteItem)); !} !
} !!
![Page 32: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/32.jpg)
![Page 33: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/33.jpg)
MasterDetailPage
![Page 34: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/34.jpg)
MasterDetailPage
Basic Concepts • A container page that manages the
presentation of two other pages.
• A master page, which typically shows a list or menu of options
• A detail page, which typically shows the detail of the selection
![Page 35: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/35.jpg)
Implementing the MasterDetailPage
public class SimpleMasterDetailContainer : MasterDetailPage { public SimpleMasterDetailContainer() { Master = new SimpleMasterPage(); Detail = new NavigationPage(new SimpleDetailPage());
} }
![Page 36: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/36.jpg)
Things to Remember with MasterDetailPage
You have to provide a Title in the Master Page, or things go bang! (optionally you can add an Icon to display – think hamburger icon) You have to handle the navigation between the master and the details pages. Do this by setting Detail property For Tablets you can use MasterBehavior property • Default • PopOver • SplitOnHorizontal • SplitOnVertical
![Page 37: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/37.jpg)
![Page 38: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/38.jpg)
Topics
Xamarin.Forms Overview • Where does Xamarin.Forms fit in? • What does the XF framework give you?
Navigation in Xamarin.Forms • Push, Pop and Modal • Lists Navigation • Tabbed Pages • Master / Detail Pages • Carousel Pages
Additional Resources • Design Resources • Xamarin Resources
![Page 39: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/39.jpg)
Design Resources
• Xamarin.Forms in Anger – Replicating designs in Xamarin.Formshttps://www.syntaxismyui.com/xamarin-forms-in-anger
• Dribbble – Awesome ideas by bizarrely talented artists http://dribbble.com
• UI-Patterns – They why & why nots of UI http://ui-patterns.com
![Page 40: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/40.jpg)
Xamarin.Forms Dev Resources • Xamarin Community blog – Aggregates the best Xamarin blogs
http://planet.xamarin.com/
• Official Xamarin.Forms Website – Links to all the official doco & samples http://xamarin.com/forms
• Xamarin-Forms-Labs – Community controls and code https://github.com/XLabs/Xamarin-Forms-Labs
• Xamarin Plugins – Awesome nuget plugins that work with Xamarin.Forms • https://github.com/xamarin/plugins
• Free Charles Petzold Xamarin Forms eBook http://bit.ly/PetzoldBook
![Page 41: Navigation in Xamarin.Forms](https://reader031.vdocuments.us/reader031/viewer/2022021503/5878bb361a28ab724c8b7741/html5/thumbnails/41.jpg)
THANKS (and questions)
Kym Phillpotts [email protected]
@kphillpotts
code & slides: https://github.com/kphillpotts/XFNavigation