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
Alessio Iafrate
alessioiafrate@hotmail.com
@alessioiafrate
DotNetAbruzzo
Agenda
• Perché Xamarin Forms
• Il progetto Xamarin Forms
• Le pagine
• Il layout
• I controlli
• Gestiamo le differenze t...
Perché Xamarin Forms
• Consente di condividere non solo la logica, ma anche l’interfaccia utente
• Linguaggio basato su XA...
Controlli nativi
<DatePicker />
Condividiamo il codice (Xamarin Nativo)
Portable Class Library o Shared Project
C# Platform Specific C# Platform Specific ...
Condividiamo il codice (Xamarin Forms)
Portable Class Library o Shared Project
C# Platform Specific C# Platform Specific C...
Il progetto Xamarin Forms
• Una soluzione con 4 progetti:
• Shared
• iOS
• Android
• Windows Phone
• Due approcci per il p...
Il punto di partenza
La classe App è il punto di partenza di un’applicazione Xamarin Forms
Si fa carico di definire qual è...
Le pagine
La tipologia più semplice è ContentPage, che rappresenta una pagina con del
contenuto
Una ContentPage può essere...
Tipi di pagina
La navigazione
E’ resa possibile dalla classe Navigation:
• PushAsync() per portare l’utente ad un’altra pagina
• PopAsync...
Definire il layout
Due differenti approcci
• Da codice: i controlli vengono istanziati da codice e aggiunti alla proprietà...
Layout
• Esattamente come nelle Windows Store app, Xamarin Forms offre dei
controlli che servono per definire il layout de...
StackLayout
• Equivale al controllo StackPanel dello XAML Microsoft
• Consente di impilare i controlli al suo interno
• Di...
StackLayout Nativo
Grid
• Equivale all’omonimo controllo dello XAML Microsoft
• Consente di realizzare layout a griglia, formati da righe e c...
Grid Nativo
Altri controlli
• AbsoluteLayout: analogo al Canvas dello XAML Microsoft, consente di
posizionare i controlli in modo asso...
Controlli per visualizzare contenuti
• Label: per visualizzare testi, equivale al controllo TextBlock
• Image: per mostrar...
Controlli di inserimento dati
• Button: per interagire con l’applicazione
• Il contenuto viene impostato con la proprietà ...
Altri controlli di inserimento
• SearchBar: analoga al controllo Entry, ma predisposta per la ricerca
• Slider: per inseri...
Mostrare lo stato delle operazioni
• ActivityIndicator: utilizzato per indicare che è in corso un’operazione
bloccante, eq...
Demo
Il progetto
Toolbar Nativo
• La classe ContentPage espone la proprietà ToolbarItems, che contiene una
serie di controlli ToolbarItem.
...
Toolbar Nativo
Le mappe
• Pacchetto a parte da installare tramite NuGet di nome Xamarin.Forms.Maps
• La registrazione del controllo deve ...
Demo
Mappe
Gestire le differenze tra le piattaforme
• DependencyService
• Si crea un’interfaccia nel progetto condiviso, che espone i...
Integrazione con il nativo
• Pagine native in Xamarin Forms
• Pagine Forms dentro progetti nativi (ad es. per pagine sempl...
Nativo vs Forms
Xamarin.Forms è la scelta migliore per:
• Apps di Data entry
• Prototipi
• Apps che richiedono poche funzi...
Question time
GRAZIE A TUTTI!!!
Xamarin forms
Upcoming SlideShare
Loading in …5
×

Xamarin forms

825 views

Published on

slide della mia sessione su Xamarin Forms allo Xamarin Day organizzato da DomusDotNet

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Xamarin forms

  1. 1. Xamarin Forms Alessio Iafrate alessioiafrate@hotmail.com @alessioiafrate DotNetAbruzzo
  2. 2. Agenda • Perché Xamarin Forms • Il progetto Xamarin Forms • Le pagine • Il layout • I controlli • Gestiamo le differenze tra le piattaforme
  3. 3. Perché Xamarin Forms • Consente di condividere non solo la logica, ma anche l’interfaccia utente • Linguaggio basato su XAML: i controlli XAML vengono tradotti in controlli nativi a runtime • Supporto alle principali caratteristiche di XAML: binding, dependency property, behavior, trigger, ecc. • Non è lo stesso XAML di Microsoft: molti punti di contatto, ma alcuni controlli hanno nomi e proprietà differenti
  4. 4. Controlli nativi <DatePicker />
  5. 5. Condividiamo il codice (Xamarin Nativo) Portable Class Library o Shared Project C# Platform Specific C# Platform Specific C# Platform Specific Shared C# App Logic (ViewModels, Models etc)
  6. 6. Condividiamo il codice (Xamarin Forms) Portable Class Library o Shared Project C# Platform Specific C# Platform Specific C# Platform Specific Shared C# Interface Code (Xamarin.Forms) Shared C# App Logic (ViewModels, Models etc)
  7. 7. Il progetto Xamarin Forms • Una soluzione con 4 progetti: • Shared • iOS • Android • Windows Phone • 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 • Xamarin Forms viene distribuito come pacchetto NuGet, quindi è importante controllare la presenza di aggiornamenti prima di iniziare un progetto
  8. 8. Il punto di partenza La classe App è il punto di partenza di un’applicazione Xamarin Forms Si fa carico di definire qual è la pagina iniziale da caricare, grazie alla proprietà MainPage Consente di gestire il ciclo di vita dell’applicazione: • OnStart() quando l’applicazione viene avviata • OnSleep() quando l’applicazione viene sospesa • OnResume() quando l’applicazione viene riattivata
  9. 9. Le pagine La tipologia più semplice è ContentPage, che rappresenta una pagina con del contenuto Una ContentPage può essere inclusa in una: • NavigationPage, per aggiungere funzionalità di navigazione • TabbedPage, per suddividere i contenuti in sezioni • CarouselPage, per implementare una gallery • MasterDetailPage, per scenari master - detail
  10. 10. Tipi di pagina
  11. 11. La navigazione 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). E’ obbligatorio usare una NavigationPage per sfruttare i metodi di navigazione
  12. 12. Definire il layout 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
  13. 13. 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
  14. 14. 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>
  15. 15. StackLayout Nativo
  16. 16. 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>
  17. 17. Grid Nativo
  18. 18. Altri controlli • AbsoluteLayout: analogo al Canvas dello XAML Microsoft, consente di posizionare i controlli in modo assoluto, utilizzando le coordinate x e y • RelativeLayout: che permette di posizionare un elemento in maniera relativa rispetto ad un altro controllo • 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
  19. 19. Controlli per visualizzare contenuti • Label: per visualizzare testi, equivale al controllo TextBlock • Image: per mostrare un’immagine • ListView: per mostrare liste di oggetti • BoxView: per disegnare un’area rettangolare • WebView: per mostrare contenuti HTML
  20. 20. Controlli di inserimento dati • 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
  21. 21. Altri controlli di inserimento • 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
  22. 22. Mostrare lo stato delle operazioni • ActivityIndicator: utilizzato per indicare che è in corso un’operazione bloccante, equivale al controllo ProgressRing • ProgressBar: utilizzato per indicare che è in corso un’operazione generica, equivale all’omonimo controllo nello XAML
  23. 23. Demo Il progetto
  24. 24. Toolbar Nativo • 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
  25. 25. Toolbar Nativo
  26. 26. Le mappe • Pacchetto a parte da installare tramite NuGet di nome Xamarin.Forms.Maps • La registrazione del controllo deve essere fatta in maniera differente per le tre piattaforme • Supporta: • Pushpin • Geocoding e reverse geocoding • Zoom • Differenti tipi di mappa
  27. 27. Demo Mappe
  28. 28. Gestire le differenze tra le piattaforme • DependencyService • Si crea un’interfaccia nel progetto condiviso, che espone i metodi comuni tra tutte le piattaforme,si crea poi un’implementazione dell’interfaccia specifica per ogni piattaforma, che utilizza le API di Xamarin • la classe Device • Permette di distinguere la piattaforma e implementare variazioni nel layout e di effettuare alcune operazioni cross-platform direttamente nel progetto condiviso • CustomRenderer • Personalizzare l’aspetto e il comportamento dei controlli in base alla piattaforma • Un controllo base, nel progetto condiviso, da utilizzare nelle pagine XAML • Una classe in ogni progetto specifico, che utilizza le API native della piattaforma • Inserimento controlli nativi
  29. 29. Integrazione con il nativo • Pagine native in Xamarin Forms • Pagine Forms dentro progetti nativi (ad es. per pagine semplici o ripetitive come login, inserimento dati o registrazione)
  30. 30. Nativo vs Forms Xamarin.Forms è la scelta migliore per: • Apps di Data entry • Prototipi • Apps che richiedono poche funzionalità specifiche per le varie piattaforme • Apps dove condividere il codice è più importante di una UI personalizzata Xamarin Nativo è la scelta migliore: • Apps con un design molto ricercato • Apps che utilizzano molte API specifiche delle varie piattaforme • Apps dove una UI personalizzata è più importante del condividere il codice • App dove è importante avere il massimo delle performance
  31. 31. Question time
  32. 32. GRAZIE A TUTTI!!!

×