Aggiungiamo tutti i nostri componenti e a questo punto diamo un Ok alla nostra finestra di dialogo dove noteremo che i componenti verranno aggiunti all’interno della nostra Toolbox, pronti per essere utilizzati.
A questo punto con un semplice Drag&Drop possiamo andare ad aggiungere i componenti all’interno della nostra applicazione.
Quando aggiungiamo un componente del Toolkit all’interno del nostro progetto, Visual studio 2008, provvederà per noi ad aggiungere all’interno dei references il riferimento (link) al file dove risiede il nostro componente.
Le referenze principali sono due :
· Microsoft.Windows.Controls
dove sono contenuti la maggior parte dei controlli di visualizzazione come il Treeview o la Label
· Microsoft.Windows.Controls.DataVisualization
dove invece sono contenuti i controlli inerenti ai chart.
Oltre ai reference visual studio creerà per noi anche il namespace per il toolkit, attraverso l’istruzione :
xmlns:controls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls" xmlns:charting="clr-namespace:Microsoft.Windows.Controls.DataVisualization.Charting;assembly=Microsoft.Windows.Controls.DataVisualization"
che và inserito all’interno della definizione dello UserControl.
Ora che abbiamo installato e siamo pronti ad utilizzare il nostro toolkit,mettiamo all’opera.
Esempio :
Creiamo un piccolo grafico per la rappresentazione dei dati della popolazione di alcune città italiane.
Per prima cosa aggiungiamo nel nostro codice Xaml, facendo un drag & drop dal tab Silverlight Toolkit, il componente Chart.
La prima cosa da fare è sicuramente quella di assegnargli un nome ed un titolo :
<charting:Chart Title=" Grafico di esempio (fonte wikipedia)" Name="mychart">
A questo punto possiamo decidere il tipo di grafico che intediamo creare, questo può essere essenzialmente di due tipi :
· Pie ( grafico tipico a torta )
· Series ( con barre verticali )
Per il nostro esempio scegliamo la seconda possibilità.
<charting:Chart.Series>
Ora non ci resta che configurare le colonne del nostro grafico. Per questo esempio useremo un semplice binding di dati da una generica lista di classi di tipo Città, che espongono due proprietà Nome e Popolazione.
<charting:ColumnSeries
Title="Popolazione"
ItemsSource="{Binding}"
IndependentValueBinding="{Binding nome}"
DependentValueBinding="{Binding popolazione}" />
charting:Chart.Series>
charting:Chart>
Come si vede dal codice abbiamo definito un titolo al grafico, abbiamo impostato i valori indipendenti ovvero le colonne per il nostro grafico e i valori dipendenti ovvero i relativi dati per ogni colonna.
A questo punto non ci resta che configurare nel Code Behind il bindig dei dati.
Per fare questo per prima cosa dobbiamo crearci una semplice classe di nome città che espone due proprietà, una per il nome della città e una per la popolazione.
Una volta fatto questo abbimo bisogno di un collection di città, che andiamo a riempire nel momento di inizializzazione della pagina.
Public Sub New()
InitializeComponent()
listOfCitta.Add(New citta("Cagliari", "158041"))
listOfCitta.Add(New citta("Milano", "1298972"))
listOfCitta.Add(New citta("Roma", "2705317"))
End Sub
Ora andiamo a impostare l’item source per la serie di colonne del nostro grafico che chiaramente sarà la nostra collection di città.
Private Sub Page_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
Dim colum As ColumnSeries = mychart.Series(0)
colum.ItemsSource = listOfCitta
End Sub
Lanciamo il progetto con F5, e visualizziamo il nostro grafico.
Conclusioni
Il toolkit è uno strumento essenziale per chi vuole iniziare a programmare in Silverlight, consentendo di aumentare la produttività delle nostre applicazioni. E’ importante dire che il toolkit viene distribuito con Microsoft Public License che consente di riutilizzare il codice senza vincoli di licenza.