Mobile is the fastest growing area in software development, and Xamarin makes it possible to build native iOS, Android and Windows 8 applications using a single code base written in C#. Until recently, this meant approximately 90% code reuse. Now, Xamarin has introduced Forms, which increase code reuse to 95-99% and which are built using C# and XAML - a version of the mark up language used in Silverlight, WPF, Windows 8 and Windows Phone. This session will explore how you can create beautiful cross-platform business applications with native controls, using XAML, C# and Xamarin.Forms.

1. XAML With Xamarin
There
Is
Life
A,er
Death
Jesse
Liberty
Master
Consultant
Falafel
So5ware
jesse@falafel.com
@jesseliberty

2. What We Will Cover
• Xamarin
Forms
and
XAML
• Data
and
Data
Binding
• MVVM

3. Am I In The Right Presenta:on?
• I
assume…
• LiEle
or
no
Xamarin
Forms
experience
• Comfortable
with
C#
• Familiar
with
XAML
• Interested
in
Databinding
• Interested
in
MVVM

4. Q&A
at
the
end

5. This is not your mama's Xamarin!
• Xamarin
Forms
are
a
whole
new
thing
• Xamarin
Forms
are
the
future!*
• For
now,
limited
but
extremely
powerful
• A
natural
migraMon
for
XAML
programmers
*
Personal
Opinion

6. What Is Xamarin?
• Xamarin
is
a
framework
that
allows
you
to
create
naMve
iOS,
Android,
Windows
Phone
and
Mac
applicaMons
in
C#.

7. What Is Xamarin Forms?
• Create
naMve
iOS,
Android,
WP
applicaMons
(UX)
with
shared
code
• XAML
and/or
C#

8. What Is Xamarin Studio?
• An
Integrated
Development
Environment
(IDE)
• Similar
to
Visual
Studio
• Runs
on
Mac
and
Windows

9. Your Development Environment
• OpMon
1:
Mac
only
–
Develop
iOS
and
Android
in
Xamarin
Studio
• OpMon
2:
Parallels
on
Mac,
Business
license.
Develop
iOS,
Android
and
Windows
Phone
in
Visual
Studio
• OpMon
3:
Windows
only
–
Develop
Android
and
Windows
Phone
in
Visual
Studio
or
Xamarin
Studio

10. XAML
• Anything
you
can
do
in
XAML
you
can
do
in
C#.
• But
don't.

11. XAML and MVVM
• You
can
do
XAML
without
MVVM
• But
don't.

12. MVVM From The Start
• Model:
Your
data
• View:
Your
presentaMon
(UI)
• View-­‐Model:
The
glue
• The
logic
goes
in
the
VM

13. Why MVVM?
• Proven
paEern
(WPF,
Silverlight,
etc.)
• Especially
lends
itself
to
Xamarin
Forms
• Data
binding
• XAML
• SeparaMon
of
concerns
• Easier
to
maintain
• Easier
to
test

14. C# && XAML
• XAML
is
great
because
• DeclaraMve
• Machine-­‐readable
(designer?)

15. Data Binding
• Rather
than
copying
data
to
and
from
the
user
interface,
we
bind!
• Bind
from
any
object
to
any
widget
Data
Source
Data
Control
Binding

16. Element Binding
• You
can
even
bind
from
one
control
to
another
• Example:
slider
to
label
Data
Label
Slider
Binding

17. Events
• Assign
event
handlers
• Handle
in
code-­‐behind
• No
support
yet
for
binding
events
• Though
there
are
libraries

18. Demo
• CreaMng
your
first
forms
applicaMon
• 3
Projects
• PCL
• iOS
• Android
Demo
1
–
New
SoluMon

19. What we're going to build
• Evaluator
is
a
mobile
applicaMon
• Helps
you
compare
items
such
as
dishwashers
• You
can
add
criteria
you
care
about
• You
set
how
important
each
is

23. Demo
• First
MVVM
Xamarin
Forms
ApplicaMon
• Goal:
create
a
page
that
lists
3
items
and
their
locaMon
• Demo
2

24. Being No:fied
• How
do
we
update
the
UI
if
the
data
changes?
• Implement
interface
INoMfyPropertyChanged
• Put
our
items
in
an
ObservableCollecMon
• Sound
familiar?

25. Demo
• Adding
noMficaMon
• Demo
3

26. Views and More
• Pages
• Layouts
• Views
• Cells

27. Key Layouts We’ll Work With
• StackLayout
• GridLayout

28. Key Views We’ll Work With
• Label
(display
text)
• Entry
(gather
text)
• ListView

29. Adding Views and Data
• We
want
to
add
Criteria
for
each
item
• Each
criterion
has
a
name,
a
descripMon,
an
importance
raMng
and
a
raMng
• Example:
• Quiet
• Higher
values
=
quieter
• Importance
=
5
• RaMng
=

30. Two New Views
• Details
page
displays
the
criteria
for
a
selected
item
• AddCriterion
allows
you
to
add
new
criteria
for
all
items

31. Naviga:on
• How
do
we
go
from
one
page
to
another?
• How
do
we
pass
informaMon
from
one
page
to
another?

32. Demo
• Criteria
• Details
Page
• Demo
4

33. Demo
• Fixing
the
integers
• Forms
provide
strings
• Storing
numbers
as
strings
is
undesirable
• SoluMon:
IValueConverter
• Demo
5

34. Demo
• Move
the
“Add
criterion”
buEon
to
the
details
page
• Add
“Add
Item”
to
Items
page
• Create
AddItemPage
• Demo
6

35. Tabbed Pages
• As
always,
write
to
the
abstracMon
• Displays
appropriate
to
the
plamorm
• In
the
MainPage.xaml:
<TabbedPage.Children>
<local:ItemsPage
/>
<local:HelpPage
/>
<local:LicensePage
/>
</TabbedPage.Children>
Declare
your
tabbed
pages
Remember
to
create
namespace

36. Demo
• Create
a
new
MainPage
• Add
tabbed
Pages
• 1st
tab
=
Items
• 2nd
tab
=
Help
• 3rd
tab
=
License
• Remember:
Page
type
is
TabbedPage
• Demo
7

37. Demo
• Adding
to
toolbar
• Drop/Seed
DB
• Demo
8

38. Images
• From
• A
file,
A
Uri,
A
Resource
• Aspect
• Fill,
AspectFill,
AspectFit
• hEp://jliberty.me/dishwasherjpg

39. Maps
• Using
Map
control
• Sepng
locaMon
• Sepng
MapType

40. Demo
• Adding
a
map
• Demo
9

41. Custom Rendering
• Remember
that
forms
render
naMvely
• This
is
done
with
“Renderers”
• You
can
write
Custom
Renderers

42. Demo
• Custom
Rendering
• Demo
10

43. Add icons
• Evaluate

45. Ques:ons?

46. Contact Me
• Jesse
Liberty
• Falafel
So5ware
• jesse@falafel.com
• @jesseliberty