Come ormai sapete, estendere l'interfaccia utente degli screen nelle applicazioni LightSwitch è abbastanza semplice, grazie alla possibilità di aggiungere controlli personalizzati basati su Silverlight. Il Silverlight Toolkit aggiunge alla toolbox dello sviluppatore una serie di nuovi controlli molto utili, in modo particolare per la visualizzazione dei dati come ad esempio i controlli Chart per i grafici. In questo post vedremo come aggiungere un grafico a torta ad uno screen che elenca una serie di prodotti.
Supponiamo di avere un'entità chiamata Product, come la seguente che è stata aggregata dal database Northwind:
Supponiamo poi di avere una maschera di ricerca di tipo Search Screen, che punti alla collezione Products. Poiché l'elenco di prodotti è piuttosto lungo, possiamo restringere il risultato attraverso la seguente query da applicare direttamente allo screen:
Ora aggiungiamo alla soluzione un nuovo progetto di tipo Silverlight Class Library. Do per scontato che abbiate già visto questi passaggi prima d'ora, per cui non mi soffermo troppo su questo. Rimuoviamo il file Class1.vb aggiunto per default, quindi aggiungiamo un nuovo elemento di tipo Silverlight User Control al progetto, chiamandolo ProductsChartControl. L'obiettivo è visualizzare l'elenco dei prodotti in base al prezzo unitario, all'interno del grafico. Quando il designer è pronto, modifichiamo la Grid di default come segue:
<Grid x:Name="LayoutRoot" Background="White">
<toolkit:Chart x:Name="unitsInStockChart" Background="Yellow" BorderBrush="Green" BorderThickness="2"
Title="Situation of products in stock" Grid.Column="0" >
<toolkit:Chart.Series>
<toolkit:PieSeries Name="PieSeries1" ItemsSource="{Binding Screen.ProductCollection}" IsSelectionEnabled="False"
IndependentValueBinding="{Binding ProductName}" DependentValueBinding="{Binding UnitPrice}" />
</toolkit:Chart.Series>
</toolkit:Chart>
</Grid>
Una buona idea è quella di trascinare il controllo dalla toolbox, cosicchè tutti i riferimenti e i namespace XML vengano aggiunti da Visual Studio. Il grafico è popolato tramite la sua proprietà ItemsSource che punta alla Screen.ProductCollection. Quindi la proprietà IndependentValueBinding è relativa all'asse delle Y, mentre DependentValueBinding popola effettivamente il grafico. Compiliamo a questo punto il progetto e torniamo allo Screen Designer. Selezioniamo l'elemento radice Vertical Stack|Search Product quindi click su Add Layout Item|Custom User Control. A questo punto dovremo specificare il nuovo controllo da aggiungere, quindi click su Add Reference e selezioniamo il controllo:
A questo punto non ci resta che eseguire l'applicazione e lanciare lo screen di ricerca. Come si può vedere, il grafico a torta viene popolato tramite data-binding nel modo corretto che ci aspettiamo:
Questo è un altro modo interessante di migliorare l'interfaccia grafica delle applicazioni LightSwitch, soprattutto per la visualizzazione dei dati.
Alessandro