In this second week of the workshop Xamarin Forms - Noob to master, we talked about XAML, Styles, MVVM, Data binding, and commands.

1. XAMARIN FORMS
NOOB TO MASTER
By Rendy Del Rosario and Charlin Agramonte
Week 2

2. Objectives
- Understand what is XAML
- Understand what are Styles and when to use it
- Understand what is MVVM
- Learn to use DataBinding

3. XAML

4. Extended
Application
Markup
Language

5. Microsoft XAML vs. Xamarin.Forms

6. Benefits
- Separation of UI from Behavior
- Code easier to read

7. What gets created?
UI- XAML
CODE BEHIND - C#

8. Basic Structure

9. Describing a screen in XAML

10. Describing a screen in XAML
PROPERTIES

11. XAML Initialization
Load the XAML

12. Property Conversions
XML attributes only allow for string values – works fine for intrinsic types
STRINGS

13. Adding behaviour to a XAML page
Use x:Name to assign field name
allows you to reference element in
XAML and code behind
XAML
CODE BEHIND

14. Handle events in XAML
Can also wire up events in XAML – event handler must be defined
in the code behind file and have proper signature or it’s a runtime
failure

15. GROUP EXERCISE
Creating our Colorful Text Editor in XAML

16. Using device-specific values

17. Enabling XAMLC
XAMLC (the XAML compiler) is disabled by default to ensure backwards
compatibility; can be enabled through a .NET attribute

18. INDIVIDUAL EXERCISE
Android
iOS
TIME: 30 MINUTES
SizeIconApp

19. Styles

20. Duplicate XAML values are error prone and difficult to
maintain

21. Creating Resources
Resources created in XAML must use the XAML-language keyword
x:Key to set the key

22. Using static Resources

23. What is a Style?
The Style class groups a collection of property values into one object that can then be applied to multiple
visual element instances.

24. Global Styles

25. More Styles

26. INDIVIDUAL EXERCISE
Refactoring your code using Style
TIME: 10 MINUTES

27. Model-View-ViewModel

28. Model-View-ViewModel (MVVM)
MVVM is a layered,
separated presentation
pattern made popular by
XAML based UI where a
data binding engine takes
the place of the controller /
presenter

29. Model
Models manage the
application data and may
include any combination
of domain logic, persisted
state and validation, not
necessarily in one object

30. View
View presents the
information to the user in
a platform-specific fashion

31. ViewModel
The ViewModel provides a
view-centric
representation of the data
to display

32. Connecting a View and ViewModel
Main ViewModel is most often set as the BindingContext for
the view in code behind, but can also be done in XAML if
preferred

33. GROUP EXERCISE
Creating View-ViewModel-Model in our project

34. Data Binding

35. What is data binding?
Data bindings allow properties of two objects to be linked so that a change
in one causes a change in the other.

36. Creating binding in XAML
Create bindings in XAML with {Binding} markup extension

37. Data binding Source

38. BindingContext
BindingContext is automatically inherited from parent to child – can set
it once on the root view and it will be used for all children

39. BindingContext
BindingContext is automatically inherited from parent to child – can set
it once on the root view and it will be used for all children

40. Binding Mode
Binding Mode controls the direction of the data transfer, can set to
"TwoWay" to enable bi-directional bindings

41. Binding Mode
Binding Mode controls the direction of the data transfer, can set to
"TwoWay" to enable bi-directional bindings

42. GROUP PRACTICE
USING BINDING

43. INDIVIDUAL EXERCISE
SIMPLE REGISTER FORM USING BINDING
TIME: 30 MINUTES

44. INotifyPropertyChanged
INotifyPropertyChanged provides change notification contract, should
be implemented by any modifiable model object you bind to

45. Implementing INotifyPropertyChanged
INotifyPropertyChanged provides change notification contract, should
be implemented by any modifiable model object you bind to

46. INotifyPropertyChanged + Binding
Binding will subscribe to the PropertyChanged event and update the
target property when it sees the source property notification

47. Command
A few Xamarin.Forms controls expose a Command property for the main
action of a control

48. Gesture-based commands
Xamarin.Forms also includes a TapGestureRecognizer which can
provide a command interaction for other controls or visuals

49. INDIVIDUAL EXERCISE
Adding Validations to your Form
TIME: 15 MINUTES

50. HOMEWORK PRACTICE

51. Recommended Lectures
- Mastering in XAML
https://www.youtube.com/watch?v=yqdXiSi_Zl4&t=1658s
- Styles
https://developer.xamarin.com/guides/xamarin-forms/user-interface/sty
les/

52. By Rendy Del Rosario and Charlin Agramonte
Week 1
THANK YOU!!!