Xamarin Forms - Noob to master - Week 1
- 1. Charlin Agramonte char0394@gmail.com Twitter: @chard003 FB: chard003 https://xamgirl.com/ Rendy Del Rosario rendy.delrosario@gmail.com Twitter: @rdelrosario FB: RendyDelRosario
- 2. CLASS PROGRAM Week 1 - Introduction to Xamarin (SHARE PROJECTS/PCL) - Introduction to Xamarin Forms (Let’s start our first project) - Navigation, Pages, Controls, Layouts Week 2 - UI in Xamarin forms (XAML/Code Behind) - Resources and styles - Model- View -View model - Data binding Week 3 - Content View - ListView - Dependency Services Week 4 - Effects - Renderers Week 5 - API integrations Week 6 - Introduction to MVVM Frameworks in Xamarin Forms - Dependency Injection (Plugins/Services) - Prism ( Navigation, Service Container, Messaging)
- 3. XAMARIN FORMS NOOB TO MASTER By Rendy Del Rosario and Charlin Agramonte Week 1
- 4. Objectives - Understand what is Xamarin - Understand what is Xamarin Forms - Navigation/Pages/Controls/Layouts - UI in Xamarin Forms (XAML/Code Behind)
- 6. Traditional approach Traditionally, apps have separate code bases written in their native language, are built using native tools, and utilize platform-specific features
- 7. What is Xamarin? Xamarin is an app-development platform that lets you build apps for many operating systems from a single, shared code base
- 9. What is Xamarin Forms?
- 10. Xamarin Forms Xamarin.Forms is a cross- platform UI framework to create mobile apps for Android /iOS/Windows.
- 12. GROUP EXERCISE Creating a Xamarin Forms application
- 13. Xamarin Forms Application Application class provides lifecycle methods which can be used to manage persistence and refresh your data
- 14. Creating the application UI Application UI is defined in terms of pages and views.
- 15. Pages Page is an abstract class used to define a single screen of content.
- 16. Views View is the base class for all visual controls, most standard controls are present
- 17. Views
- 18. Visual adjustment Views utilize properties to adjust visual appearance and behavior
- 19. Providing Behavior Controls use events to provide interaction behaviours.
- 20. Organizing Content Rather than specifying positions with coordinates (pixels, dips, etc.), you use layout containers to control how views are positioned relative to each other CENTERED
- 21. Layout containers Organize child elements based on specific rules.
- 22. StackLayout StackLayout places children top-to-bottom (default) or left-to- right based on Orientation property setting
- 23. AbsoluteLayout AbsoluteLayout places children in absolute requested positions based on anchors and bounds
- 24. RelativeLayout RelativeLayout allows you to position child views relative to two other views, or to the panel itself using constraint-based rules
- 25. ScrollView ScrollView scrolls a single piece of content (which is normally a layout container) Wrap a ScrollView around a single element to add scrolling
- 26. Grid Grid is a layout panel used to create rows and columns of views, children identify specific column, row and span
- 27. How to create a Grid? - Defining the Grid - Add Childrens
- 30. Grid - Add Childrens
- 31. LayoutOptions ALL VIEWS IN XAMARIN FORMS HAVE THESE 2 PROPERTIES
- 32. Alignment
- 33. Expansion
- 34. Properties Padding: Padding adds distance between the inside edges of a layout container and its children (only available in layouts) Spacing: The Spacing property of StackLayout and controls the distance between child elements Margin: Add distance for a view
- 35. GROUP EXERCISE Creating a basic UI
- 36. INDIVIDUAL EXERCISE Creating a Text color procesador TIME: 25 MINUTES
- 37. Using Platform Features Device.OpenUri DisplayAlert Device.StartTimer
- 38. Navigation - PushAsync - PopAsync - PushModalAsync - PopModalAsync - RemovePage - PopToRootAsync
- 39. HOMEWORK PRACTICE Creating Navigation Options to Our Color procesador
- 40. HOMEWORK PRACTICE Colorful Text editor
- 41. References - Getting Start https://developer.xamarin.com/guides/xamarin-forms/getting-started/ - Layouts https://developer.xamarin.com/guides/xamarin-forms/user-interface/lay outs/
- 42. By Rendy Del Rosario and Charlin Agramonte Week 1 THANK YOU!!!