Deep Dive into Xamarin.Forms Shell @ Xamarin Summit Brasil 2019
•Download as PPTX, PDF•
0 likes•106 views
Xamarin.Forms Shell provides a container for applications that handles fundamental UI features like navigation. It includes a flyout menu, bottom tab bar, URI-based navigation, and search functionality. Developers can add Shell to their projects by setting it as the MainPage. The Shell hierarchy includes FlyoutItems containing tabs of ShellContent pages. Features like navigation, search handling, and styling can be customized.
Deep Dive into Xamarin.Forms Shell @ Xamarin Summit Brasil 2019
- 1. ALEJANDRO RUIZ Microsoft MVP Software Engineer @ ArcTouch Deep Dive into Xamarin.Forms Shell
- 2. Xamarin.Forms Shell Is a container for applications, that provides fundamental UI features that most applications require, leaving you to focus on the application's core workload. Shell applications are provided with the following functionality: • A single place to describe the visual hierarchy of an application. • A common navigation user experience. • A URI-based navigation scheme that permits navigation to any page in the application. • An integrated search handler.
- 3. Top Level of Navigation: Flyout Bottom Tab Bar Top Tab Bar Xamarin.Forms Shell - Structure
- 4. Adding Forms Shell to Your Project Set your shell into your Application’s MainPage property: MainPage = new YourShell();
- 5. Xamarin.Forms Shell Hierarchy • FlyoutItem • Contains the main definition of a set of tabs that can be displayed on the flyout menu. • Tab • Hold the definition of one or more ShellContent(pages) elements. • ShellContent • Represent the minimun shell items content holder it can be a view or a template
- 7. Flyout The flyout is the root menu for a Shell application, and is accessible through an icon or by swiping from the side of the screen. The flyout consists of an optional header, flyout items, and optional menu items.
- 8. Flyout - Structure • Behavior • Header & HeaderTemplate • Menu items
- 9. • FlyoutHeaderBehavior • CollapseOnScroll • Fixed • Scroll • Custom Menu items Template
- 10. Tabs When the navigation pattern for an application includes a flyout, the next level of navigation in the application is the bottom tab bar. In addition, when the flyout is closed the bottom tab bar can be considered to be the top level of navigation.
- 12. Adding Navigation 1) URI Based Navigation 2) Register your pages: Routing.RegisterRoute("myawesomepage", typeof(HomePage)); 3) Navigate to page and query string params: Shell.Current.GoToAsync("//main/about/details", true);
- 13. Adding Navigation 4) Intercept Params 5) Handle Navigation Actions:
- 14. Adding Navigation 6) Back button behavior
- 15. Search Handler Xamarin.Forms Shell includes integrated search functionality that's provided by the SearchHandler class. Search capability can be added to a page by setting the Shell.SearchHandler attached property to a sub- classed SearchHandler object.
- 16. Styling and customization Using an standard definition shell allows you to use styles across his elements setting up the behavior on the root shell root, flyout item, tab or shellContent level
- 17. Custom Renderers In case that you need to extended your shell definition you can create a custom renderer to override or implemented new feature to your shell by using the ShellRenderer class.
- 19. OBRIGADO! Questions? Alejandro Ruiz Microsoft MVP: Developer Technologies Deep Dive into Xamarin.Forms Shell DEMO: https://github.com/AlejandroRuiz/XamarinSummitBrasil https://alejandroruizvarela.blogspot.mx @alejandroruizva