In this first week of the workshop Xamarin Forms - Noob to master, we started talking about what is Xamarin Forms, also about Layouts, Views, Pages, Navigation, etc

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)

5. What is Xamarin?

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

8. Xamarin development approaches

9. What is Xamarin Forms?

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

11. Project structure

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

28. What is GridLenght?

29. Absolute
Auto
Star

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!!!