Discussion about Design, Technologies and User eXperience

Anteprime Silverlight 4 @ pdc09

Roberto Cavallini — Thu, 19 Nov 2009 23:22:00 GMT

Proprio poche ore fa, @ pdc'09 abbiamo avuto le prime anticipazioni sulle nuove funzionalità che saranno incluse nella nuova versione del plug-in attualmente in Beta! La keynote del secondo giorno dell'evento è stata praticamente "monopolizzata" da questo...(read more)

Expresssion Blend & SketchFlow @ Community Tour con Expressys.net e Visual Basic tips&tricks

Roberto Cavallini — Wed, 11 Nov 2009 17:50:00 GMT

Ormai ci siamo...mancano un paio di giorni alla tappa milanese del Community Tour che quest'anno vedrà per la prima volta coinvolta attivamente anche Expressys.net con una sessione dedicata alla realizzazione di prototipi interattivi attraverso Expression...(read more)

Silverlight e Expression Studio 3 al Creativity Day di Roma

Roberto Cavallini — Fri, 16 Oct 2009 15:58:00 GMT

Dopo tante novità inerenti a risorse e tutorial sulla nuova versione di Expression Studio 3, concedetemi un "comunicato di servizio". Creativity Day 2009 - L'Habitat dei Creativi, si trasferisce a Roma e vi da appuntamento il 28 ottobre 2009 presso il...(read more)

Project Rosetta: nuovi tutorial Expression Blend 3

Roberto Cavallini — Wed, 07 Oct 2009 18:15:00 GMT

Sempre in ambito formazione e progettazione, vi segnalo questa interessante serie di tutorial [for beginners] dedicati alle nozioni basi per poter progettare interfacce utente con Expression Blend 3. La serie di tutorial fa parte del materiale disponibile...(read more)

Disponibile un nuovo percorso formativo su Expression Studio 3 in italiano

Roberto Cavallini — Tue, 22 Sep 2009 16:01:00 GMT

Volete scoprire tutti i segreti sui tool della famiglia Expression Studio 3: novità funzionali, esempi, tutorial e molto altro...
Come vi avevo anticipato prima delle vacanze estive, sono da pochi giorni disponibili i primi 7 webcast che illustrano le principali novità funzionali disponibili in Expression Studio 3 e Silverlight 3.

Potete accedere al percorso formativo completo dalla seguente pagina:
http://tinyurl.com/expression-studio-3

Per semplicità, vi riporto anche i riferimenti ad ogni singolo video tutorial:

- Expression Studio 3: "Overview & proposal scenarios" (16' min.)

- Expression Blend 3 SketchFlow: "Dal prototipo al progetto reale" (24' min.)

- Expression Blend 3: "Sample Data & oltre…" (12' min.)

- Expression Blend 3: "Behavior - building block of interacivity" (29' min.)

- SuperPreview: ottimizzazione nella visualizzazione di un sito Web su più browser (27' min.)

- Expression Encoder 3: novità encoding e ottimizzazione dei video (24' min.)

- Deep Zoom Composer: overview sulle nuove funzionalità (50' min.)

Questa serie di webcast, vogliono essere i primi di una serie che andrò a realizzare nelle prossime settimane. Se avete suggerimenti su particolari funzionalità/esempi su cui volete avere approfondimenti o dettagli, vi invito ancora una volta a segnalarmi direttamente l'argomento al mio indirizzo di posta elettronica: roberto.cavallini@microsoft.com

Vi ricordo infine che è da qualche giorno online, la nuova versione del portale dedicato ai prodotti Expression Studio in italiano.

SketchFlow: realizzare prototipi “multi-user”

Roberto Cavallini — Wed, 09 Sep 2009 14:16:00 GMT

Penso che a tutti voi sia potuto capitare di dover progettare un’applicazione che preveda la fruizione da parte dell’utente in più modalità/utenti diversi. Mi spiego meglio, uno dei requisiti progettuali potrebbe essere quello di ipotizzare a seconda che un utente si sia loggato come “Administrator” e/o utente “Standard” di abilitare funzionalità e schermate diverse dell’applicazione.
Una delle difficoltà che si potrebbero incontrare nel progettare un’applicazione di questo tipo, potrebbe essere quella di non riuscire a prototipizzare in modo dinamico ed efficace le funzionalità che dovranno essere poi implementate nel progetto finale. Sempre inerente a queste funzionalità, riprendo un mio post di settimana scorsa in cui segnalavo la disponibilità di alcuni “bahavior” utili per abilitare in un progetto SketchFlow le funzionalità di “Conditional Navigation”, vi ricordate? Si modificava il comportamento collegato ad un “button” a seconda che si interagiva o meno su un “checkBox” prima di cliccare sul button.
Trovate l’esempio visualizzabile attraverso lo SketchFlow Player a questo link.

Ma torniamo a questo nuovo scenario, in questo caso il tutto risulta implementato attraverso l’uso degli “states” e del “Visual States Manager”. Attraverso una serie di behavior lo SketchFlow Player sarà in grado di “registrare e memorizzare” il comportamento dell’utente e proporre dei contenuti specifici a seconda del profilo attivato.

Vi invito a visualizzare un semplice esempio con il prototipo implementato disponibile a questo link.
Mentre il progetto completo in Blend 3 e i behavior utilizzati nel progetto nei rispettivi link.

Come illustrato, se selezionate una o l’altra modalità di accesso interagendo con i “radio Button” [bullet 1], viene memorizzato in questo caso lo "states" con cui state accedendo [bullet 2] e nel momento in cui accedete sullo “Screen 2” [bullet 3 all’interno dello SketchFlow Player] vi verrà attivato il contenuto definito all’interno dello “states” corrispondente definito attraverso il Visual State Manager - nello specifico un "ComponentScreen" definito in un file XAML esterno (“StandardUI.XAML” e “AdminUI.XAML”).

Per capire la logica dell’esempio vi invito a guardare insieme l’interazione definita attraverso l’uso dei behavior che dietro le quinte non fa altro che memorizzare o meno lo “states” in cui si trova l’applicazione e a seconda dell’interazione dell’utente attivare o meno gli “states” ad esso associati.

Iniziamo analizzando l’”Object Tree” dello “Screen 1”. Come vedete allo “UserControl” principale è applicato un behavior “SetGlobalStateAsVisualState” che associa al Loaded dell’applicazione un GlobalStateTag “Default”. Per rendere la cosa più comprensibile, ho creato uno screen shot dove sono rappresentati “side by side” i due panel.

Se andiamo avanti con l’analisi degli elementi che costituiscono l’applicazione, notate che hai 2 radioButton sono associati altri due behavior che non fanno altro che “memorizzare” come attivo lo stato associato al behavior.

Osservate il pannello degli “States” [1] associati a questa pagina e definiti all’interno del Visual States Manager, noterete che sono attualmente presenti due stati “Standard” e “Admin”, i quali non fanno altro che attivare e/o disattivare il “radioButton”. Banalmente nello “states” è stata associata la proprietà “radioButton” IsChecked [2].

Infine potete notare, sempre dall’Object Tree, alle due label in alto a destra dell’interfaccia sono associati 2 semplici behavior “ChangePropertyAction” [1] che non fanno altro che modificare la property “foreground” dei due controlli “TextBlock” sempre in relazione al “GlobalState” attivato. In questo caso è stata modificata anche la tipologia di Trigger (TriggerType) che viene proposta di base dal behavior interagendo sul bottone “NEW” [2].

Nell’immagine qui sotto potete vedere la maschera per definire il nuovo “TriggerType”.

Passiamo quindi velocemente ad analizzare come sono strutturati i behavior e i controlli che caratterizzano “Screen 2”. Rappresentato nella SketchFlowMap, a “Screen 2” sono agganciati due “ComponentScreen” il cui comportamento viene gestito attraverso il “Visual States Manager”.

Se andiamo ad analizzare gli elementi contenuti nell’Object Tree, vi renderete conto che in questo caso il tutto è molto più semplice. Nel Visual States Manager sono stati definiti i 3 stati che non fanno altro che attivare e disattivare i ComponentScreen e le label (TextBlock) che indicano in quale “user mode” l’utente sta fruendo dei contenuti. Selezionando uno stato o l’altro - vi consiglio di fare attenzione al pannello delle “Opacity”, noterete che a seconda che sia attivato/disattivata una modalità di navigazione “Standard/Admin” viene modificata la proprietà di “Opacity” associata. Nello “screenshot” riportato qui sotto, stato attivato lo states “Admin” [1] e se selezioniamo sull’ObjectTree il “ComponentScreen” standardUI [2] risulta applicata una properties di “Opacity=0”.

Per concludere, se andiamo a vedere le proprietà associate ai due behavior sullo UserControl principale, “MapGlobalStateToState” - in relazione al GlobalState che viene ereditato dalla scelta che l’utente ha fatto sullo “Screen 1” si attiva lo “states” corrispondente nel VisualStatesManager.

Vi invito quindi a fare il download dell’esempio, disponibile a questo link e ad aprirlo con Blend per provare dal vivo le funzionalità descritte in questo articolo. Facendo [F5] da tastiera vi verrà caricato lo SketckFlow Player all’interno del browser di testing.

Colgo l'occasione per ringraziare inoltre il mio collega Christian Schormann da cui ho preso ispirazione per scrivere questo post, sul suo blog trovate una serie di dettagli in più sull'esempio dal punto di vista dello sviluppo.

Personalizzare una ScrollBar attraverso gli "styles" in Silverlight

Roberto Cavallini — Mon, 07 Sep 2009 14:02:00 GMT

Continuiamo con la carrellata sulla personalizzazione dei controlli in Silverlight 3 attraverso l’impiego degli “Styles” e dei “ControlTemplate”.

ScrollBar:
Anche in questo caso, partiamo da alcuni semplici elementi di grafica creati in precedenza attraverso Illustrator ed importati in Blend 3. L’asset grafico importato definisce lo stile “Normal” della ScroolBar, mentre nell’immagine qui sotto ho voluto riportare come ho ipotizzato il comportamento della ScrollBar nei vari stati d’impiego.

In pratica, come negli esempi illustrati in precedenza, il primo step è quello di convertire gli asset grafici in “controllo”. Anche in questo caso, l’abbiamo ormai visto più volte, selezioniamo il contenitore Grid “verticalscrollbar” e trasformiamo il tutto in controllo definendo lo “Styles” ed il “ControlTemplate” facendo semplicemente “Tools > Make Into Control > ScrollBar”.
Vi ricordo che nella maschera “Make into Control” è fondamentale che definite la tipologia di controllo che volete creare nel nostro esempio “ScrollBar”. Per facilitare questa operazione vi consiglio di utilizzare l’utile motore di ricerca che vi permette di filtrare direttamente sulla tipologia di controllo.

A questo punto vi troverete nella root del ControlTemplate che avete appena creato, nel pannello Object Tree, dove anche in questo caso la grid principale avrà il nome “verticalscrollbar”. Sempre all’interno del template, selezioniamo la grid principale “verticalscrollbar” e dal menù “tool” selezioniamo “Make Into Part of ScrollBar > VerticalRoot”. “verticalscrollbar” verrà quindi rinominata in “VerticalRoot”.

Suddividiamo la grid nelle 5 righe necessarie per la definizione della ScrollBar. Nel nostro esempio specifico stiamo parlando di “5 righe” in quanto si tratta di una ScrollBar Vertical, se si trattasse di Horizontal, in questo caso si trattava di suddividere in 5 colonne. Vediamo illustrato il dettaglio nella figura qui sotto.

Se avete suddiviso correttamente la Grid, gli elementi grafici vi dovranno risultare in questo modo: “Track” in RowSpan “5”, “smalldecrease” in Row ”0”, thumb in Row “2”, e smallincrease in Row “4”.
La VerticalSmallDecrease non è ancora nel template, ma abbiamo l’asset grafico per questa parte che è l’oggetto “smalldecrease”. Bisognerà quindi trasformare questo oggetto attraverso il comando “Make Into Part” in Make Into Part. Selezioniamo quindi “smalldecrease” e dal menu tool trasformiamo “Tools > Make Into Part of ScrollBar > VerticalSmallDecrease > OK”.

Nel nostro esempio non abbiamo bisogno del “ContentPresenter” quindi possiamo cancellarlo. Selezioniamo “smalldecrease” e impostiamo la width e la height a “7” nel pannello delle proprietà.
Modifichiamo le dimensioni della grid a “7” ed il colore di sfondo “background” trasparente.
Interagendo con il comando “Scope up”, torniamo nel template principale “ScrollBarStyle1”, selezioniamo “VerticalSmallDecrease” e resettiamo Width, Height e Margin.
A questo punto dobbiamo definire gli “States” per il comportamento di “MouseOver” e “Pressed”, entriamo quindi nel template “RepeatButtonStyle1” e all’asset “smalldecrease”, modifichiamo il colore di riempimento Fill nei vari “states” rispettivamente come segue: “MouseOver” “Fill=#FFCCCCCC” e “Pressed” – smalldecrease “Fill= FFE5E5E5”. Per rendere i cambi di stati ancora più piacevoli è possibile definire una transitino “0,2” tra i vari “states” appena definiti. Del tipo “Normal -> MouseOver” 0,2 sec.

Ritorniamo quindi interagendo sul bottone “Scope up” nel template principale e ripetiamo le stesse operazioni anche per il bottone “smallincrease”.Selezioniamo quindi “thumb” sull’”Object Tree” nel control template principale e trasformiamo in VerticalThum come segue, “Tools > Make Into Part of ScrollBar > VerticalThumb > Ok”.
A questo punto bisognerà associare una MinHeight, ritorniamo quindi sul control template principale, selezioniamo “VerticalThumb”, applichiamo dei margin Left:5, Right:5, Top:0, Bottom:0; resettiamo la Height e associamo un MinHeight to 7.

Definiamo quindi gli “states” ed il comportamento attraverso il Visual States Manager, entriamo nel template di Thumb e associamo gli states di “MouseOver”, “Pressed” e la Transition in “0,2 sec”.
In conclusione, torniamo sulla Root principale del ControlTemplate “ScrollBarStyle1”, attiviamo il pannello “Parts” di Blend, e con selezionato la grid VerticalRoot nel ObjectTree, inseriamo “VerticalLargeDecrease”, nelle proprietà impostate Row=”1” e Opacity=”0”. Stessa operazione anche per il “VerticalLargeIncrease” con la differenza che impostate Row=”3”.

Abbiamo praticamente concluso l’esempio, l’unica cosa che ci rimane da fare prima di lanciare il build dell’applicazione e testare il tutto e quella di impostare le dimensioni delle nostre righe in questo modo: Auto, Auto, Auto, Star e Auto.

A questo link, trovate disponibile al download il codice sorgente del progetto in Blend 3.

Definire lo Style ed il Control Template per un "Button" in Silverlight 3

Roberto Cavallini — Fri, 04 Sep 2009 19:17:00 GMT

Come dimostrato nello scorso articolo per lo “Slider”, vediamo insieme la personalizzazione di un altro semplice controllo il “button”. Uno degli elementi fondamentali che caratterizzerà le nostre applicazioni.
Per semplificare ulteriormente la cosa, il buttone creato è veramente elementare e scarno. A mio avviso è importante capirne la logica e come in tutte le cose, una volta capite le basi, le cose più complesse vengono da se.

Anche in questo caso, presupponiamo di avere come base alcuni semplici elementi grafici che caratterizzeranno il nostro bottone, il tutto contenuti all’interno di una “Grid”.

In questo caso, questi elementi grafici rappresenteranno lo stato “Normal” del nostro button, attualmente sono semplici elementi grafici ed anche in questo caso, per prima cosa bisognerà convertirli in controllo “button”. Attiviamo e selezioniamo la “Grid” contenitore, tasto destro del mouse, “Make into control…” e trasformiamo in “Button”. Una soluzione alternativa poteva essere quella di partire dal Button standard disponibile all’interno dell’Asset Library di Blend 3 e da li editarlo come “Edit a copy…” del bottone di base.
Facendo questa operazione andremo a definire lo “Styles” che conterrà a sua volta il “ControlTemplate” con gli elementi grafici del button al suo interno e i vari “states” che potranno essere gestiti all’interno del “Visual State Manager”. Evidenziato nell’immagine qui sotto, il codice XAML che definisce il “ControlTemplate” all’interno dello Style del “Button”.

Come potete notare dal ObjectTree, il “TextBlock” non è più contenuto nel “ControlTemplate”, ma è stato sotituito da un nuovo elemento “ContentPresenter”, in cui se andate a vedere le sue proprietà a come “Content=OK” ed eredita le stesse proprietà del TextBlock.

A questo punto, per replicare gli “States” che sono stati definiti e trovate raffigurati nella prima immagine, accedete al “Visual State Manager” posizionatevi sul Rectangle e modificate il colore di background con un grigio più chiaro interagendo dal pannello proprietà.
Per replicare lo stesso colore di sfondo [background], anche allo States di “Pressed”, Blend 3 introduce una nuova funzionalità che vi permette di copiare rapidamente le proprietà da uno stato all’altro.
Banalmente, con MouseOver ancora attivo, tasto destro del mouse e selezionate “Copy State To > Pressed”. Il comando è applicabile anche dal menù “Tools”.

A questo punto spostiamoci sullo States Pressed per spostare leggermente il testo, selezioniamo l’elemento “ContentPresenter” e modifichiamo la proprietà “RenderTransform.Translate.X and .Y a “1”.
Procediamo con lo stato “Disabled”, selezioniamo il rettangolo e togliamoli lo sfonfo “Fill” rendendolo trasparente e modifichiamo le proprietà dello Stroke a grigio chiaro.

Per rendere il più reale possibile gli effetti di transizione da uno stato all’altro, vi ricordo che è possibile gestire le transizioni dal VisualStateManager, banalmente posizioniamoci su “Normal”, clicchiamo sul button per aggiungere e definire una nuova “Transition” e selezioniamo “Normal > MouseOver”.

Impostiamo la duration a “0,2s”. In questo modo abbiamo applicato un effetto di transizione, attualmente tutti gli altri passaggi da uno stato all’altro avvengono istantaneamente ma come potete intuire allo stesso modo avrei potuto definire le diverse transizioni.

Se notate in particolare la grafica del “button” sulla prima immagine, si è ipotizzato di far apparire una cornice azzurra quando il bottone si trova nello stato “Focused”. Il rettangolo non è attualmente presente begli elementi grafici di base contenuti nel nostro “button” nello “states” Normal. Bisognerà quindi procedere e crearlo al suo interno. Creare un nuovo oggetto all’interno di uno stato viene definito “drawing into state’” ciò sta a significare che l’oggetto sarà visibile solo nello stato in cui è definito. Questa funzionalità può essere molto utile anche per altri controlli.
Selezioniamo quindi “Focused”, inseriamo un nuovo rettangolo (leggermente più piccolo) facendo doppio click sullo strumento rettangolo. A questo punto vogliamo modificare le dimensioni ed il riempimento del nuovo rettangolo ma in questo caso vogliamo effettuarle sullo “States Base”. Non possiamo attivare lo stato “Base” in quanto sullo stato “base” il rettangolo non è presente, a questo punto disattiviamo quindi la registrazione premendo o da tastiera [CTRL + R] o interagendo sull’icona riquadrata in rosso nell’immagine seguente. Modifichiamo quindi le proprietà di “Fill”, “Margin” e “Stroke” e applichiamo i margini arrotondati.

Se volete creare il button leggermente più dinamico, potete inserire un’animazione “steady-state animation” nello stato “Focused”. Selezionate lo stato “Focused”, e cliccate sull’icona per attivare e gestire un’animazione all’interno dello stato (riquadro rosso).

A lato del Object Tree, vi apparirà per esteso la maschera di gestione delle “timeline” ed in questo modo potrete definire la vostra animazione con eventuali effetti di “easing in” e “easing out” da applicare ai “keyframe” che costituiscono l’animazione.

Come personalizzare un controllo in Silverlight 3 attraverso gli "styles" ed i "control template"

Roberto Cavallini — Fri, 04 Sep 2009 13:44:00 GMT

Come ho già più volte avuto modo di sottolineare, a mio avviso, una delle potenzialità di XAML sia in WPF sia per applicazioni Silverlight è la possibilità di andare a creare degli elementi/controlli dell'interfaccia grafica personalizzandone il comportamento e l'interazione attraverso gli "stili e i template". Molto simili ai CSS disponibili nell'HTML, ma per certi versi molto più potenti, permettono di definire l'aspetto grafico e il comportamento dei controlli che caratterizzano l'interfaccia dell'applicazione. Come nei CSS, una volta definito gli stili che possono essere interni allo XAML dell'interfaccia o gestiti esternamente attraverso uno XAML esterno - "resource dictionaries" (funzionalità già disponibile in WPF e recentemente introdotto nella nuova versione di Silverlight) è possibile applicare gli stili ai controlli dell'interfaccia. Banalizzando molto la cosa, a tutti i "button" dell'applicazione è possibile associare lo stesso stile in modo che l'applicazione abbia un aspetto grafico omogeneo, gestendo il tutto con dei "resource dictionaries" esterni, è possibile cambiare l'aspetto e l'interazione dell'applicazione facendo caricare dei "resource dictionaries" diversi.

Per definire e modificare gli stili, il modo più semplice ed immediato è quello di utilizzare Expression Blend che permette in modo rapido ed efficace di creare, modificare e gestire gli stili direttamente in "design mode". Le modalità di operare possono essere sostanzialmente due:

- partire da un controllo di base disponibile nell'Asset Library di Blend (button, check box, slider, etc,) duplicare il "Control Template" banalmente facendo tasto destro del mouse sopra il controllo sull'area di lavoro "Edit a Copy" ed operando in questo modo è possibile definire un nuovo stile che è possibile poi riassociare a tutti i controlli della stessa tipologia all'interno della pagina. Chiaramente all'interno dello stile è possibile poi definire la grafica e il comportamento (attraverso l'uso degli "State" nel "Visual State Manager");

- una volta creati gli elementi grafici che caratterizzeranno il controllo, trasformare il tutto in "controllo" attraverso il comando "Make Into Control..." ed in questo caso definire la tipologia del controllo attraverso lo stile. Per attivare il comando "Make Into Control..." è possibile procedere o facendo direttamente ancora una volta tasto destro e selezionando dal menù a tendina o dal menu "Tools". (Questa nuova funzionalità è disponibilie all'interno della nuova versione di Expression Blend 3 che anche sotto questo punto di vista introduce una serie di novità molto interessanti).

Come ho già detto, il concetto di stili e template sono una dei concetti base di XAML sia in WPF sia in Silverlight e sono già disponibili dalle versioni precedenti; con la nuova versione di Expression Blend 3 è migliorata notevolmente la gestione e definizione degli stili e dei template dal punto di vista grafico rendendo la cosa molto più semplice ed intuitiva.

Vediamo quindi insieme come è possibile definire uno stile per un semplice controllo quale potrebbe essere uno "Slider" partendo dagli elementi grafici in un'applicazione Silverlight 3.
Lo step zero della nostra demo, è quello di importare tutti gli elementi che caratterizzeranno il nostro controllo all'interno del progetto Silverlight in Blend. La grafica degli elementi è stata definita e disegnata in precedenza attraverso Illustrator. Sfruttando quindi una delle nuove funzionalità di Blend 3 è possibile importare e convertire tutti gli elementi grafici in XAML all'interno di Blend. Un paio di consigli, trattandosi di uno "Slider", concettualmente il controllo dovrebbe essere strutturato in due parti: un elemento "Thumb" con cui l'utente potrà interagire e un elemento "Track" su cui il "Thumb" dovrà scorrere. Chiaramente i due elementi potranno essere composti a loro volta da più elementi grafici ma il consiglio che vi do è quello di raggruppare e strutturare i "sottoinsieme" grafici di ogni elemento il un controllo di layout contenitore che potrebbere essere banalmente una "Grid" e un "Canvas". Il secondo accorgimento è quello poi di raggruppare i due elementi in un altro contenitore esterno che contenga entrambi i due elementi "Thumb e Track", in questo caso specifico per lo "Slider" bisogna utilizzare un'altra "Grid" che come vedremo andra poi strutturata e suddivisa in righe e colonne. Premetto nel nostro esempio andremo a realizzare uno "Slider" ad orientamento "Horizontal" e che quindi andrà utilizzato in posizione orizzontale. Vi riporto nell'immagine qui sotto un esempio molto semplice di grafica, mentre a questo link trovate un esempio leggermente più complesso, che sarete poi in grado di downlodare, in cui per simulare il comportamento dello Slider è stato applicata una funzione di "Data Binding" con un effetto "Blur" a sua volta applicato ad un'immagine presente all'interno dell'interfaccia.

Next step, procediamo a convertire la "Grid" contenitore in "controllo", come vi ho già anticipato attraverso il comando "Make Into Control...>Slider" ed in questo modo andremo a definire lo Stile. Per l'esempio possiamo tranquillamente definirlo nel "documento" e non come "resource dictionaries" - vedi opzioni in basso sulla maschera di definizione dello stile.

Procediamo quindi e suddividiamo la "Grid" in 3 Colonne come raffigurato nell'immagine qui sotto, idealmente la suddivisione dovrebbe essere in coincidenza con l'elemento "Thumb". Un'altra cosa da fare attenzione, in questo istante ci troviamo all'interno del "Control Template" del controllo che è definito all'interno dello "Stile". Nel "object tree" dell'applicazione dovreste avere indicato il nome dello stile che avete appena definito.

Se avete operato in modo corretto, l'elemento "Track" dovrebbe trovarsi in comune sulle 3 colonne e nelle proprietà avere quindi un "ColumnSpan=3", mentre il Thumb dovrebbe essere posizionato nella "Column=1": A questo punto, sempre all'interno dello stile bisogna procedere e convertire la Grid che contiene i due elementi "Track e Thumb" in "HorizontalTemplate". Operiamo in questo modo, sul VieeTree, attivate e selezionate la "Grid", fate tasto destro del mouse sopra la "Grid" e selezionate semplicemente "Make Into Part of Slider > HorizontalTemplate".

A questo punto selezionate "Thumb" e con lo stesso criterio di sopra applicate "Make Into Part of Slider > HorizontalThumb", in questo modo state definendo lo stile ed il control template da applicare all'elemento "Thumb", temporaneamente usciamo da questo stile interagendo con il comando "Scope up" sul Object Tree dell'applicazione e facciamo il "reset" dei margini dal pannello proprietà.

Selezioniamo quindi "HorizontalTemplate" nel object tree, dal pannello "Parts", novità di Blend 3 se non vi appare di default potete attivarlo interagendo all'interno del menù Windows, fate doppio click su "HorizontalTrackLargeChangeDecreaseRepeatButton" ed impostate l'opacity a "0" sul pannello delle proprietà. Riselezionate "HorizontalTemplate" e fate la stessa operazione anche per "HorizontalTrackLargeChangeIncreaseRepeatButton" impostando l'opacity a "0". Abbiamo praticamente concluso, modifichiamo a questo punto le dimensioni delle 3 colonne della Grid di "HorizontalTemplate" in "Auto, Auto e Star".

Lanciamo quindi la Build dell'applicazione, facendo "F5" da tastiera ed il tutto verrà caricato all'interno della finestra browser di "test". Dietro le quinte Blend 3, compila anche il progetto creando il file "XAP" che conterrà le DLL e lo XAML del progetto e la pagina HTML che vi permette di testare l'applicazione.

Nell'esempio completo che trovate disponibile a questo link, è stato inserito anche un "data binding" sull'effetto "blur" applicato all'immagine impiegata nell'esempio. Se siete interessati, nel prossimo post, descriverò come applicare questa funzionalità di "data binding" attraverso Blend 3.

Introduzione a XAML: percorso formativo

Roberto Cavallini — Thu, 03 Sep 2009 16:13:00 GMT

"Introduction to XAML" vi segnalo un interessante percorso formativo specifico su XAML (eXstensible Application Markup Language), il linguaggio di markup dichiarativo di derivazione dall'XML alla base delle applicazioni Windows Presentation Foundation e Silverlight. Attraverso lo XAML è possibile definire i controlli, l'albero grafico, l'interazione e le animazioni delle applicazioni mantenendo separata l'interfaccia grafica dal "code behind" dell'applicazione. In questo modo, designer e developer possono lavorare in modo sinergico sullo stesso progetto con tool e strumenti specifici per i propri compiti e professionalità: Expression Studio 3 e Visual Studio 2008.

Il taglio del corso è abbastanza tecnico, ma ritengo possa essere d'interesse anche ad un target più allargato. Potete accedere direttamente al corso da questo link, è richiesta la registrazione attraverso un account Windows Live.

Vi ricordo inoltre che sul nostro portale video BE IT, sono disponibili una serie di webcast specifici su Silverlight e sullo sviluppo Web.

SketchFlow: behavior per la definizione e gestione di funzionalità di "Conditional Navigation" nei prototipi

Roberto Cavallini — Wed, 02 Sep 2009 19:17:00 GMT

Al rientro dalle vacanze e, credo anche voi come me, ormai a pieni ritmi con gli impegni di lavoro...Vi segnalo questi interessanti behavior che vi permettono di definire delle navigazioni condizionali all'interno di un'applicazione SketchFlow in Silverlight. Mi spiego meglio, partiamo dal presupposto che il vostro prototipo di applicazione debba prevedere che a seconda di una specifica interazione dell'utente- banalmente preventiviamo come esempio l'attivazione di un check box - il comportamento di un bottone all'interno dell'applicazione debba variare.

Semplificando ulteriormente la cosa, il comportamento del bottone "A" permetterà di navigare di deafult su una schermata chiamatola per ipotesi "Screen 2", mentre se l'utente interagisce con l'applicazione attivndo un check box a questo punto il comportamento del bottone varierà e l'utente potrà accedere in un'altra schermata "Screen 3". E' molto più semplice descriverla con un esempio che raccontarla.

Ho pubblicato l'anteprima dell'applicazione online che risulta fruibile attraverso uno SketchFlow Player direttamente da questo "link"

Ma vediamo velocemente come è possibile definire e gestire i behavior e questa funzionalità direttamente all'interno di Blend 3. Per prima cosa, una volta definito il progetto Silverlight SketchFlow è necessario importare i due behavior che permettono di pilotare tale funzionalità che come potrete intuire non fanno parte degli asset disponibili di default offerti da Blend. Procediamo quindi all'interno della maschera di gestione "Projects" e semplicemente facendo "tasto destro" selezioniamo l'opzione "Add Existing Item". Vi verrà lanciata la classica finestra di "File System" e selezioniamo quindi i due behavior che dovreste aver appena downlodato dai link qui sotto, lanciate quindi una build del progetto per creare le DLL (un semplice Ctrl+Shift+B da da tastiera) e a questo punto non vi resta altro che agganciare i behavior agli elementi che costituiranno l'interfaccia.

Ammetto, lo sto dando per scontato, ma come potrete intuire, prima di tutto è necessario creare le 3 schermate diverse che costituiscono il nostro semplice prototipo interagendo direttamente sul pannello "SketchFlow Map". Durante la sessione che ho tenuto lo scorso giugno a REMIX'09 dedicata a SketchFlow e Blend 3, ho spiegato in dettaglio alcune potenzialità offerte da SketchFlow, vi invito quindi a vedere la registrazione della sessione disponibile a questo link.

Inseriti i semplici controlli che costituiscono l'interfaccia sullo "Screen 1": un bottone, un check box e alcune label testuali, a questo punto non resta che agganciare i behabior hai controlli per gestirne l'interazione. Come potete vedere nell'immagine qui sotto che rappresenta il "view tree" della schermata "Screen 1", i behavior necessari in questo semplice esempio sono #2 e nello specifico: "SetNavigationTarget" applicato a due controlli (UserControl Principale e al Chech Box)e "ConditionalNavigation" in questo caso applicato al "button" inserito nell'applicazione.
In dettaglio, il behavior "SetNavigationTarget" applicato allo "UserControl" contenitore avrà dichiarato nelle "properties" "EventName:Loaded" e come TargetScreen "Screen 2" mentre l'altro "SetNavigationTarget" sarà applicato al "check box" con sulle properties EventName:"checked" e TargetScreen:"Screen 3". Mentre al "button" sarà applicato il behavior "ConditionalNavigation" che permette di gestire lo "switch" a seconda se l'utente interagisce e attiva il "check box".

Vi riporto, qui sotto, i link al downlod dell'esempio sviluppato in Blend 3 (vi ricordo che si tratta di una funzionalità specifica per un progetto SketchFlow) ed il link ai singoli "behaviors" necessari per sviluppare questo esempio messi a disposizione da un mio collega di Corp - Christian Schormann. Vi segnalo inoltre che sul suo blog trovate anche la documentazione tecnica su come Christiann ha implementato questi behavior.

Blog DesignExperience: new look & new vision!

Roberto Cavallini — Wed, 26 Aug 2009 19:52:00 GMT

Al rientro delle vacanze estive, ho voluto dare una veloce rispolverata anche al mio blog ;) Dal mio primo giorno in Microsoft, che risale ormai a circa 2 anni fa, è rimasto praticamente uguale.

Un po' di novità sia dal punto di vista estetico sia dal punto di vista funzionale, nell'ottica di migliorarne la navigazione e la fruizione dei contenuti raccolti.
Nel corso di questo nuovo anno, cercherò di dedicare ancora più tempo alle attività online per fornirvi contenuti e materiali stimolanti.

Chi meglio di voi, miei lettori può avere qualche suggerimento?

Mi piacerebbe creare un filo conduttore diretto con tutti voi, per cercare di offrirvi sempre più dei contenuti in linea con le vostre aspettative.
Tutorial, tip&tricks, risorse, materiali,esempi...libero sfogo alla vostra creatività!
Avete dei vostri progetti da segnalarmi? Idee e discussioni da condividere con tutti gli altri lettori?

Vi invito a postare qui sotto i vostri commenti.

A presto!
\\ Roberto

"Expression Blend Sample" disponibili nella Community Expression

Roberto Cavallini — Wed, 26 Aug 2009 17:29:00 GMT

Buon rientro a tutti!
Spero che anche voi abbiate avuto modo di riposarvi e ricaricare un po' le pile...pronti per le nuove "avventure" autunnali ;)
A poche ore dal rientro in ufficio, devo dire che queste vacanze hanno portato una serie di interessanti novità che credo valga la pena riassumervi brevemente.

Per prima cosa vi segnalo che sulla Community ufficiale dei prodotti Expression sono stati resi disponibili i progetti ed il codice sorgente degli esempi di Blend.
Direttamente da questo link, potrete accedere alla Gallery della community e procedere con il download degli esempi.
Attualmente non sono ancora disponibili i primi esempi che erano stati distribuiti in pacchetto con la prima versione di "Expression Interactive Designer", vi invito quindi a visitare periodicamente la gallery in modo da trovare i vari aggiornamenti.

La gran parte di questi esempi, hanno una caratteristica comune, sono state realizzati dal mio collega Celso Gomes; tra l'altro autore del portale Nibbles Tutorial. Proprio all'interno di questo portale potete trovare degli utili tutorial, che descrivono "step by step", come sono stati realizzati alcuni di questi esempi.
Una buona palestra per prendere dimestichezza con Blend e per riempire, nel caso, questi ultimi caldi giorni di meritate vacanze.

Sempre in questi giorni, vi segnalo che è stata rilasciata su MSDN la documentazione in italiano su Silverlight 3. Il taglio di questi articoli è abbastanza tecnico, ma credo possa sempre valerne la pena darne una lettura. La raccolta degli articoli è anche disponibile al download al seguente link.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Infine, vi segnalo un altro interessante progetto che è stato presentato ad inizio di agosto: "Mess with Silverlight", si tratta di un blog in cui è stata coinvolta un'agenzia creativa di Chicago "Mess Marketing" abitualmente autrice di progetti in ambiente MAC in Flash e tecnologia "competitive" a cui è stato chiesto di raccontare le loro esperienze nell'adottare e nello sviluppare progetti in Silverlight attraverso Expression Studio 3. Day by day troverete descritte e raccolte le esperienze sui progetti dal team creativo coinvolto.

Come avrete avuto più volte modo di apprendere, una delle potenzialità offerte da Expression Studio 3 è la capacità di lavorare in piena interoperabilità con gli strumenti della famiglia Adobe (Photoshop ed Illustrator) in modo da ottimizzare e ridurre drasticamente le tempistiche di realizzazione di un progetto.

Nelle prossime settimane, pubblicherò una serie di webcast - registrati durante la pausa estiva ;) - che descriveranno ed illustreranno tali potenzialità.
Stay tuned e buon lavoro ancora a tutti!

Usability in Practice & Microsoft Future Vision...

Roberto Cavallini — Mon, 03 Aug 2009 11:33:00 GMT

Prima di andare in vacanza e staccare per qualche giorno dagli impegni di lavoro... ;)
Vi segnalo una serie di materiali che possono essere una buona lettura da portare sotto l'ombrellone.

Sempre in merito alle tematiche legate alla progettazione e all'usabilità di una interfaccia utente, è uscita pochi giorni fa la pillola "Usability Testing" dedicata ai testing di usabilità della serie "Usability in Practice". Vi ricordo che questo articolo fa parte di un'interessante serie di materiale redatta da due guru su queste tematiche, Charles B. Kreitzberg e Ambrose Little, e disponibile su MSDN a questo link.

La raccolta completa e i link degli articoli che fanno parte di questa raccolta disponibili qui sotto (materiale in inglese):
- Usability Testing
- Agile Ux Development
- Useful, Usable and Desirable: Usability as a Core Development Competence
- The Power of Personas
- Strategies for Designing Application Navigation
- When Things Go Wrong
- The Human Face of Software

Sempre in merito ad alcune risorse interessanti in merito all'esperienza utente (ux) e alla progettazione e al design di nuovi paradigma di interazione, vi segnalo un interessante video di "envisioning" su scenari futuri che si stanno delineando nei laboratori di ricerca di Office Labs. Anche in questo caso, gli studi che vengono proposti nei video, voglione essere degli stili sui possibili futuri scenari che si potrebbero delineare con il supporto della tecnologia e di device di prossima generazione. In questi contesti, a mio parere, molto interessante anche dal punto di vista della progettazione e del design di un'interfaccia utente che supporti e abiliti l'interazione su questi futuri ambiti, vale la pena farne una riflessione. Il video a cui faccio riferimento "Productivity Future Vision" è disponibile a questo link, mentre trovate l'elenco completo del materiale di "Envisioning" su questa pagina.

Buone vacanze a tutti!

Deep Zoom Compser Update "bug fixed"

Roberto Cavallini — Fri, 31 Jul 2009 18:48:00 GMT

Vi segnalo un importante aggiornamento, è stata rilasciata una nuova versione di Deep Zoom Composer in cui sono stati risolti una serie di problemi in merito alla "path" delle immagini generate in fase di esportazione.
Come sempre, vi consiglio di installare le precedenti versioni ed installare l'aggiornamento. Si potevano riscontrare alcuni problemi nel caso impiegaste i custom templates disponibili aal'interno del tool, mentre il tutto funzionava correttamente esportando con il template di "Default".
Per riassumere il tutto, se date un occhio al file XML - "dzc_output.xml" potreste notare questa piccola incongruenza.

Per maggiori dettagli in merito vi rimando all'articolo sul blog di Expression Team a questo link.