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.

Interfaccia di Xamarin

81 views

Published on

Descrizione dei componenti principali di Xamarin che permettono di comporre interfacce grafiche usando Xamarin.Forms. Principali layout manager di Xamarin From StackLayout, AbsoluteLayout, RelativeLayout, Grid e ListView

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Interfaccia di Xamarin

  1. 1. Interfaccia Utente Interfaccia Utente
  2. 2. Layout (1)  Xamarin. Forms dispone di diversi layout e le funzionalità nell'organizzazione del contenuto sullo schermo.  I layout più importanti sono:  StackLayout: usato per disporre le visualizzazioni in modo lineare, orizzontalmente o verticalmente.  AbsoluteLayout: consente di organizzare le visualizzazioni impostando le coordinate termini di valori assoluti o rapporti.  RelativeLayout: usato per disporre le visualizzazioni impostando vincoli rispetto al relativo elemento padre le dimensioni e posizione.  Grid: usato per disporre le viste in una griglia. Le righe e colonne possono essere specificate in termini di valori assoluti o rapporti.
  3. 3. Layout (2)
  4. 4. Allineamento ed Espansione (1)  Allineamento: controlla l'allineamento come una vista viene posizionata all'interno del layout del padre quando il layout del padre contiene spazio inutilizzato (vale a dire, il layout del padre è maggiore della dimensione combinata di tutti gli elementi figlio).  Espansione: indica se la visualizzazione deve utilizzare lo spazio aggiuntivo, se disponibile (usato solo all’interno di uno StackLayout).  Tutti componenti grafici di xamarin. Forms ha proprietà HorizontalOptions e VerticalOptions, di tipo LayoutOptions che determina l’allineamento ed espansione.
  5. 5. Allineamento ed Espansione (2)  LayoutOptions può assumere i valori:  Il Start, Center, End, e Fill campi vengono usati per definire l'allineamento  StartAndExpand, CenterAndExpand, EndAndExpand, e FillAndExpand per definire allineamento ed espansione  La proprietà VerticalOptions definisce allineamento e estensione verticale di una View  La proprietà HorizontalOptions definisce allineamento e estensione orizzontale di una View
  6. 6. Allineamento ed Espansione (3)  Start posiziona la View sul lato sinistro del layout padre e per l'allineamento verticale, posiziona la View all'inizio del layout padre  Center centra orizzontalmente o verticalmente la View  End posiziona la View sul lato destro di layout padre e per l'allineamento verticale, posiziona la View nella parte inferiore del layout padre  Fill assicura che il View riempa la larghezza del layout padre e per l'allineamento verticale, che assicura la View riempa in altezza del layout padre.
  7. 7. Allineamento ed Espansione (4)  Per implementare espasione viene aggiunto ai questi precedenti “andExpand”  Questo va a dire che se alla View figlio venisse aggiunto del contenuto questo continuerebbe ad aumentare il suo spazio se disponibile
  8. 8. Allineamento ed Espansione (5) <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="AppOrientation.MainPage"> <StackLayout Margin="0,20,0,0"> <Label Text="Start" BackgroundColor="Green" HorizontalOptions="Start" FontSize="24"/> <Label Text="Center" BackgroundColor="Yellow" HorizontalOptions="Center" FontSize="24"/> <Label Text="End" BackgroundColor="Orange" HorizontalOptions="End" FontSize="24"/> <Label Text="Fill" BackgroundColor="LightBlue" HorizontalOptions="Fill" FontSize="24"/> </StackLayout> </ContentPage>
  9. 9. Allineamento ed Espansione (6)
  10. 10. StackLayout (1)  Lo StackLayout viene utilizzato per mostrare View lungo una riga orizzontale o verticale  StackLayout viene spesso utilizzato come il layout di base, la disposizione di altri layout sullo schermo
  11. 11. StackLayout (2)  Per un esempio di quando StackLayout potrebbe essere una buona scelta, prendere in considerazione un'app che è necessario visualizzare un pulsante e un'etichetta con l'etichetta allineata a sinistra e il pulsante allineato a destra. <StackLayout Orientation="Horizontal"> <Label HorizontalOptions="StartAndExpand" Text="Label" /> <Button HorizontalOptions="End" Text="Button" /> </StackLayout>
  12. 12. AbsoluteLayout (1)  Viene utilizzato per mostrare View, con dimensioni e posizioni date mediante valori assoluti o relativi alle dimensioni del layout  A differenza di StackLayout e Grid, AbsoluteLayout consente che View al suo interno si sovrappongano.
  13. 13. AbsoluteLayout (2)  La specifica i valori delle dimensioni della view figlio avviene tramite:  X posizione x (orizzontale) del punto di ancoraggio della view figlio  Y la posizione y (verticale) del punto di ancoraggio della view figlio  width la larghezza della view figlio  height l'altezza della view figlio  Questi quattro valori possono essere impostati come una proporzione o con un valore relativo  Questi vengono impostati tramite la property LayoutBounds di tipo Rectangle, che si inizializza con la sequenza x, y, width, height.
  14. 14. AbsoluteLayout (3)  AbsoluteLayoutFlags specifica la modalità di interpretazione dei valori, e può essere  None tutti i valori sono assoluti espressi in px (valore di default)  All tutti i valori sono proporzionali  WidthProportional solo la larghezza è proporzionale  HeightProportional solo l’altezza è proporzionale  Xproportional solo la pozione X è proporzionale  Yproportional solo la pozione Y è proporzionale  PositionProportional le coordinate X e Y sono in proporzione  SizeProportional sia larghezza che altezza sono date in proporzione
  15. 15. AbsoluteLayout (4)  Valori proporzionali definiscono un valore di una proporzione di una view figlio rispetto al padre, con valori espressi come un double compreso tra 0 e 1 <Label Text="I'm bottom center on every device." AbsoluteLayout.LayoutBounds=".5,1,.5,.1" AbsoluteLayout.LayoutFlags="All" />
  16. 16. AbsoluteLayout (5) <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:AppOrientation" x:Class="AppOrientation.MainPage"> <AbsoluteLayout> <Label Text="I'm centered on iPhone 4 but no other device" AbsoluteLayout.LayoutBounds="115,150,100,100" LineBreakMode="WordWrap" /> <Label Text="I'm bottom center on every device." AbsoluteLayout.LayoutBounds=".5,1,.5,.1" AbsoluteLayout.LayoutFlags="All" LineBreakMode="WordWrap" /> <BoxView Color="Olive" AbsoluteLayout.LayoutBounds="1,.5, 25, 100" AbsoluteLayout.LayoutFlags="PositionProportional" /> <BoxView Color="Red" AbsoluteLayout.LayoutBounds="0,.5,25,100" AbsoluteLayout.LayoutFlags="PositionProportional" /> <BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,100,25" AbsoluteLayout.LayoutFlags="PositionProportional" /> </AbsoluteLayout> </ContentPage>
  17. 17. AbsoluteLayout (6)
  18. 18. RelativeLayout (1)  RelativeLayout viene utilizzato per predisporre view, con dimensione e posizione specificadoli rispetto ai valori del layout che le contiene o rispetto ad altre view in esso contenute  Il posizionamento di view all’interno di un RelativeLayout avviene per mezzo di una ConstraintExpression
  19. 19.  Il relative layout ha delle property dedicate a cui associare ConstraintExpression che sono  Xconstraint  Yconstraint  WidthConstraint  HieghtContraint
  20. 20. RelativeLayout (2)  ConstraintExpression contiene le seguenti property  Type indica se il vincolo è riferito all’elemento padre o a un’altra view es. Type=RelativeToParent  Property indica il nome della property su cui il ConstraintExpression si basa es. Type=Width  Factor il fattore da applicare al valore della property es. Factor=0.5  Constant è un offset da applicare al valore es. Constant=100  ElementName è il nome della view con la quale viene impostata la relazione
  21. 21. RelativeLayout (3) <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="AppOrientation.MainPage"> <RelativeLayout> <BoxView x:Name="boxView" Color="Green" WidthRequest="50" HeightRequest="50" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width,Factor=0.5,Constant=-25}" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height,Factor=0.5,Constant=-25}"/> <BoxView x:Name="boxView2" WidthRequest="50" HeightRequest="50" Color="Fuchsia" RelativeLayout.XConstraint="{ConstraintExpression ElementName=boxView, Type=RelativeToView, Constant=-100,Property=X}" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,ElementName=boxView, Property=Y, Constant=0}" /> <BoxView x:Name="boxView3" WidthRequest="50" HeightRequest="50" Color="Blue" RelativeLayout.XConstraint= "{ConstraintExpression ElementName=boxView,Type=RelativeToView, Constant=100,Property=X}" RelativeLayout.YConstraint= "{ConstraintExpression Type=RelativeToView, ElementName=boxView, Property=Y, Constant=0}" /> </RelativeLayout> </ContentPage>
  22. 22. RelativeLayout (4)
  23. 23. Grid (1)  Questo layout permette la suddivisione in righe e colonne  Righe e colonne possono avere dimensioni assolute o relative  Può essere usato per disporre le viste in una griglia, per esempio:  Disposizione di pulsanti in un'app calcolatrice
  24. 24. Grid (2)  A differenza delle tabelle tradizionali, Grid non deduce il numero e dimensioni delle righe e colonne dal contenuto  Grid al suo interno possiede le collections RowDefinitions e ColumnDefinitions che contengono le informazioni su quante righe e colonne verranno mostrate.  Le property RowDefinitions e ColumnDefinitions contengono rispettivamente oggetti di tipo RowDefinition che dispone di una singola proprietà height e ColumnDefinition un singola proprietà width. Width ed Height sono di tipo GridUnitType
  25. 25. Grid (3)  GridUnitType può assumere valore  Auto dimensione automatica in base al contenuto della riga o colonna. Specificato con GridUnitType.Auto in C# o come Auto in XAML  Proportional dimensioni di righe e colonne sono impostate con una proporzione utilizzando lo spazio rimanente. In C# tramite GridUnitType.Star e in XAML come #* (dove # è un numero). Se viene impostato solamente * verrà riempito lo spazio rimanente  Assoluto un valore in pixel
  26. 26. Grid Definition Es.(1)  Esempio, si consideri un'applicazione che richieda tre righe e due colonne con le seguenti caratteristiche.  La riga inferiore deve essere esattamente 200px  La riga superiore deve essere due volte la stessa altezza alla riga centrale.  Nella colonna sinistra deve adattarsi al contenuto  La colonna a destra deve riempire lo spazio rimanente.
  27. 27. Grid Definition Es. (2) <Grid> <Grid.RowDefinitions> <RowDefinition Height="2*" /> <RowDefinition Height="*" /> <RowDefinition Height="200" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> </Grid>
  28. 28. Elementi Grid  Per aggiungere view alla Grid è necessario aggiungerli come elementi figlio usando Grid.Row e Grid.Column per specificare il posizionamento
  29. 29. Grid Sample (1) <Grid> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Label Text="Top Left" Grid.Row="0" Grid.Column="0" /> <Label Text="Top Right" Grid.Row="0" Grid.Column="1" /> <Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" /> <Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" /> </Grid>
  30. 30. Grid Sample (2)
  31. 31. ListView  La ListView è un view usata per presentare una lista di dati usando layout custom  L’oggetto ListView viene popolato con dati tramite la property ItemsSource utilizzando una collection che implementi Ienurable  L’aspetto di ogni elemento dell’elenco può essere impostato tramite la property ItemTemplate di tipo DataTemplate
  32. 32. ListView XAML e Code Behid <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="AppOrientation.MainPage"> <ListView x:Name="teams"/> </ContentPage>
  33. 33. ListView XAML e Code Behid (2) using System.ComponentModel; using Xamarin.Forms; namespace AppOrientation { [DesignTimeVisible(true)] public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); teams.ItemsSource = new string[]{ "Juventus", "Milan", "Inter", "Napoli", "Roma" }; } } }
  34. 34. Display Post (1)  Requisiti  Package Manager Console → Install-Package Newtonsoft.Json  Android Mainifest → Required permission Internet
  35. 35. Display Post (2) Post Model using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Text; namespace DisplayPostListView.Model { public class Post { [JsonProperty("title")] public string Title { get; set; } [JsonProperty("userId")] public int UserId { get; set; } [JsonProperty("id")] public int Id { get; set; } [JsonProperty("body")] public string Body { get; set; } public string ImageUrl { get; set; } } } [ { "userId": 1, "id": 1, "title": "sunt aut facere repellat provident occaecati ….t, "body": "quia et suscipitnsuscipit recusandae consequunt……." }, //other posts ] MODEL JSON
  36. 36. Display Post (3) BaseViewModel public class BaseViewModel : INotifyPropertyChanged { protected bool SetProperty<T>(ref T backingStore, T value, [CallerMemberName]string propertyName = "", Action onChanged = null) { if (EqualityComparer<T>.Default.Equals(backingStore, value)) return false; backingStore = value; onChanged?.Invoke(); OnPropertyChanged(propertyName); return true; } #region INotifyPropertyChanged public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChanged([CallerMemberName] string propertyName = "") { var changed = PropertyChanged; if (changed == null) return; changed.Invoke(this, new PropertyChangedEventArgs(propertyName)); } #endregion }
  37. 37. Display Post (4) ItemListViewModel public class ItemListViewModel : BaseViewModel { public ObservableCollection<Post> Posts { get; set; } public ItemListViewModel() { this.Posts = new ObservableCollection<Post>(); } public async Task UpdatePostsAsync() { var newPosts = await JsonPlaceholderHelper.GetPostsAsync(); this.Posts.Clear(); newPosts.ForEach((post) => { post.ImageUrl = "https://picsum.photos/70/?image=" + newPosts.IndexOf(post); this.Posts.Add(post); }); } }
  38. 38. Display Post (5) JsonPlaceholderHelper public static class JsonPlaceholderHelper { const string BASE_URL = "https://jsonplaceholder.typicode.com/"; const string POST_ENDPOINT = "posts"; public static async Task<List<Post>> GetPostsAsync() { using (var httpClient = new HttpClient()) { var jsonString = await httpClient.GetStringAsync(BASE_URL + POST_ENDPOINT); var posts = JsonConvert.DeserializeObject<List<Post>>(jsonString); return posts; } } }
  39. 39. Display Post (6) XAML <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:DisplayPostListView" x:Class="DisplayPostListView.MainPage"> <ListView ItemsSource="{Binding Posts}" VerticalOptions="FillAndExpand" CachingStrategy="RecycleElement"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout Padding="5,0,5,0" HorizontalOptions="StartAndExpand" Orientation="Horizontal"> <Image Source="{Binding ImageUrl}" WidthRequest="50" HeightRequest="50" /> <Label Text="{Binding Title}" VerticalTextAlignment="Center" FontSize="Small" /> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </ContentPage>
  40. 40. Display Post (7) Code Behind public partial class MainPage : ContentPage { ItemListViewModel itemListViewModel; public MainPage() { InitializeComponent(); itemListViewModel = new ItemListViewModel(); BindingContext = itemListViewModel; } protected override async void OnAppearing() { base.OnAppearing(); await itemListViewModel.UpdatePostsAsync(); } }
  41. 41. Display Post (8) BindingContext  Il BindingContext dice quale struttura ViewModel viene usata come binding con oggetti che compongono l’interfaccia XAML
  42. 42. Display Post (9)
  43. 43. Navigazione (1)  Xamarin.Forms offre diverse tipologie di navigazione  Navigazione gerarchica questa sfrutta la classe “NavigatonPage” che permette l’utente si scorrere le pagine avanti e indietro in base alle sue esigenze (Navigazione LIFO)  Tabbed Page è costituita da un elenco di schede (Tab) che impostano un’area di dettaglio  Carousel Page è costituita da un elenco di pagine che si possono scorrere trascinando un dito sullo schermo  Master Detail Page gestisce la navigazione tramite un menù verticale a comparsa che imposta la pagina da visualizzare come contenuto principale  Pagine Modali una pagina modale richiede agli utenti il completamento di un'attività indipendente, dalla quale non è possibile spostarsi fino a quando non viene completata o annullata  Pop Up xamarin.forms permette due tipi di popup  Alert che avvisano l’utente  Action sheet che gestiscono una domanda e risposta rivolta all’utent
  44. 44. Navigazione (2)
  45. 45. Navigazione gerarchica (1)  La classe NavigationPage offre un'esperienza di navigazione gerarchica in cui l'utente è in grado di scorrere le pagine avanti e indietro in base alle esigenze. La classe implementa la navigazione come stack LIFO (Last-In, First-Out) di oggetti Pagina. Questo articolo illustra come usare la classe NavigationPage per eseguire la navigazione in uno stack di pagine.
  46. 46. Navigazione gerarchica (2)  Per passare da una pagina all'altra, un'applicazione esegue il push di una nuova pagina nello stack di navigazione, in cui diventa la pagina attiva, come illustrato nel diagramma seguente
  47. 47. Navigazione gerarchica (3)  Per passare da una pagina all'altra, un'applicazione esegue il push di una nuova pagina nello stack di navigazione, in cui diventa la pagina attiva, come illustrato nel diagramma seguente
  48. 48. Es. Navigazione gerarchica (1)  In App.xaml.cs la main page deve essere di tipo NavigationPage public partial class App : Application { public App() { InitializeComponent(); MainPage = new NavigationPage(new MainPage()); } }
  49. 49. Es. Navigazione Gerarchica (2)  Dalla main page aggiungo un pulsante che porta all next page <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:AppNav2" x:Class="AppNav2.MainPage"> <Button x:Name="btn" Text="Next Page" Clicked="btn_Clicked"></Button> </ContentPage> public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); } private async void btn_Clicked(object sender, EventArgs e) { await Navigation.PushAsync(new NextPage()); } } XAML CODE BEHIND
  50. 50. Es. Navigazione Gerarchica (3)  Dalla next page aggiunto un pulsante che porta alla main page <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="AppNav2.NextPage"> <Button x:Name="Back" Clicked="Back_Clicked" Text="Back"></Button> </ContentPage> public partial class NextPage : ContentPage { public NextPage() { InitializeComponent(); } private async void Back_Clicked(object sender, EventArgs e) { await Navigation.PopAsync(); } } XAML CODE BEHIND
  51. 51. Es. Navigazione Gerarchica (4)
  52. 52. Master Detail Page (1)  Gestisce la navigazione tramite un menù verticale ache imposta la pagina da visualizzare come contenuto principale  Una MasterDetailPage contiene proprietà Master e Detail, entrambe di tipo Page, usate per ottenere e impostare rispettivamente le pagine master e di dettaglio
  53. 53. Master Detail Page (2)  Una MasterDetailPage è un tipo di pagina che che contiene sia le informazioni sulla pagina master che fa da menu che le informazioni sul dettaglio  Il nodo Master contiene il menu e le informazioni visibili da ognuna delle details page  Il nodo Detail contiene le pagine di dettaglio  Master deve sempre essere un'istanza di ContentPage e Detail deve essere popolata solo con le istanze TabbedPage, NavigationPage e ContentPage. Ciò contribuirà a garantire un'esperienza utente coerente su tutte le piattaforme.
  54. 54. Es. Master Detail Page (1)  Questo esempio mostra un master detail page con tre pagine  ContactPage  TodoListPage  RemiderPage  Requisiti  Salvare nel progetto android in Resources/drawable le icone menu contacts.png, todo.png, reminders.png, hamburger.png
  55. 55. Es. Master Detail Page (2)  Creare le tre pagine xaml e c# ConatactPagel, RemiderPage e TodolistPagel, es. <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="AppMasterDetailSimple.ReminderPage"> <ContentPage.Content> <StackLayout> <Label Text="Here goes my reminders" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" /> </StackLayout> </ContentPage.Content> </ContentPage> public partial class ReminderPage : ContentPage { public ReminderPage() { InitializeComponent(); } } .XAML .XAML.cs
  56. 56. Es. Master Detail Page (3)  Creare una classe MasterPageItem che conterrà i dati riguardanti l’ennesimo elemento del menu public class MasterPageItem { public string Title { get; set; } public string IconSource { get; set; } public Type TargetType { get; set; } }
  57. 57. Es. Master Detail Page (4) MasterPage.xaml <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="AppMasterDetailSimple.MasterPage" xmlns:local="clr-namespace:AppMasterDetailSimple" Padding="0,40,0,0" Icon="hamburger.png" Title="Personal Organiser"> <StackLayout> <ListView x:Name="listView" x:FieldModifier="public" BackgroundColor="Aqua"> <ListView.ItemsSource> <x:Array Type="{x:Type local:MasterPageItem}"> <local:MasterPageItem Title="Contacts" IconSource="contacts.png" TargetType="{x:Type local:ContactsPage}" /> <local:MasterPageItem Title="TodoList" IconSource="todo.png" TargetType="{x:Type local:TodoListPage}" /> <local:MasterPageItem Title="Reminders" IconSource="reminders.png" TargetType="{x:Type local:ReminderPage}" /> </x:Array> </ListView.ItemsSource> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <Grid Padding="5,10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="30"/> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Source="{Binding IconSource}" /> <Label Grid.Column="1" Text="{Binding Title}" /> </Grid> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </StackLayout>
  58. 58. Es. Master Detail Page (5) MainPage.xaml <MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:AppMasterDetailSimple" x:Class="AppMasterDetailSimple.MainPage"> <MasterDetailPage.Master> <local:MasterPage x:Name="masterPage" /> </MasterDetailPage.Master> <MasterDetailPage.Detail> <NavigationPage> <x:Arguments> <local:ContactsPage /> </x:Arguments> </NavigationPage> </MasterDetailPage.Detail> </MasterDetailPage>
  59. 59. Es. Master Detail Page (6) MainPage.xaml.cs public partial class MainPage : MasterDetailPage { public MainPage() { InitializeComponent(); masterPage.listView.ItemSelected += OnItemSelected; } void OnItemSelected(object sender, SelectedItemChangedEventArgs e) { var item = e.SelectedItem as MasterPageItem; if (item != null) { Detail = new NavigationPage((Page)Activator.CreateInstance(item.TargetType)); masterPage.listView.SelectedItem = null; IsPresented = false; } } }
  60. 60. Es. Master Detail Page (7) App.xaml.cs public partial class App : Application { public App() { InitializeComponent(); MainPage = new MainPage(); } }
  61. 61. Es. Master Detail Page (8)
  62. 62. TabbedPage  La TabbedPage è costituita da un elenco di schede (Tab) che impostano un’area di dettaglio  Il modo più semplice di implementare una tabbed page è di elencare le pagine utilizzate come dettaglio ed i rispettivi titoli nel nodo TabbedPage.Children
  63. 63. Es. TabbedPage (1)  Creo due pagine HomePage e BrowsePage <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="AppTabbedPage.HomePage"> <ContentPage.Content> <StackLayout> <Label Text="Welcome to the home page!" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" /> </StackLayout> </ContentPage.Content> </ContentPage> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="AppTabbedPage.BrowsePage"> <ContentPage.Content> <StackLayout> <Label Text="Welcome to the browse page!" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" /> </StackLayout> </ContentPage.Content> </ContentPage>
  64. 64. Es. TabbedPage (2)  Vado a elencare le pagine ed i rispettivi titoli nella MainPage come segue <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:AppTabbedPage" x:Class="AppTabbedPage.MainPage"> <TabbedPage.Children> <local:HomePage Title="Home"/> <local:BrowsePage Title="Browse"/> </TabbedPage.Children> </TabbedPage> public partial class MainPage : TabbedPage { public MainPage() { InitializeComponent(); } } MainPage.xam l MainPage.xaml.c s
  65. 65. Es. TabbedPage (3)
  66. 66. CarouselPage  è costituita da un elenco di pagine che si possono scorrere trascinando un dito sullo schermo  Si può costruire elencando più nodi ContentPage quante sono le pagine da realizzare oppure aggiunger un reference come visto tabbedpage (<local:Anypagename/> )
  67. 67. Es CarouselPage (1) <CarouselPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:AppCarousel" x:Class="AppCarousel.MainPage"> <ContentPage> <StackLayout> <Label Text="This is a CarouselPage, you can swipe left and right to browse through additional pages." Margin="5" /> <Label Text="Red" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" Margin="5" /> <BoxView Color="Red" VerticalOptions="FillAndExpand" /> </StackLayout> </ContentPage> <ContentPage> <StackLayout> <Label Text="Green" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" Margin="5" /> <BoxView Color="Green" VerticalOptions="FillAndExpand" /> </StackLayout> </ContentPage> <ContentPage> <StackLayout> <Label Text="Blue" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" Margin="5" /> <BoxView Color="Blue" VerticalOptions="FillAndExpand" /> </StackLayout> </ContentPage> </CarouselPage>
  68. 68. Es CarouselPage (2) public partial class MainPage : CarouselPage { public MainPage() { InitializeComponent(); } }
  69. 69. Es CarouselPage (3)
  70. 70. Pagine Modali  Una pagina modale richiede agli utenti il completamento di un'attività indipendente, dalla quale non è possibile spostarsi fino a quando non viene completata o annullata  La pagine modali sono delle NavigationPage e utilizzano lo stesso metodo della navigazione gerarchica  Per aprire una pagina modale userò la seguente forma Navigation.PushModalAsync (new MyModalPage()));  Per chiudere la pagina modale usero la seguente istruzione  await Navigation.PopModalAsync ();
  71. 71. Pop Up alert (1)  DisplayAlert ("Alert", "You have been alerted", "OK");
  72. 72. Pop Up alert (2)  bool answer = await DisplayAlert ("Question?", "Would you like to play a game", "Yes", "No");
  73. 73. Pop Up alert (3)  string action = await DisplayActionSheet ("ActionSheet: Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
  74. 74. Orientamento del device  Importante considerare come device verrà usato landscape o potrait  I layout possono essere progettati per supportare diversi orientamenti usando lo spazio nel migliore dei modi  A livello di applicazione la rotazione può essere abilitata o disabilitata
  75. 75. Controllo dell’orientamento (1)  I controllo dell’orientamento viene definito al liverllo di progetto Android o iOS  iOS sono questi impostazione sono memorizzate in un file info.plist che può essere ediato tramite IDE
  76. 76. Controllo dell’orientamento (2)  In android il controllo dell’orientamento definito all’interno di MainActivity [Activity(Label = "AppOrientation", Icon = "@mipmap/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation,ScreenOrientation = ScreenOrientation.Landscape)] public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity {
  77. 77. Xamarin.Android orientation options  Landscape forza l'orientamento dell'applicazione in landscape, indipendentemente dai dati del sensore.  Portrait forza l'orientamento dell'applicazionea essere protrait , indipendentemente daidati del sensore.  User fa sì che l'applicazione venga presentata utilizzando l'orientamento preferito dell'utente tramite impostazionidel dispositivo  Behind fa sì che l'orientamento dell'applicazionesia lo stesso dell'orientamento dell'actvity.  Sensor l'orientamento dell'applicazioneè dato dal sensore, anche se l'utente ha disabilitatola rotazione automatica.  SensorLandscape l'orientamento dell'applicazione è dato dal sensore e fa sì che che quando lo schermo sia ruotato in landscape i contenuti non vengano mai capovolti.  SensorPortrait l'orientamento dell'applicazione è dato dal sensore e fa sì che che quando lo schermo sia ruotato in portrait i contenuti non vengano mai capovolti.  ReverseLandscape fa sì che quando lo schermosia ruotato in landscape i contenuti vengano capovolti.  ReversePortrait fa sì che quandolo schermo sia ruotato in portrait i contenuti vengano capovolti.  FullSensor l'orientamento dell'applicazione è dato dal sensore e fa sì che che quando lo schermosia ruotato in landscape o in potrait i contenuti nonvengano mai capovolti.  FullUser l'orientamento dell'applicazione è dato dalle preferenze dell’utente e fa sì che che quando loschermo sia ruotato in landscapeo in potrait i contenutinon vengano mai capovolti.
  78. 78. Evento cambio orientamento (1)  Xamarin.Forms non offre eventi nello shared code che indichino il cambiamento di orientamento  Alternativamente è possibile implementare un override del metodo OnSizeAllocated della classe Page inserendo la logica conseguente al cambiamento di layout  Il metodo OnSizeAllocated viene chiamato ogni qualvolta che alla pagina viene assegnata una nuova dimensione
  79. 79. Evento cambio orientamento (2) private double width = 0; private double height = 0; protected override void OnSizeAllocated(double width, double height) { base.OnSizeAllocated(width, height); //deve essere chiamato if (this.width != width || this.height != height) { this.width = width; this.height = height; //qui posso eseguire istruzioni per reagire al //cambiamento di orientamento } }
  80. 80. Evento cambio orientamento (3)  Prestare attenzione ai rapporti: i cambiamenti di orientamento possono causare problemi quando vengono inserite dimensioni in rapporto. Ad esempio, una vista che avrebbe molto spazio con 1/3 dello spazio verticale di uno schermo in portrait potrebbe non adattarsi a 1/3 dello spazio verticale in landscape.  Fai attenzione ai valori assoluti - i valori assoluti (pixel) che hanno senso nel portrait potrebbero non avere senso landscape
  81. 81. Es. Controllo layout al cambiamento di orientamento (1)  Nel progetto android  Impostare ScreenOrientation = ScreenOrientation.FullSensor  Salvare nella cartella Resources/drawble l’immagine lion.png
  82. 82. Es. Controllo layout al cambiamento di orientamento (2) <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="AppOrientation.MainPage"> <StackLayout Spacing="10" Padding="5" Orientation="Vertical" x:Name="outerStack"> <ScrollView> <StackLayout Spacing="5" HorizontalOptions="FillAndExpand" WidthRequest="1000"> <StackLayout Orientation="Horizontal"> <Label Text="Name: " WidthRequest="75" HorizontalOptions="Start" /> <Entry Text="lion.jpg" HorizontalOptions="FillAndExpand" /> </StackLayout> <StackLayout Orientation="Horizontal"> <Label Text="Date: " WidthRequest="75" HorizontalOptions="Start" /> <Entry Text="07/05/2015" HorizontalOptions="FillAndExpand" /> </StackLayout> <StackLayout Orientation="Horizontal"> <Label Text="Tags:" WidthRequest="75" HorizontalOptions="Start" /> <Entry Text="lion, animal" HorizontalOptions="FillAndExpand" /> </StackLayout> <StackLayout Orientation="Horizontal"> <Button Text="Save" HorizontalOptions="FillAndExpand" /> </StackLayout> </StackLayout> </ScrollView> <Image Source="lion.jpg" /> </StackLayout> </ContentPage>
  83. 83. Es. Controllo layout al cambiamento di orientamento (3) public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); } private double width = 0; private double height = 0; protected override void OnSizeAllocated(double width, double height) { base.OnSizeAllocated(width, height); //must be called if (width != this.width || height != this.height) { this.width = width; this.height = height; if (width > height) { outerStack.Orientation = StackOrientation.Horizontal; } else { outerStack.Orientation = StackOrientation.Vertical; } } } }
  84. 84. Es. Controllo layout al cambiamento di orientamento (4)  outerStack viene regolato per presentare l'immagine e i controlli nello StackLayout orizzontale o verticale a seconda dell'orientamento, per sfruttare al meglio lo spazio disponibile.
  85. 85. Es. Controllo layout al cambiamento di orientamento (5)
  86. 86. WebView  La WebView è un view dedicata a mostrare contenuti HTML nelle app  Le WebView supportano seguenti contenuti  HTML & CSS websites: le webview hanno il supporto completo per HTML e CSS, mentre un supporto limitato per il javascript  Documenti: visualizzazione di documenti  HTML strings: le web view possono mostrare stringhe html caricate dalla memoria  Local Files: le WebView possono mostrare ogni contenuto embedded delle nostre app
  87. 87. HTML & CSS websites  Per visualizzare un sito Web da Internet, impostare la proprietà Source di WebView con una URL
  88. 88. Es. HTML & CSS websites public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); var browser = new WebView(); browser.Source = "http://xamarin.com"; Content = browser; } }
  89. 89. HTML strings  Se si vuole presentare una stringa di HTML definita dinamicamente nel codice, sarà necessario creare un'istanza di HtmlWebViewSource e impostare la stringa html come valore della property html
  90. 90. Es . HTML strings public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); var browser = new WebView(); var htmlSource = new HtmlWebViewSource(); htmlSource.Html = @"<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>"; browser.Source = htmlSource; Content = browser; } }
  91. 91. Es. Local HTML Content (1)  salvare nella cartella Assets l’immagine XamarinLogo.png  salvare nella cartella Assets il file default.css e local.html come segue html, body { margin: 0; padding: 10; } body, p, h1 { font-family: Arial; font-size:20px; font-weight:bold; } <html> <head> <title>Xamarin Forms</title> </head> <body> <h1>Xamrin.Forms</h1> <p>This is another android local web page.</p> <img src="XamarinLogo.png" /> </body> </html>
  92. 92. Es. Local HTML Content (2)  Nel progetto PCL aggiungere l’interfaccia IBaseUrl e nel progetto Android la sua implementazione public interface IBaseUrl { string Get(); } using Xamarin.Forms; using AppLocalHtmlContent.Droid; [assembly: Dependency(typeof(BaseUrl_Android))] namespace AppLocalHtmlContent.Droid { public class BaseUrl_Android : IBaseUrl { public string Get() { return "file:///android_asset/"; } } } IBaseUrl.c s BaseUrl_Android.c s
  93. 93. Es. Local HTML Content (3)  Nel progetto PCL impostare la MainPage.cs.xml come segue public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); var browser = new WebView(); var htmlSource = new HtmlWebViewSource(); htmlSource.Html = @"<html> <head> <link rel=""stylesheet"" href=""default.css""> </head> <body> <h1>Xamarin.Forms</h1> <p>The CSS and image are loaded from local files!</p> <img src='XamarinLogo.png'/> <p><a href=""local.html"">next page</a></p> </body> </html>"; htmlSource.BaseUrl = DependencyService.Get<IBaseUrl>().Get(); browser.Source = htmlSource; Content = browser; }
  94. 94. Es. Local HTML Content (3)
  95. 95. Dependency Service (1)  Visto che abbiamo BaseUrl diverse per ogni piattaforma dobbiamo utilizzare DependencyService  DependencyService serve sopratutto quando abbiamo delle parti di applicazione fortemente dipendenti della piattaforma  Si definisce l’interfaccia nel PCL es. IBaseUrl e la si va ad implementare nel progetto della piattaforma specifico es. BaseUrl_Android
  96. 96. Dependency Service (2)  Le registrazione dell’interfaccia avviene tramite decoration [assembly: Dependency(typeof(nome_classe))]  es. [assembly: Dependency(typeof(BaseUrl_Android))]  La richiesta di un’instanza della classe implementata avviene tramite metodo Get  DependencyService.Get<nome_interfaccia>().Get()  es. DependencyService.Get<IBaseUrl>().Get();  A runtime a seconda della piattaforma verrà cercata la classe che implementa l’interfaccia desiderata

×