Dispense lezioneWP - XAML (2726627 byte)

+
Componenti base: Manifest,
App e Pages
Nicolò Sordoni
+ Il file manifest
+ 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.
<Button />
E’ inoltre possibile assegnare ad ogni
controllo le specifiche proprietà, ad
esempio:
<TextBlock Text=“Ciao”/>
+ 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
<Run /> e <LineBreak/>. 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,
email, 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
EmailSmtpAddress
TelephoneNumber
Url
+ 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:
https://www.nuget.org/packages/WPtoolkit/
+
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: