WPF 7: DevLeap mini-browser applications
Riprendendo una parte di workshop direttamente da MSDN ho ricreato questo piccolo esempio di applicazione client che sfrutta il controllo web browser presente su Windows Phone 7
Si faccia riferimento Windows Phone 7 Intro per una introduzione alla creazione di progetti con Visual Studio 2010 Express for Windows Phone.
Creato il progetto e modificato il classico Title e SubTitle, è stato inserito un campo TextBox e un Button. Molto importante, com’è in Windows Mobile attuale, la necessità di disegnare la User Interface in modo che si adatti alla risoluzione video: dalle specifiche hardware, i nuovi telefoni avranno una risoluzione di 800x480, ma sicuramente nel futuro queste specifiche potranno adattarsi a nuove tipologie di schermi e device. Inoltre è prevista la possibilità (come in WM) di orientare lo schermo in orizzontale e verticale.
In interfacce relativamente semplici come quella di questo esempio si può sfruttare quello che in Windows Form per Windows Mobile si chiama Docking ovvero la possibilità di agganciare i controlli ai bordi.
In Silverlight, una delle tecniche per ottenere questo risultato, è impostare i margini rispetto al controllo contenitore. Ad esempio per ottenere questo risultato
il campo TextBox, il Button e il controllo web browser sono allineati rispetto alla griglia che li contiene. La griglia viene proposta di default
Ruotando l’emulatore non ottengo però l’effetto desiderato:
Modificando lo XAML come segue si ottiene l’effetto desiderato
Ecco il risultato
Questo è solo un esempio: in applicazioni più complesse dove si ricerca una UX elevata dovremmo creare XAML diversi per essere più precisi possibili. Si potrà poi condividere il code-behind oppure creare un modellino OOP dietro le quinte per evitare di “spalmare” la gestione degli eventi e le righe di codice dei form in più punti.
Per iniziare, a parte avere experienza in XAML e nel disegno di user interface, i documenti “UI Design e Interaction Guide” e “Windows Phone Design System – Metro” sono una buona base di partenza: si trovano a partire da quì: http://msdn.microsoft.com/en-us/library/ff637515(VS.92).aspx
Dopo DevCon 2010 riprendiamo il filo del discorso con altri esempi.
A proposito di DevCon, vediamo come si vede il sito nel browser di Windows Phone 7
Una nota: se si commette un errore nel XAML e l’errore viene segnalato da VS durante il debug, come ad esempio l’errore mostrato di seguito, occorre chiudere il file .g.cs aperto in automatico da Visual Studio prima di poter ripartire con una successiva sessione di debug
Altrimenti sembra che VS tenga lockato il file che quindi non può essere aggiornato dal generatore e resta “vecchio“ durante il deploy sul device.
Preso dall’entusiamo pre-conferenza ho provato a portare l’interfaccia delle sessioni della conferenza dello scorso anno (DevCon 2009: http://devcon2009.devleap.com/SessionsSilverlight.aspx) visto che era fatta in Silverlight, dentro il nuovo ambiente.
A parte un tag non supportato dal Visual State Manager e un paio di informazioni sulle definizioni dei colori, che, visto che non sono un esperto di Silverlight ho semplicemente rimosso dalla definizione delle risorse, questo il risultato:
Ovviamente questa interfaccia dovrebbe, vedi discorso precedente, essere riadattata alla risoluzione , ma è quasi incredibile vedere una applicazione Silverlight nata nel dicembre 2008 per il sito della conferenza DevCon 2009, girare dopo 18 mesi su un SDK per un telefono che arriverà fra un po’.