What's Xamarin.Forms? This deck will allow you to get started fast at building universal apps with it :)

1. Creare app native su
iOS, Android, Mac &
Windows in C#
Introduzione a Xamarin.Forms

2. Gli speaker di oggi
Guido Magrin
Xamarin & Microsoft Student Partner
Xamarin Certified Developer
@GuidoMagrin

3. Dove trovo le slide?
http://www.slideshare.net/guidomagrin

4. Gli Xamarin Student Partner
https://www.facebook.com/XSAMilano

5. Oggi parleremo di…
Xamarin.Forms

6. Cosa impareremo oggi?
• Cos’è Xamarin.Forms
• La prima app Xamarin.Forms
• Pagine
• Layouts
• Controlli e navigazione
• Extra

7. Chi ha già
sentito parlare di
Xamarin.Forms?

8. Xamarin + Xamarin.Forms
Approccio offerto da Xamarin.Forms:
Codice UI condiviso, controlli nativi
Approccio tradizionale di Xamarin
Shared UI Code

9. Il progetto Xamarin.Forms
Una soluzione con 4 progetti:
– Shared
– iOS 6.1+
– Android 4.0+
– Windows Phone 8.x – Windows 10 (in arrivo)
Due approcci per il progetto condiviso:
– Shared: file condivisi tra i progetti tramite il meccanismo dei link
– Portable: una vera e propria PCL, che produce in output una libreria DLL

10. Attenzione!
Xamarin.Forms viene distribuito come pacchetto NuGet,
per questo è importante controllare la presenza di aggiornamenti
prima di iniziare un progetto

11. Costruzione della User Interface
Due differenti approcci:
• Da codice: i controlli vengono istanziati da codice e aggiunti alla
proprietà Content della pagina.
• XAML: il layout viene definito utilizzando il linguaggio XAML

12. XAML Previewer per Xamarin Forms
• Richiede la versione 2.3 del
package di Xamarin.Forms
• Consente esclusivamente di
“vedere”, non di modificare
• Disponibile per iOS/Android

13. Microsoft XAML vs Xamarin.Forms
Xamarin.Forms è conforme alle specifiche di XAML 2009

14. Microsoft XAML vs Xamarin.Forms

15. Descrivere una schermata tramite XAML

16. La prima app
Xamarin.Forms

17. Domanda 1
Xamarin.Forms usa controlli nativi su ogni piattaforma per renderizzare
l’interfaccia grafica
a) Vero
b) Falso

18. Domanda 1
Xamarin.Forms usa controlli nativi su ogni piattaforma per renderizzare
l’interfaccia grafica
a) Vero
b) Falso

19. Domanda 2
Se voglio realizzare un’app per iPhone e iPad curata pixel per pixel,
Xamarin.Forms è la scelta migliore per il mio progetto
a) Vero
b) Falso

20. Domanda 2
Se voglio realizzare un’app per iPhone e iPad curata pixel per pixel,
Xamarin.Forms è la scelta migliore per il mio progetto
a) Vero
b) Falso

21. Domanda 3
Xamarin.Forms è la scelta ideale per realizzare prototipi o app con
pochi elementi grafici, che non richiedono una grafica personalizzata
a) Vero
b) Falso

22. Domanda 3
Xamarin.Forms è la scelta ideale per realizzare prototipi o app con
pochi elementi grafici, che non richiedono una grafica personalizzata
a) Vero
b) Falso

23. La prima app
Xamarin.Forms
DEMO

24. La prima app
Xamarin.Forms

25. Domanda 1
Xamarin.Forms crea un singolo file binario che può essere distribuito ed
eseguito indifferentemente su Android, iOS e Windows Phone
a) Vero
b) Falso

26. Domanda 1
Xamarin.Forms crea un singolo file binario che può essere distribuito ed
eseguito indifferentemente su Android, iOS e Windows Phone
a) Vero
b) Falso

27. Domanda 2
Per impostare la pagina di avvio di un’app Xamarin.Forms, che
proprietà della classe App bisogna impostare?
a) Application.FirstPage
b) Application.PrimaryPage
c) Application.MainPage
d) Application.MainView

28. Domanda 2
Per impostare la pagina di avvio di un’app Xamarin.Forms, che
proprietà della classe App bisogna impostare?
a) Application.FirstPage
b) Application.PrimaryPage
c) Application.MainPage
d) Application.MainView

