+ Componenti base: Manifest, App e Pages Nicolò Sordoni

+ Il file manifest

+ Come avviene in Android, in ogni applicazione WP è presente un file manifest, con estensione appxmanifest, che ci permette di specificare informazioni, permessi e requisiti relativi alla nostra applicazione. E’ presente un editor visuale per la sua compilazione ed è suddiviso nelle seguenti categorie: Application: Permette di specificare informazioni di carattere generale, fra cui: Il nome che verrà visualizzato sul device Descrizione e lingua di default Orientamenti supportati (portrait / landscape) Gestione delle notifiche Visual Assets: immagini e risorse relative al look&feel dell’app, fra cui il logo, la splash screen e informazioni relative alla tile

+ Il file manifest Requirements: Ci permette di specificare dei vincoli ai device che potranno eseguire la nostra applicazione. Ad esempio possiamo impedire l’installazione dell’app in dispositivi che non possiedono un reader NFC. Capabilities: Indica quali permessi richiede l’applicazione al sistema, fra cui l’accesso ad Internet, ai contatti o alla fotocamera. Questo per far sì che l’utente sia sempre informato riguardo ai permessi concessi alle applicazioni che installa. Declarations: Permette di indicare particolari feature che la nostra applicazione utilizzerà, come ad esempio tasks in background, accesso a particolari aree di archiviazione, ecc... Packaging: informazioni relative al versioning e alla pubblicazione dell’applicazione

+ La classe App In ogni progetto troveremo inoltre una classe, denominata App, che rappresenta l’istanza della nostra applicazione correntemente in esecuzione nel device. Ci permette di ridefinire il comportamento dell’applicazione, per gestire in maniera personalizzata alcune situazioni particolari della vita dell’applicazione, fra cui il primo avvio, la sospensione, ecc.. E’ un Singleton, accessibile attraverso la proprietà App.Current. E’ il file ideale in cui inserire quelle risorse che devono essere condivise fra tutte le pagine dell’applicazione.

+ La struttura delle Pagine Ogni schermata dell’applicazione estende la classe base Page e viene solitamente suddivisa in 2 file: File di layout : Un file con di tipo XAML, denominato NomePagina.xaml, che permette di specificare il look&feel della nostra pagina. Visual Studio ci mette a disposizione un editor visuale per il posizionamento degli elementi sullo schermo, ma è anche possibile lavorare direttamente sul codice XML. File di codice : Un file C#, denominato NomePagina.xaml.cs, all’interno della quale specificheremo la logica dell’applicazione. All’interno di questo file avremo accesso diretto ad ognuno degli elementi grafici definiti nel file xaml.

