Downloaded 73 times
Uploaded byGuido Magrin
Xamarin.Forms Introduction
Il documento introduce Xamarin.Forms per lo sviluppo di app native su iOS, Android, Mac e Windows utilizzando C#. Vengono discusse le caratteristiche principali, come la creazione di interfacce utente condivise, l'uso di XAML per definire layout e la navigazione tra pagine. Inoltre, ci sono riferimenti a risorse aggiuntive per l'apprendimento di Xamarin.Forms e alla configurazione di controlli e layout.
More Related Content
Xamarin.Forms Introduction
- 1. Creare app nativesu iOS, Android, Mac & Windows in C# Introduzione a Xamarin.Forms
- 2. Gli speaker dioggi Guido Magrin Xamarin & Microsoft Student Partner Xamarin Certified Developer @GuidoMagrin
- 3. Dove trovo leslide? http://www.slideshare.net/guidomagrin
- 4. Gli Xamarin StudentPartner https://www.facebook.com/XSAMilano
- 5.
- 6. Cosa impareremo oggi? •Cos’è Xamarin.Forms • La prima app Xamarin.Forms • Pagine • Layouts • Controlli e navigazione • Extra
- 7. Chi ha già sentitoparlare di Xamarin.Forms?
- 8. Xamarin + Xamarin.Forms Approccioofferto da Xamarin.Forms: Codice UI condiviso, controlli nativi Approccio tradizionale di Xamarin Shared UI Code
- 9. Il progetto Xamarin.Forms Unasoluzione 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 distribuitocome pacchetto NuGet, per questo è importante controllare la presenza di aggiornamenti prima di iniziare un progetto
- 11. Costruzione della UserInterface 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 perXamarin 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 vsXamarin.Forms Xamarin.Forms è conforme alle specifiche di XAML 2009
- 14. Microsoft XAML vsXamarin.Forms
- 15. Descrivere una schermatatramite XAML
- 16.
- 17. Domanda 1 Xamarin.Forms usacontrolli nativi su ogni piattaforma per renderizzare l’interfaccia grafica a) Vero b) Falso
- 18. Domanda 1 Xamarin.Forms usacontrolli nativi su ogni piattaforma per renderizzare l’interfaccia grafica a) Vero b) Falso
- 19. Domanda 2 Se vogliorealizzare 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 vogliorealizzare 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.
- 24.
- 25. Domanda 1 Xamarin.Forms creaun 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 creaun singolo file binario che può essere distribuito ed eseguito indifferentemente su Android, iOS e Windows Phone a) Vero b) Falso
- 27. Domanda 2 Per impostarela 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 impostarela 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 • Latipologia 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.
- 31. Le pagine Contiene controllie componenti visuali Content
- 32. Le pagine Content MasterDetail Gestiscedue pagine di informazioni
- 33. Le pagine Content MasterDetailNavigation Gestisce uno stack di navigazione
- 34. Le pagine Content MasterDetailNavigation Tabbed Pagina che naviga attraverso più tab
- 35. Le pagine Content MasterDetailNavigation Tabbed Carousel Pagina che consente di navigare i contenuti tramite swipe
- 36. Esempio di TabbedPage Duedifferenti ContentPage
- 37.
- 38.
- 39. Il layout • Esattamentecome 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 alcontrollo 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.
- 42. Grid • Equivale all’omonimocontrollo 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.
- 44. Altri controlli peril 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.
- 46.
- 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 regolarela distanza tra i contenuti di uno StackLayout, che proprietà dobbiamo utilizzare? a) Margin b) Padding c) Spacing
- 50. Domanda 2 Per regolarela distanza tra i contenuti di uno StackLayout, che proprietà dobbiamo utilizzare? a) Margin b) Padding c) Spacing
- 51.
- 52. I controlli diXamarin.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 • Pacchettoa parte da installare tramite NuGet di nome Xamarin.Forms.Maps • Supporta: – Pushpin – Geocoding e reverse geocoding – Zoom – Differenti tipi di mappa
- 57. Toolbar Items • Laclasse 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.
- 59. La navigazione trapagine • 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.
- 61.
- 62. Domanda 1 Quale deiseguenti controlli non è disponibile in Xamarin.Forms? a) Button b) DatePicker c) ListBox d) ListView
- 63. Domanda 1 Quale deiseguenti controlli non è disponibile in Xamarin.Forms? a) Button b) DatePicker c) ListBox d) ListView
- 64. Domanda 2 Da qualimetodi della classe Navigation è resa possibile la navigazione? a) MoveAsync() b) PushAsync() c) PopAsync() d) NavigateAsync()
- 65. Domanda 2 Da qualimetodi della classe Navigation è resa possibile la navigazione? a) MoveAsync() b) PushAsync() c) PopAsync() d) NavigateAsync()
- 66. Domanda 3 Se vogliomostrare 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 vogliomostrare del testo nella mia app, il controllo migliore messo a disposizione da Xamarin.Forms è a) Label b) Entry c) BoxView d) Editor
- 68.
- 69. Abilitare XAMLC XAMLC (ilcompilatore XAML) è disabilitato di default per assicurare la retrocompatibilità del codice scritto. Può essere abilitato tramite un attributo .NET
- 70. Cos’è una Risorsa? Unarisorsa è 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 StaticResourceserve a recuperare una risorsa, ma il valore è applicato solo quando l’oggetto è creato
- 74. Cos’è uno Stile? Unostile è una collezione di setters per un particolare tipo di view
- 75. Usare uno Stile Glistili sono impostati tramite l’utilizzo della proprietà Style
- 76. Dove posso impararedi 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
Editor's Notes
- #9 We see here the Xamarin approach we talked about earlier This enables you to be highly productive, share code, but build out UI on each platform and access platform APIs With Xamarin.Forms you now have a nice Shared UI Code layer, but still access to platform APIs You can start from native, pick a few screens, or start with forms, and replace with native later
- #17 Xamarin Introduction!
- #24 Xamarin Introduction!
- #25 Xamarin Introduction!
- #38 Xamarin Introduction!
- #46 Xamarin Introduction!
- #47 Xamarin Introduction!
- #60 PushModalAsync non ti crea una NavigationPage di base. se quindi fai: dichiaro page2; Push(page2); Push(new page) Non funziona, invece dichiaro page2; Push(page2); PushModal(new page) fa una pagina a sè Modal è da usare come gestione di una navigazione a sè NavigationPage per creare un vero Stack in cui navigare tra pagine quindi il Push e Pop classici funzionano SOLO se chiamati da una NavigationPage
- #61 Xamarin Introduction!
- #62 Xamarin Introduction!
- #78 Xamarin Introduction!