29. Le pagine
• La tipologia più semplice è la ContentPage, che rappresenta una
pagina con del contenuto
• Una ContentPage può essere inclusa in una:
– MasterDetailPage
– NavigationPage
– TabbedPage, per suddividere i contenuti in sezioni
– CarouselPage, per implementare una gallery

30. Pagine

31. Le pagine
Contiene controlli e
componenti visuali
Content

32. Le pagine
Content MasterDetail
Gestisce due pagine
di informazioni

33. Le pagine
Content MasterDetail Navigation
Gestisce uno stack di
navigazione

34. Le pagine
Content MasterDetail Navigation Tabbed
Pagina che naviga
attraverso più tab

35. Le pagine
Content MasterDetail Navigation Tabbed Carousel
Pagina che consente
di navigare i contenuti
tramite swipe

36. Esempio di TabbedPage
Due differenti ContentPage

37. Pagine
DEMO

38. Layouts

39. Il layout
• Esattamente come nelle Windows Store app, Xamarin Forms offre
dei controlli che servono per definire il layout della pagina
• Definiscono la disposizione dei controlli presenti al loro interno

40. StackLayout
• Equivale al controllo StackPanel dello XAML Microsoft
• Consente di impilare i controlli al suo interno
– Di default, in verticale
– Cambiando la proprietà Orientation, in orizzontale
<StackLayout>
<Label Text="Text 1" />
<Label Text="Text 2" />
<Label Text="Text 3" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Text 1" />
<Label Text="Text 2" />
<Label Text="Text 3" />
</StackLayout>

41. StackLayout

42. Grid
• Equivale all’omonimo controllo dello XAML Microsoft
• Consente di realizzare layout a griglia, formati da righe e colonne
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="Item 1" />
<Label Grid.Row="0" Grid.Column="1" Text="Item 2" />
<Label Grid.Row="1" Grid.Column="0" Text="Item 3" />
<Label Grid.Row="1" Grid.Column="1" Text="Item 4" />
</Grid>

43. Grid

44. Altri controlli per il layout
• AbsoluteLayout: analogo al Canvas dello XAML Microsoft,
consente di posizionare i controlli in modo assoluto, utilizzando le
coordinate x e y
• ScrollView: analogo allo ScrollViewer dello XAML Microsoft, abilita
lo scrolling nel caso in cui i controlli al suo interno occupino uno
spazio maggiore dell’altezza dello schermo

45. Layouts
DEMO

46. La prima app
Xamarin.Forms

47. Domanda 1
La direzione (dall’alto verso il basso – da sinsitra verso destra) degli
elementi contenuti in uno StackLayout, da che proprietà è controllata?
a) Style
b) Direction
c) Orientation
d) LayoutDirection

48. Domanda 1
La direzione (dall’alto verso il basso – da sinsitra verso destra) degli
elementi contenuti in uno StackLayout, da che proprietà è controllata?
a) Style
b) Direction
c) Orientation
d) LayoutDirection

49. Domanda 2
Per regolare la distanza tra i contenuti di uno StackLayout, che
proprietà dobbiamo utilizzare?
a) Margin
b) Padding
c) Spacing

50. Domanda 2
Per regolare la distanza tra i contenuti di uno StackLayout, che
proprietà dobbiamo utilizzare?
a) Margin
b) Padding
c) Spacing

51. Controlli e
navigazione

52. I controlli di Xamarin.Forms
ActivityIndicator BoxView Button DatePicker Editor
Entry Image Label ListView Map
OpenGLView Picker ProgressBar SearchBar Slider
Stepper TableView TimePicker WebView EntryCell
ImageCell SwitchCell TextCell ViewCell

53. Visualizzare contenuti
• Label: per visualizzare testi, equivale al controllo TextBlock
• Image: per mostrare un’immagine
• ImageCell: per mostrare un’immagine con un testo
• ListView: per mostrare liste di oggetti
• BoxView: per disegnare un’area rettangolare
• WebView: per mostrare contenuti HTML

54. Ricevere input dall’utente
• Button: per interagire con l’applicazione
– Il contenuto viene impostato con la proprietà Text e l’evento di
pressione si chiama Clicked
• DatePicker e TimePicker: per selezionare data e ora.
• Entry: per inserire del testo, equivale al controllo TextBox.
• Editor: per inserire linee di testo multiple.
• Picker: per selezionare un elemento da una lista, equivale al
controllo ListPicker

