Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Xamarin.Forms Introduction

1,382 views

Published on

What's Xamarin.Forms?

This deck will allow you to get started fast at building universal apps with it :)

Published in: Software
  • Be the first to comment

Xamarin.Forms Introduction

  1. 1. Creare app native su iOS, Android, Mac & Windows in C# Introduzione a Xamarin.Forms
  2. 2. Gli speaker di oggi Guido Magrin Xamarin & Microsoft Student Partner Xamarin Certified Developer @GuidoMagrin
  3. 3. Dove trovo le slide? http://www.slideshare.net/guidomagrin
  4. 4. Gli Xamarin Student Partner https://www.facebook.com/XSAMilano
  5. 5. Oggi parleremo di… Xamarin.Forms
  6. 6. Cosa impareremo oggi? • Cos’è Xamarin.Forms • La prima app Xamarin.Forms • Pagine • Layouts • Controlli e navigazione • Extra
  7. 7. Chi ha già sentito parlare di Xamarin.Forms?
  8. 8. Xamarin + Xamarin.Forms Approccio offerto da Xamarin.Forms: Codice UI condiviso, controlli nativi Approccio tradizionale di Xamarin Shared UI Code
  9. 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. 10. Attenzione! Xamarin.Forms viene distribuito come pacchetto NuGet, per questo è importante controllare la presenza di aggiornamenti prima di iniziare un progetto
  11. 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. 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. 13. Microsoft XAML vs Xamarin.Forms Xamarin.Forms è conforme alle specifiche di XAML 2009
  14. 14. Microsoft XAML vs Xamarin.Forms
  15. 15. Descrivere una schermata tramite XAML
  16. 16. La prima app Xamarin.Forms
  17. 17. Domanda 1 Xamarin.Forms usa controlli nativi su ogni piattaforma per renderizzare l’interfaccia grafica a) Vero b) Falso
  18. 18. Domanda 1 Xamarin.Forms usa controlli nativi su ogni piattaforma per renderizzare l’interfaccia grafica a) Vero b) Falso
  19. 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. 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. 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. 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. 23. La prima app Xamarin.Forms DEMO
  24. 24. La prima app Xamarin.Forms
  25. 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. 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. 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. 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. 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. 30. Pagine
  31. 31. Le pagine Contiene controlli e componenti visuali Content
  32. 32. Le pagine Content MasterDetail Gestisce due pagine di informazioni
  33. 33. Le pagine Content MasterDetail Navigation Gestisce uno stack di navigazione
  34. 34. Le pagine Content MasterDetail Navigation Tabbed Pagina che naviga attraverso più tab
  35. 35. Le pagine Content MasterDetail Navigation Tabbed Carousel Pagina che consente di navigare i contenuti tramite swipe
  36. 36. Esempio di TabbedPage Due differenti ContentPage
  37. 37. Pagine DEMO
  38. 38. Layouts
  39. 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. 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. 41. StackLayout
  42. 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. 43. Grid
  44. 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. 45. Layouts DEMO
  46. 46. La prima app Xamarin.Forms
  47. 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. 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. 49. Domanda 2 Per regolare la distanza tra i contenuti di uno StackLayout, che proprietà dobbiamo utilizzare? a) Margin b) Padding c) Spacing
  50. 50. Domanda 2 Per regolare la distanza tra i contenuti di uno StackLayout, che proprietà dobbiamo utilizzare? a) Margin b) Padding c) Spacing
  51. 51. Controlli e navigazione
  52. 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. 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. 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. 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. 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. 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. 58. Toolbar Items
  59. 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. 60. Controlli e navigazione DEMO
  61. 61. La prima app Xamarin.Forms
  62. 62. Domanda 1 Quale dei seguenti controlli non è disponibile in Xamarin.Forms? a) Button b) DatePicker c) ListBox d) ListView
  63. 63. Domanda 1 Quale dei seguenti controlli non è disponibile in Xamarin.Forms? a) Button b) DatePicker c) ListBox d) ListView
  64. 64. Domanda 2 Da quali metodi della classe Navigation è resa possibile la navigazione? a) MoveAsync() b) PushAsync() c) PopAsync() d) NavigateAsync()
  65. 65. Domanda 2 Da quali metodi della classe Navigation è resa possibile la navigazione? a) MoveAsync() b) PushAsync() c) PopAsync() d) NavigateAsync()
  66. 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. 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. 68. Extra
  69. 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. 70. Cos’è una Risorsa? Una risorsa è un oggetto che può essere usato più volte all’interno della nostra UI
  71. 71. Creare una Risorsa (locale) Ogni pagina può contenere un dictionary, a sua volta in grado di contenere varie risorse.
  72. 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. 73. Usare una Risorsa StaticResource serve a recuperare una risorsa, ma il valore è applicato solo quando l’oggetto è creato
  74. 74. Cos’è uno Stile? Uno stile è una collezione di setters per un particolare tipo di view
  75. 75. Usare uno Stile Gli stili sono impostati tramite l’utilizzo della proprietà Style
  76. 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. 77. Grazie per l’attenzione  Guido Magrin Xamarin Student Partner @GuidoMagrin

×