This document provides an overview of Xamarin Forms, a cross-platform mobile app development framework. It discusses traditional mobile app development versus using Xamarin, describes the Xamarin Forms framework, and provides examples of creating a basic Xamarin Forms application using pages, views, and layouts. It also briefly mentions custom renderers, MVVM frameworks, and resources for learning more about Xamarin Forms development.

1. Charlin Agramonte
charlin@crossgeeks.com
Twitter: @chard003
FB: chard003
https://xamgirl.com/
Rendy Del Rosario
rendy@crossgeeks.com
Twitter: @rdelrosario
FB: RendyDelRosario

2. XAMARIN FORMS
FROM ZERO TO HERO
By Rendy Del Rosario and Charlin Agramonte

3. What is Xamarin?

4. Traditional approach
Traditionally, apps have separate code bases
written in their native language, are built using
native tools, and utilize platform-specific features

5. What is Xamarin?
Xamarin is an app-development platform that lets
you build apps for many operating systems from a
single, shared code base

6. Xamarin development approaches

7. What is Xamarin Forms?

8. Xamarin Forms
Xamarin.Forms is a cross- platform UI framework
to create mobile apps for Android /iOS/Windows.

9. Project structure

10. SAMPLE
Creating a Xamarin Forms application

11. Xamarin Forms Application
Application class provides
lifecycle methods which can
be used to manage
persistence and refresh your
data

12. Creating the application UI
Application UI is defined in terms of pages
and views.

13. Pages
Page is an abstract class used to define a
single screen of content.

14. Views
View is the base class for all visual controls,
most standard controls are present

15. Views

16. Visual adjustment
Views utilize properties to adjust visual
appearance and behavior

17. Providing Behavior
Controls use events to provide interaction
behaviours.

18. 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

19. Layout containers
Organize child elements based on specific
rules.

20. StackLayout
StackLayout places children top-to-bottom (default) or
left-to- right based on Orientation property setting

21. AbsoluteLayout
AbsoluteLayout places children in absolute requested
positions based on anchors and bounds

22. RelativeLayout
RelativeLayout allows you to position child
views relative to two other views, or to the panel
itself using constraint-based rules

23. ScrollView
ScrollView scrolls a single piece of content (which is
normally a layout container)
Wrap a ScrollView around a single element to
add scrolling

24. Grid
Grid is a layout panel used to create rows and
columns of views, children identify specific
column, row and span

25. Flexlayout
A Flexbox-like layout that lays out child elements
in optionally wrappable rows or columns of child
elements.

26. LayoutOptions
ALL VIEWS IN XAMARIN
FORMS
HAVE THESE 2 PROPERTIES

27. Alignment

28. Expansion

29. 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

30. SAMPLE
Creating a basic UI

31. INDIVIDUAL EXERCISE
Creating a Text color procesador
TIME: 25 MINUTES

32. Using Platform Features
Device.OpenUri DisplayAlert Device.StartTimer

33. Navigation
- PushAsync
- PopAsync
- PushModalAsync
- PopModalAsync
- RemovePage
- PopToRootAsync

34. HOMEWORK PRACTICE
Creating Navigation Options to Our Color procesador

35. What is a Custom Renderer?
Custom renderers provide a powerful approach for customizing the appearance
and behavior of Xamarin.Forms controls

36. Mvvm FrameWorks
Prism Reactive UI FreshMvvM
MVVM LightMvvMCross

37. So what’s next?
- Take a course (https://university.xamarin.com/)
- Start an App (https://www.ideaswatch.com/startup-ideas/app)
- Use a Framework
(https://xamgirl.com/prism-in-xamarin-forms-step-by-step-part-1/)
- Join to Xamarin Forms Facebook developer group
(https://www.facebook.com/groups/778559908978460/)

38. References
- Getting Start
https://developer.xamarin.com/guides/xamarin-forms/getting-started/
- Layouts
https://developer.xamarin.com/guides/xamarin-forms/user-interface/lay
outs/
- Learning Xamarin Forms
https://xamgirl.com/learning-xamarin-forms-personal-recipe/

39. By Rendy Del Rosario and Charlin Agramonte
THANK YOU!!!