Silverlight Toolkit - Charting

Jak wcześniej napisałem, zamierzam pociągnąć serię artykułów nt. Silverlight. Samą definicję co to jest Silverlight można odnaleźć w internecie (np w wikipedii - http://en.wikipedia.org/wiki/Microsoft_Silverlight). Silverlight działa w podobny sposób jak adobe flash. Instaluje się jako plugin do przeglądarki (ok. 4 MB do pobrania) i w założeniu jest multiplatformowy. Myślę, że na więcej informacji teoretycznych przyjdzie jeszcze czas, teraz przejdźmy do sedna :)

Podczas obecnie tworzonego projektu potrzebowałem przedstawić klientowi dane w formie wykresu. Jak wiadomo, jeden diagram potrafi powiedzieć więcej niż 4 strony tekstu.
Pomocny okazał się pakiet całkowicie darmowych kontrolek Silverlight toolkit, który można pobrać ze strony - http://silverlight.codeplex.com/
Zawiera on szereg dodatkowych kontrolek, które ułatwiają codzienną pracę dewelopera. Pakiet zawiera także kilka rodzajów wykresów z których skorzystałem podczas tworzenia aplikacji.

Dane w aplikacji którą tworzyłem (i w dalszym ciągu rozwijam) pobierane są z webserwisu (WCF). W przykładzie obrazującym działanie wykresów, wykorzystam prostsze rozwiązanie, polegające na zwrócenie danych przez metodę klasy. Jako rodzaj wykresów wybrałem wykres kołowy.

Tak więc przystępujemy do działania:
1. Na początek tworzymy nowy projekt Silverlight w Visual Studio 2010
2. Dodajemy na formatkę element Chart oraz PieSeries:

3. Stworzymy naszą klasę która zwróci dane do wyświetlenia na wykresie. Będzie to prosta klasa zwracająca średnie wynagrodzenie kwartalnie:

        public IEnumerable<SalaryItem<double>> GetQuarterlySalary(double startValue)

        {

            IList<SalaryItem<double>> quarterlySalary = new List<SalaryItem<double>>();

            for (int i = 1; i < 13; i += 4)

            {

                quarterlySalary.Add(new SalaryItem<double> { ItemName = CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(i), Value = startValue });

                startValue *= 1.02;

            }

            return quarterlySalary;

        }

Składnik wypłaty to prosta klasa z dwoma właściwościami:

    public class SalaryItem<T>

    {

        public string ItemName { get; set; }

        public T Value { get; set; }

    }

5. Źródło danych podłączymy po załadowaniu aplikacji silverlight:

        private void UserControl_Loaded(object sender, RoutedEventArgs e)

        {

            PieSeries pie = chrtAverageSalary.Series[0] as PieSeries;

            if (pie != null)

            {

                pie.ItemsSource = new AverageSalary().GetQuarterlySalary(3400);  

            }

        }

6. W kodzie XAML dodajemy informacje, jakie pole odpowiada w źródle danych za nazwę w legendzie jak i która właściwość to wartość dla danego składnika:

        <toolkit:Chart Name="chrtAverageSalary" Title="Average Salary">

            <toolkit:PieSeries IndependentValueBinding="{Binding ItemName}" DependentValueBinding="{Binding Value}">

            </toolkit:PieSeries>

        </toolkit:Chart>

9. Całość wygląda następująco po uruchomieniu:

Prosty wykres stworzony. Dostajemy także możliwość podglądu wartości koła poprzez najechanie na odpowiednią część.

W dalszej części artykułu zostaną omówione bardziej skomplikowane aspekty, głównie związane z sposobem prezentacji danych.