Alessandro Del Sole's Blog

{ A programming space about Microsoft® .NET® }
posts - 1908, comments - 2047, trackbacks - 352

My Links

News

Your host

This is me! Questo spazio è dedicato a Microsoft® .NET®, di cui sono molto appassionato :-)

Cookie e Privacy

Disabilita cookie ShinyStat

Microsoft MVP

My MVP Profile

Microsoft Certified Professional

Microsoft Specialist

Xamarin Certified Mobile Developer

Il mio libro su VB 2015!

Pre-ordina il mio libro su VB 2015 Pre-ordina il mio libro "Visual Basic 2015 Unleashed". Clicca sulla copertina per informazioni!

Il mio libro su WPF 4.5.1!

Clicca sulla copertina per informazioni! E' uscito il mio libro "Programmare con WPF 4.5.1". Clicca sulla copertina per informazioni!

These postings are provided 'AS IS' for entertainment purposes only with absolutely no warranty expressed or implied and confer no rights.
If you're not an Italian user, please visit my English blog

Le vostre visite

I'm a VB!

Guarda la mia intervista a Seattle

Follow me on Twitter!

Altri spazi

GitHub
I miei progetti open-source su GitHub

Article Categories

Archives

Post Categories

Image Galleries

Privacy Policy

Visual Studio LightSwitch: utilizzare i controlli Chart del Silverlight toolkit per visualizzare dati negli Screen

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

Print | posted on venerdì 26 novembre 2010 21:41 | Filed Under [ Visual Basic Visual Studio LightSwitch ]

Powered by:
Powered By Subtext Powered By ASP.NET