55. Ricevere input dall’utente
• SearchBar: analoga al controllo Entry, ma predisposta per la ricerca
• Slider: per inserire un valore lineare, equivale all’omonimo controllo
XAML.
• Stepper: per inserire un valore intero, all’interno di un range, tramite
due pulsanti + e –
• Switch: per gestire lo stato attivo / non attivo, equivale al controllo
ToggleSwitch nello XAML

56. Le mappe
• Pacchetto a parte da installare tramite NuGet di nome
Xamarin.Forms.Maps
• Supporta:
– Pushpin
– Geocoding e reverse geocoding
– Zoom
– Differenti tipi di mappa

57. Toolbar Items
• La classe ContentPage espone la proprietà ToolbarItems, che
contiene una serie di controlli ToolbarItem.
• Viene mappata:
– Su Windows Phone, con un’application bar
– Su iOS e Android, con una toolbar nella barra di navigazione
<ContentPage.ToolbarItems>
<ToolbarItem Text="Impostazioni" Order=“Primary" Clicked="Settings_OnClicked"/>
<ToolbarItem Text="Info su" Order="Secondary" Clicked="About_OnClicked"/>
</ContentPage.ToolbarItems>

58. Toolbar Items

59. La navigazione tra pagine
• E’ resa possibile dalla classe Navigation:
– PushAsync() per portare l’utente ad un’altra pagina
– PopAsync() per tornare indietro alla pagina precedente
• E’ possibile aprire le pagine anche in modalità modale (non
supportato su Windows Phone).
• Su iOS e Android è obbligatorio usare una NavigationPage per
sfruttare i metodi di navigazione

60. Controlli e
navigazione
DEMO

61. La prima app
Xamarin.Forms

62. Domanda 1
Quale dei seguenti controlli non è disponibile in Xamarin.Forms?
a) Button
b) DatePicker
c) ListBox
d) ListView

63. Domanda 1
Quale dei seguenti controlli non è disponibile in Xamarin.Forms?
a) Button
b) DatePicker
c) ListBox
d) ListView

64. Domanda 2
Da quali metodi della classe Navigation è resa possibile la
navigazione?
a) MoveAsync()
b) PushAsync()
c) PopAsync()
d) NavigateAsync()

65. Domanda 2
Da quali metodi della classe Navigation è resa possibile la
navigazione?
a) MoveAsync()
b) PushAsync()
c) PopAsync()
d) NavigateAsync()

66. Domanda 3
Se voglio mostrare del testo nella mia app, il controllo migliore messo a
disposizione da Xamarin.Forms è
a) Label
b) Entry
c) BoxView
d) Editor

67. Domanda 3
Se voglio mostrare del testo nella mia app, il controllo migliore messo a
disposizione da Xamarin.Forms è
a) Label
b) Entry
c) BoxView
d) Editor

68. Extra

69. Abilitare XAMLC
XAMLC (il compilatore XAML) è disabilitato di default per assicurare la
retrocompatibilità del codice scritto. Può essere abilitato tramite un attributo .NET

70. Cos’è una Risorsa?
Una risorsa è un oggetto che può essere usato più volte all’interno della nostra UI

71. Creare una Risorsa (locale)
Ogni pagina può contenere un dictionary, a sua volta in grado di contenere varie
risorse.

72. Creare una Risorsa (centralizzata)
La Risorsa può essere anche gestita in maniera centralizzata, in maniera da
essere disponibile per tutte le pagine del nostro progetto

73. Usare una Risorsa
StaticResource serve a recuperare una risorsa, ma il valore è applicato solo
quando l’oggetto è creato

74. Cos’è uno Stile?
Uno stile è una collezione di setters per un particolare tipo di view

75. Usare uno Stile
Gli stili sono impostati tramite l’utilizzo della proprietà Style

76. Dove posso imparare di più?
https://developer.xamarin.com/guides/xamarin-forms/creating-mobile-apps-xamarin-forms/
Libro gratuito completo
su Xamarin.Forms,
diviso in 27 capitoli.
Disponibile in PDF, ePub e Mobi

77. Grazie per l’attenzione 
Guido Magrin
Xamarin Student Partner
@GuidoMagrin