+ XAML L’XAML è un estensione dell’XML sviluppato da Microsoft appositamente per la gestione delle interfacce delle proprie applicazioni. Visual Studio, come Android Studio, ci consente di editare le informazioni sia lavorando direttamente sul codice XAML, che tramite un editor visuale (oltre ovviamente alla possibilità di utilizzare il codice C#). L’utilizzo dell’XML è molto utile nella realizzazione di interfacce, dato che permette di sfruttare la struttura ad albero del linguaggio, per definire in maniera semplice le relazioni esistenti fra contenitori, che permettono di determinare come organizzare i controlli, e contenuto, che presenterà all’utente l’informazione vera e propria

+ L’XAML è un estensione dell’XML sviluppato da Microsoft appositamente per la gestione delle interfacce delle proprie applicazioni. Visual Studio, come Android Studio, ci consente di editare le informazioni sia lavorando direttamente sul codice XAML, che tramite un editor visuale (oltre ovviamente alla possibilità di utilizzare il codice C#).

+ XAML : sintassi Per inserire un controllo all’interno di una pagina XAML è sufficiente trascinarlo dalla Toolbox, oppure digitarlo da tastiera (è sufficiente digitare la parentesi angolare aperta per avviare automaticamente l’Intellisense). Ad esempio, per inserire un bottone, è sufficiente utilizzare il seguente nodo. E’ inoltre possibile assegnare ad ogni controllo le specifiche proprietà, ad esempio:

+ XAML : sintassi Per assegnare una proprietà ad un oggetto è possibile utilizzare una sintassi differente che, essendo molto verbosa, è consigliabile solamente quando è necessario. Tale sintassi, che fa uso di nodi innestati, è molto utile in presenza di proprietà complesse, ma controproducente per l’inserimento di valori semplici. Lo stesso valore può essere modificato da editor, selezionando il controllo e editando la relativa proprietà

+ XAML : pagine E’ bene ricordare che ogni pagina XAML può contenere solamente un root control, quindi, per inserire più controlli nella stessa pagina, è indispensabile utilizzare degli opportuni containers Per inserire una nuova pagina all’interno del progetto, è necessario aprire il Solution Explorer ed effettuare un click con il tasto destro sul progetto. Nella finestra che appare selezionare Add → New item. Dalla nuova finestra che apparirà, selezionare Blank Page, inserendo in basso il nome della nuova pagina.

+ XAML : integrazione con il codice In ogni pagina, è indispensabile la possibilità di recuperare da codice gli elementi visuali (controlli) in essa contenuta. Per poterlo fare è sufficiente assegnare ad essi la proprietà x:Name. A questo punto, in qualsiasi punto del codice sarà possibile accedere al controllo, semplicemente utilizzando il valore appena specificato (per accedere al file contenente il codice è possibile utilizzare il Solution Explorer, oppure fare click con il tasto destro su un punto qualsiasi della pagina e selezionare “View Code”): In questo esempio ci siamo limitati a modificare il valore del testo, utilizzando la proprietà.Text. Ad ogni proprietà che può essere definita all’interno del file XAML, è sempre possibile accedere da codice, utilizzando la sintassi [NomeControllo].[NomeProprietà], sia in lettura che in scrittura.

+ I controlli Nicolò Sordoni

+ Controls Windows Phone ci mette a disposizione una serie di controlli nativi che ci permettono di organizzare il layout delle nostre pagine. Tali controlli possono essere suddivisi in 2 categorie principali: Containers: Sono dei contenitori, che servono per disporre, secondo precise logiche, gli elementi presenti al loro interno. Controlli: sono i controlli veri e propri, cioè dei componenti grafici che permettono di mostrare informazioni all’utente ed interagire con esso.

+ Controls Windows Phone ci mette a disposizione una serie di controlli nativi che ci permettono di organizzare il layout delle nostre pagine. Tali conrolli possono essere suddivisi in 2 categorie principali: Containers: Sono dei contenitori, che servono per disporre, secondo precise logiche, gli elementi presenti al loro interno. Controlli: sono i controlli veri e propri, cioè dei componenti grafici che permettono di mostrare informazioni all’utente ed interagire con esso.

+ Grid La Grid, come indica il nome stesso, è una griglia, che permette di organizzare gli elementi in formato tabellare. E’ necessario specificare il numero e la dimensione di righe e colonne, come nell’esempio seguente: In tale esempio è stata creata una griglia 2x2, contenente due righe e due colonne. Come si può notare sono presenti 3 differenti sintassi per specificare le dimensioni.

+ Grid Per indicare le dimensioni di righe e colonne, abbiamo le seguenti 3 scelte: Auto: La dimensione dipende dagli elementi contenuti all’interno della griglia. La dimensione effettiva corrisponderà a quella dell’oggetto più “grande” contenuto. Pixel: Si specifica l’esatto numero di pixel occupati. Gli elementi più grandi saranno ritagliati. Star notation: Permette di adattare le righe/colonne in maniera proporzionale. Il valore non indica la dimensione in percentuale rispetto al contenitore, ma il rapporto fra i vari elementi contenuti. Nell’esempio, al posto di 50* e 10* avremmo potuto scrivere 5* e 1*, mantenendo inalterato il layout

+ Grid Tutti gli elementi che vengono inseriti nella Grid, acquisiscono automaticamente le proprietà Grid.Row e Grid.Column che permettono di indicare in quale riga e colonna inserire l’elemento, e Grid.RowSpan e Grid.ColumnSpan che permette di indicare che una cella debba accorpare più righe o colonne. Nell’esempio che segue abbiamo inserito un TextBlock all’interno della cella in posizione (1,0), indicando però che la cella in cui è contenuto occuperà lo spazio di 2 colonne.

+ RowSpan

+ StackPanel Questo container è molto semplice, dato che si limita a visualizzare gli elementi allineati, orizzontalmente o verticalmente (analogo al LinearLayout). Per allineare gli elementi è sufficiente inserirli al suo interno. DI default essi saranno allineati verticalmente, ma è possibile modificare tale impostazione tramite la proprietà Orientation. L’esempio che segue mostra l’organizzazione di alcuni testi attraverso l’utilizzo di 2 StackPanel, innestati all’interno di un altro

+ StackPanel

+ Canvas Container che permette di disporre gli elementi tramite l’assegnamento di coordinate assolute. Ad ogni elemento è necessario assegnare le proprietà Canvas.Top e Canvas.Left, per posizionarli in base alla distanza rispetto ai margini superiore e sinistro del container. E’ inoltre possibile impostare la proprietà Canvas.ZIndex per determinare quali elementi dovranno essere visualizzati al di sopra. Nell’esempio che segue, il rettangolo ha uno ZIndex maggiore rispetto al textBlock, quindi viene mostrato al di sopra di quest’ultimo. Il testo è comunque visibile, dato che il colore del rettangolo è leggermente trasparente (Alpha channel = D0).

+ Canvas

+ ScrollViewer Tale contenitore serve esclusivamente per far si che contenuti di dimensione maggiore rispetto allo schermo possano essere comunque visualizzati nella loro interezza, abilitando lo scorrimento.

+ Text Block Il Text Block è un componente che permette la visualizzazione di contenuti testuali all’interno delle pagine XAML. Possiede una serie di proprietà per l’impostazione del testo da visualizzare. Le più frequenti sono: Text: Definisce il testo che sarà mostrato all’utente. Foreground: Specifica il colore del testo. FontSize, FontWeight, FontFamily: Impostano il font da utilizzare.

+ Text Block Oltre alla modalità vista in precedenza, che è il caso di utilizzo più comune, è possibile suddividere in parti il testo, per ottenere effetti di visualizzazione differenti all’interno del medesimo controllo. Tale modalità prevede l’utilizzo dei nodi e. Il secondo non è altro che un ritorno a capo, mentre il primo consente di definire una porzione di testo a cui assegnare particolari stili.

+ TextBox Nella quasi totalità delle applicazioni è necessario che l’utente inserisca delle informazioni testuali. Per farlo, nei sistemi Microsoft il controllo predisposto a tale scopo è la TextBox, una casella di testo che consente l’immissione di informazioni da tastiera. Le principali proprietà del controllo sono: PlaceholderText : Informazione testuale utilizzata per indicare all’utente quale informazione dovrà essere inserita nell’area. Text: Testo del controllo. Può essere utilizzato in scrittura per precaricare del testo o in lettura per recuperare la stringa inserita dall’utente. InputScope: Tipo di informazione richiesta (numero di telefono, , ecc). Utile al sistema per presentare all’utente una versione della tastiera ottimizzata per il tipo specifico. Esiste inoltre un ulteriore controllo, denominato PasswordBox, identico alla TextBox, ma mantiene nascosti i caratteri inseriti.

+ TextBox : InputScope Default UrlTelephoneNumber SmtpAddress

+ CheckBox La CheckBox è una casella di selezione che permette all’utente di impostare un valore booleano. Nell’esempio in figura l’utente deve selezionare se è sposato oppure no. Attraverso la proprietà Content è possibile impostare il testo da mostrare a fianco della casella o, in alternativa, è possibile impostare un layout custom. La proprietà isChecked permette da un lato di impostare lo stato iniziale che dovrà avere la casella, e dall’altro di leggere il valore selezionato dall’utente.

+ CheckBox La CheckBox è una casella di selezione che permette all’utente di impostare un valore booleano. Nell’esempio in figura l’utente deve selezionare se è sposato oppure no. Attraverso la proprietà Content è possibile impostare il testo da mostrare a fianco della casella o, in alternativa, è possibile impostare un layout custom. La proprietà isChecked permette da un lato di impostare lo stato iniziale che dovrà avere la casella, e dall’altro di leggere il valore selezionato dall’utente.

+ RadioButton Il RadioButton è utilizzato per permettere all’utente di selezionare un valore all’interno di un elenco di elementi mutuamente esclusivi (uno solo può essere selezionato all’interno dell’elenco). Oltre alle proprietà Content e IsChecked, analoghe a quanto visto per le CheckBox, il RadioButton aggiunge una proprietà importante, cioè il GroupName. Tale proprietà consente di indicare al sistema le CheckBox appartenenti allo stesso gruppo, in maniera che sia Windows a prendersi in carico la gestione della mutua esclusione.

+ Button Il Button è il classico bottone che permette all’utente di effettuare una determinata azione. Tramite la proprietà Content è possibile indicare l’aspetto visuale del bottone. Inserendo semplicemente un testo viene visualizzato il bottone di default del sistema, mentre utilizzando un XAML, anche complesso, possiamo definire uno stile completamente personalizzato. La caratteristica più utilizzata di tale controllo è l’evento Click, che viene lanciato nel momento in cui l’utente effettua un tap sul controllo. Per poter intercettare e gestire tale evento, è necessario approfondire come utilizzare gli eventi in Visual Studio.

+ Gestione degli eventi Ogni tipo di controllo, oltre ad avere proprietà specifiche, è in grado di generare un determinato insieme di eventi. Per ognuno di essi possiamo definire un metodo specifico, che verrà invocato nel momento in cui sarà scatenato l’evento. Per accedere alle proprietà di un determinato controllo, è necessario selezionarlo e, all’interno della finestra delle proprietà, premere il tasto in alto a destra a forma di saetta. A questo punto, una volta individuato l’evento, è sufficiente digitare il nome del metodo corrispondente e premere invio.

+ Gestione degli eventi A questo punto il sistema aprirà il file C# corrispondente alla pagina corrente, e potremo notare al suo interno la presenza del metodo appena definito. Tale metodo accetta in input due parametri: object sender : l’oggetto che ha scatenato l’evento; in questo caso il Button. RoutedEventArgs e : Un oggetto che contiene una serie di informazioni specifiche riguardo all’evento che è stato scatenato.

+ Proprietà comuni Oltre alle proprietà viste in precedenza per i singoli controlli, ne esistono altre, condivise fra tutti i Controls, che possono tornare utili in varie situazioni: Margin : permette di impostare la distanza fra il controllo e gli altri a cui è adiacente(o la distanza dal container). Sintassi ammesse: Margin=“20” : il Control sarà distanziato di 20 pixel da tutti gli altri controlli Margin=“10,30” : i margini orizzontali varranno entrambi 10, mentre quelli verticali 30. Margin=“1,2,3,4” : rispettivamente margini sinistro, superiore, destro ed inferiore. HorizontalAligment, VerticalAligment : permettono di impostare il posizionamento del controllo relativamente al contenitore.

+ Windows Phone Toolkit Negli esempi visti finora, mancano molti dei controlli tipici delle applicazioni Windows Phone, come ad esempio il DatePicker, o gli Switch classici di tale sistema operativo. Questo perchè Microsoft ha scelto di non includere direttamente tali Controls all’interno dell’ambiente, ma di distribuirli in maniera separata tramite un appositio toolkit opensource. Per poter utilizzare tali controlli è pertanto indispensabile scaricare ed installare tale estensione:

+ Colori, stili e risorse Nicolò Sordoni

+ La gestione dei colori : i brush In Windows Phone, per disegnare o riempire determinate aree, solitamente si fa uso dei cosiddetti brush (pennelli) che sono degli oggetti in grado di svolgere esattamente tale scopo. I brush possono essere utilizzati ad esempio per impostare il colore di sfondo di un determinato pulsante o il colore di un testo. Nell’esempio è stato impostato il colore di riempimento di un rettangolo.

+ La gestione dei colori : i brush Esistono vari tipo di brush che ci permettono di ottenere vari effetti: SolidColorBrush: Il brush più semplice; l’area viene riempita con il colore specificato. LinearGradientBrush: Permette di definire un colore sfumato in maniera lineare. ImageBrush: Disegna un’immagine VideoBrush: Viene utilizzato un controllo in grado di riprodurre un video

+ Le risorse In ogni applicazione capita innumerevoli volte di avere determinate risorse (stringhe, brush, valori, ecc...) che si ripetono più volte all’interno della stessa pagina o all’interno dell’intera App. In tali situazioni, è estremamente sconsigliato reinserire manualmente, di volta in volta, la risorsa. Per venirci incontro sotto questo punto di vista, Windows Phone ci offre un apposita proprietà, Resources. Essa può essere definita a livello di: Applicazione: le risorse definite in tale punto saranno accessibili a qualsiasi componente dell’app. Pagina: solo i controlli della pagina potranno accedere a tali risorse. Container: La soluzione meno utilizzata. Tutti i controlli (non solamente i figli diretti) all’interno di tale container avranno accesso alle risorse.

+ Le risorse Come detto, per definire una o più risorse, è necessario far riferimento alla proprietà Resources. Ad esempio, nell’esempio che segue, si definisce una risorsa di tipo brush ed una di tipo stringa a livello di singola pagina. In questo caso è indispensabile definire la proprietà x:Key, affinchè sia possibile identificare univocamente la risorsa a cui vogliamo accedere. Per utilizzare tali risorse all’interno della pagina, è necessario utilizzare le cosiddette markup extensions, che sono delle estensioni del linguaggio XAML, che ci permettono di inserire particolari direttive all’interno delle pagine. Esse vanno racchiuse fra parentesi graffe. Ad esempio, possiamo notare come, per identificare una risorsa, sia necessario utilizzare la keyword StaticResource, seguita dalla Key della risorsa.

+ Gli stili Gli stili sono l’equivalente dei CSS nelle pagine HTML. Permettono di impostare determinare proprietà relative ad un determinato tipo di controllo; tutti i controlli su cui lo stile sarà applicato assumeranno tali valori. Nel momento in cui impostiamo uno stile, abbiamo bisogno di specificare il tipo di controllo su cui andremo ad agire, in maniera da individuare quali sono le proprietà su cui potremo agire (ad esempio non è possibile modificare la proprietà Text di una CheckBox). Per definire il tipo di controllo, useremo la proprietà TargetType, mentre per impostare le proprietà del controllo, è necessario far ricorso al tag Setter. La proprietà x:Key è indispensabile per referenziare esplicitamente lo stile, ma non è obbligatoria. Nel caso non fosse presente, lo stile sarà applicato in automatico a tutti i controlli di quel tipo.

+ Definire risorse in file separati Al fine di rendere il codice dell’applicazione semplice da mantenere, è consigliabile definire le risorse all’interno di file separati. Per farlo è necessario aggiungere al progetto un nuovo file di tipo ResourceDictionary ( click con il tasto destro > Add > new Item... > ResourceDictionary. In tal modo sarà aggiunto un nuovo file al progetto, al cui interno potremo inserire le nostre risorse. Per poterlo rendere accessibile all’interno dell’applicazione, la sintassi è la seguente: