Come impiegare i controlli aggiuntivi di Silverlight Toolkit in Expression Blend

Non credo ci sia bisogno di sottolineare come l’impiego del Silverlight Toolkit possa essere utile per estendere le potenzialità nello sviluppo di applicazioni Silverlight, nello specifico su scenari di applicazioni intranet/extranet e line of business (LOB). Il toolkit abilita l’utilizzo di una serie di controlli aggiuntivi rispetto ai controlli standard forniti da Silverlight. A questo link, potete avere un’anteprima di tutti i controlli contenuti nel toolkit mentre vi invito, nel caso, al download direttamente su Codeplex.

Attraverso un semplice esempio, vedremo come è possibile gestire ed utilizzare i controlli aggiuntivi, forniti dal toolkit, all’interno di Blend. L’idea è quella di estendere il classico comportamento di una ListBox in modo da visualizzare dei dati disposti su 3 colonne andando a modificare il layout dell’item – di default lo StackPanel -in cui vengono visualizzati i dati.

Vi ricordo che una delle potenzialità che caratterizzano i controlli Silverlight e WPF è proprio la possibilità di estenderli andando a customizzarne il layout ed il comportamento.
Nel nostro esempio specifico, andremo a sostituire lo StackPanel contenuto all’interno del LayoutItem della ListBox con un WrapPanel, controllo di layout disponibile all’interno di Silverlight Toolkit utilizzando Blend.

Una volta completato il download e l’installazione del toolkit sul vostro PC, create un nuovo progetto “Silverlight + Web Site” ed inserite un controllo ListBox di default.
A questo punto, si dovrà abilitare Blend in modo da poter impiegare i controlli aggiuntivi messi a disposizione dal toolkit. Il tutto si traduce caricando una DLL tra le “references” del progetto.
Sul pannello Projects, fate tasto destro sulla cartella delle “references” e selezionate l’opzione “Add reference”, da file system posizionatevi quindi all’interno di “C:\Program Files\Microsoft SDKs\Silverlight\v3.0\Toolkit\Nov09\Bin” e aggiungete la DLL “System.Windows.Controls.Toolkit.dll” .

Ricompilate il progetto, [CTRL+SHIFT+B] e troverete quindi disponibili nell’Asset Library di Blend una serie di controlli aggiuntivi rispetto a quelli di default, tra cui il Wrap Panel che andremo ad utilizzare nella nostra ListBox come Layout dell’Item (ItemsPanel).
Passiamo quindi a modificare il layout, facendo tasto destro sulla ListBox, e modifichiamo l'oggetto “ItemsPanel” sostituendolo con uno vuoto (vedi figura sotto), vi verrà richiesto di specificare un nome e di confermare il tutto.Blend vi proporrà di default uno StackPanel come PanelTemplate, che andremo a sostituire con il WrapPanel appena importato dal toolkit.

Eliminate lo StackPanel, dall’Asset Library di Blend selezionate ed inserite il WrapPanel e ritornate sullo “UserControl” principale del progetto uscendo dal PanelTemplate cliccando sul button “Scope Up”.
In conclusione, non vi resterà che disabilitare la HorizontalScrollBar dal pannello Properties ed agganciare, nel caso, una fonte dati di esempio alla ListBox per visualizzare il comportamento degli Item.

Il controllo WrapPanel, riposiziona la disposizione degli oggetti in esso contenuti a seconda delle dimensioni disponibili, se a questo punto provate a modificare le dimensioni della ListBox, sarete in grado di organizzare la disposizione degli Item contenuti su più colonne come evidenziato in figura.

Trovate disponibile qui sotto il download del progetto.