Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
Building out-of-the-ordinary
UIs with Xamarin.Forms
Roy Cornelissen
Lead Consultant @ Xpirit
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Goal
Shared app
logic
Raise the level of
code reuse even
further…
Slide 6
Slide 6 text
Shared app
logic
Shared UI
…by abstracting
common UI
paradigms into a
library
Goal
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Page abstractions
Slide 9
Slide 9 text
Layout abstractions
Slide 10
Slide 10 text
Control abstractions
Slide 11
Slide 11 text
tinyurl.com/xamarin-forms
Slide 12
Slide 12 text
tinyurl.com/xamarin-forms
Slide 13
Slide 13 text
tinyurl.com/xamarin-forms
Slide 14
Slide 14 text
UILabel TextView TextBlock
LabelRenderer
LabelRenderer
LabelRenderer
Label
Slide 15
Slide 15 text
ListView
LongListSelector
ListViewRenderer
UITableView ListView
ListViewRenderer
ListViewRenderer
Slide 16
Slide 16 text
MyEntry
Entry
MyEntryRenderer_Windows MyEntryRenderer_Android MyEntryRenderer_iOS
Xamarin.Platform
Windows.EntryRenderer
Xamarin.Platform
Android.EntryRenderer
Xamarin.Platform
iOS.EntryRenderer
Platform
specific
Shared
code
Slide 17
Slide 17 text
Typical
PCL
Slide 18
Slide 18 text
Typical
Shared
Slide 19
Slide 19 text
targets
PCL / Shared Project
Phone 8
Silverlight
Windows Store
Phone RT
iPhone
iPad
Phone
Tablet
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
MVVM framework
Slide 22
Slide 22 text
with IoC
MyViewModel
IMediaPicker
WindowsMediaPicker: IMediaPicker
AndroidMediaPicker: IMediaPicker
iOSMediaPicker: IMediaPicker
DependencyService.Get();
[assembly: Dependency (typeof (WindowsMediaPicker))]
Slide 23
Slide 23 text
using Device class
Device.Styles
Styles for controls, e.g. labels & lists
Device.GetNamedSize
Font sizes
Device.Idiom
Tablet or phone specific code / behavior
Device.OS
Target platform specific code
Device.OnPlatform()
Target platform specific values
Device.OpenUri()
Device.StartTimer()
Device.BeginInvokeOnMainThread()
Slide 24
Slide 24 text
center
Messaging
Center
Master
Subscribes
Receives msg
Detail
Sends message
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Party time!
We want
an app for
~300
people
They must
be able to
sign up for
the party
And post
pictures to
a gallery
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Yes… well
actually, we want it
a little bit more
festive.
Something like…
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Using the Parse API
is still possible
Slide 35
Slide 35 text
Dealing with data
and pictures
is still possible
Slide 36
Slide 36 text
App has pretty basic
navigation flow
We can still use
Slide 37
Slide 37 text
Although round and fancy,
all in all they’re just buttons
(abstraction)
We can still use
Slide 38
Slide 38 text
Taking pictures
We learned about
Slide 39
Slide 39 text
Using custom renderers to
deal with the round buttons
We learned about
Slide 40
Slide 40 text
Shared
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
@roycornelissen
roycornelissen.wordpress.com
[email protected]
bit.ly/XpiritMagazine
Slide 43
Slide 43 text
Your feedback is important!
Scan the QR Code and let us know via the TechDays App.
Laat ons weten wat u van de sessie vindt!
Scan de QR Code via de TechDays App.
Bent u al lid van de Microsoft Virtual Academy?! Op MVA kunt u altijd iets
nieuws leren over de laatste technologie van Microsoft. Meld u vandaag aan
op de MVA Stand. MVA biedt 7/24 gratis online training on-demand voor IT-
Professionals en Ontwikkelaars.
Slide 44
Slide 44 text
No content