Silverlight Toolkit Released

First time here?

You are looking at the most recent posts. You may also want to check out older archives. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS or email. Thank you for visiting!

Windows on Amazon EC2 | | Silverlight Tools RTW

posted @ Tuesday, October 28, 2008 10:20 AM | 34 Comments

Today at Microsoft PDC, Scott Guthrie demonstrated some of the new controls that have been provided as a part of the Silverlight Toolkit.

The Silverlight Toolkit was what was previously named the Silverlight Control Pack in the press release when the runtime was released.

This toolkit provides a set of controls and themes for Silverlight 2. In this initial release, they are:

AutoCompleteBox
Chart
DockPanel
Label
Expander
TreeView
UpDown
ViewBox
WrapPanel
ImplicitStyleManager
Themes (6): ExpressionDark/Light, RanierOrange/Purple, ShinyBlue/Red

These controls are released as an initial version, with tests and available with Ms-Pl licensing on Codeplex. Of particular interest to me is the Charting components. Typically available at cost with other platforms, the Silverlight team is providing a base set of Charting controls with source for you to implement, customize and ship with your products. What is great about this type of control is an implementation with data binding as well, especially with an ObservableCollection. With this combination you can have a powerful real-time experience updating information without having to re-paint the entire chart or do any postbacks for the app as well.

Let’s take a quick simple sample of what I’m talking about. To use any of the controls in the toolkit, simply add a reference to the assembly in your project and then use the xmlns declaration at the root of your implementation. I’m going to use “toolkit” as mine like this:

        1: xmlns:chart="clr-namespace:Microsoft.Windows.Controls.DataVisualization.Charting;assembly=Microsoft.Windows.Controls.DataVisualization"
  

Then we can use the chart in our XAML along with some other code. Here I have a Slider and a TextBlock as well showing the value of the Slider as you change it. I’ve also added the chart series and provided some data binding syntax for the series data:

       1: <UserControl

       2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       4:     x:Class="SLToolkitDemo.Page"

       5:     xmlns:chart="clr-namespace:Microsoft.Windows.Controls.DataVisualization.Charting;assembly=Microsoft.Windows.Controls.DataVisualization"

       6:     Width="800" Height="600">

       7:     <Grid x:Name="LayoutRoot" Background="White">

       8:         

       9:         <StackPanel Orientation="Vertical" Margin="15">

            <TextBlock Text="Change Line Value"/>

            <Slider x:Name="LineValueSlider" Value="12" Maximum="150" Minimum="0" />

            <TextBlock x:Name="SliderValue" />

            <chart:Chart Height="200" LegendTitle="Item" Title="My Simple Data-bound Chart" 

                         x:Name="MyBarChart">

                <chart:Chart.Series>

                    <chart:ColumnSeries x:Name="MySalesChartData" Title="Sales of Charts" 

                                        ItemsSource="{Binding}"

                         IndependentValueBinding="{Binding ChartType}"

                         DependentValueBinding="{Binding ChartSaleCount}"/>

                </chart:Chart.Series>

            </chart:Chart>

            <chart:Chart Height="200" Title="My Simple Pie Chart" x:Name="MyPieChart">

                <chart:Chart.Series>

                    <chart:PieSeries ItemsSource="{Binding}" 

                                     IndependentValueBinding="{Binding ChartType}"

                                     DependentValueBinding="{Binding ChartSaleCount}" />

                </chart:Chart.Series>

            </chart:Chart>

        </StackPanel>

        

    </Grid>

</UserControl>

Now in my code I’ve hacked together some simulation of the ObservableCollection changing the value of the Line data to the value of the slider. Because I implemented my class of Sale with INotifyPropertyChanged the default databinding of OneWay enables my target to be updated once any of my source (salesData) changes. Here’s the full code:

       1: using System;

       2: using System.Windows;

       3: using System.Windows.Controls;

       4: using System.Windows.Documents;

       5: using System.Windows.Ink;

       6: using System.Windows.Input;

       7: using System.Windows.Media;

       8: using System.Windows.Media.Animation;

       9: using System.Windows.Shapes;

using System.Collections.ObjectModel;

using Microsoft.Windows.Controls.DataVisualization.Charting;

  

namespace SLToolkitDemo

{

    public partial class Page : UserControl

    {

        ObservableCollection<Sale> salesData;

  

        public Page()

        {

            // Required to initialize variables

            InitializeComponent();

            salesData = SalesData.GetData();

            Loaded += new RoutedEventHandler(Page_Loaded);

        }

  

        void Page_Loaded(object sender, RoutedEventArgs e)

        {

            ColumnSeries column = MyBarChart.Series[0] as ColumnSeries;

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

            column.ItemsSource = salesData;

            pie.ItemsSource = salesData;

            LineValueSlider.ValueChanged += new RoutedPropertyChangedEventHandler<double>(LineValueSlider_ValueChanged);

        }

  

        void LineValueSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

        {

            salesData[2].ChartSaleCount = Convert.ToInt32(e.NewValue);

            SliderValue.Text = e.NewValue.ToString();

        }

    }

}

And here is the SalesData.cs class:

       1: using System;

       2: using System.Net;

       3: using System.Windows;

       4: using System.Windows.Controls;

       5: using System.Windows.Documents;

       6: using System.Windows.Ink;

       7: using System.Windows.Input;

       8: using System.Windows.Media;

       9: using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Collections.ObjectModel;

using System.Collections.Generic;

using System.ComponentModel;

  

namespace SLToolkitDemo

{

    public class SalesData

    {

        public static ObservableCollection<Sale> GetData()

        {

            ObservableCollection<Sale> sales = new ObservableCollection<Sale>();

            

            sales.Add(new Sale() { ChartSaleCount = 100, ChartType = "Bar" });

            sales.Add(new Sale() { ChartSaleCount = 73, ChartType = "Pie" });

            sales.Add(new Sale() { ChartSaleCount = 12, ChartType = "Line" });

            sales.Add(new Sale() { ChartSaleCount = 24, ChartType = "Spline" });

  

            return sales;

        }

    }

  

    public class Sale : INotifyPropertyChanged

    {

        private int _count;

        public string ChartType { get; set; }

        public int ChartSaleCount

        {

            get { return _count; }

            set

            {

                _count = value;

                NotifyPropertyChanged("ChartSaleCount");

            }

        }

  

        #region INotifyPropertyChanged Members

  

        public event PropertyChangedEventHandler PropertyChanged;

  

        public void NotifyPropertyChanged(string propertyName)

        {

            if (PropertyChanged != null)

            {

                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

            }

        }

        #endregion

    }

}

The result of which is when I move the slider to perhaps simulate real-time data, I see the data binding change in the chart represented here:

As you can see I have two charts using the same ObservableCollection<T>, so changing the data, changes both of the charts without any extra effort.

Charting along with some of the other controls brings this really, really nice addition to Silverlight 2. I hope you find them valuable. We’ll be using them in projects and digging deeper (especially in charting) on the Silverlight Community Site, so I hope you visit there. You can download the actual sample project for this file as well right here: SLToolkitDemo.zip

If you liked this post, please consider subscribing to the feed for more like it. Justin Angel is also a program manager for the toolkit that you should check out some depth posts from him on the controls as well. You can visit the samples site here showing you a gallery of the controls in implementation.

tags: silverlight, charting, charts, ria, xaml, observablecollection, silverlight toolkit, silverlight control pack, codeplex, ms-pl, open source

This work is licensed under a Creative Commons Attribution By license.

Windows on Amazon EC2 | | Silverlight Tools RTW

First time here?

Silverlight Toolkit Released – More controls!