×

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!

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">
  10:             <TextBlock Text="Change Line Value"/>
  11:             <Slider x:Name="LineValueSlider" Value="12" Maximum="150" Minimum="0" />
  12:             <TextBlock x:Name="SliderValue" />
  13:             <chart:Chart Height="200" LegendTitle="Item" Title="My Simple Data-bound Chart" 
  14:                          x:Name="MyBarChart">
  15:                 <chart:Chart.Series>
  16:                     <chart:ColumnSeries x:Name="MySalesChartData" Title="Sales of Charts" 
  17:                                         ItemsSource="{Binding}"
  18:                          IndependentValueBinding="{Binding ChartType}"
  19:                          DependentValueBinding="{Binding ChartSaleCount}"/>
  20:                 </chart:Chart.Series>
  21:             </chart:Chart>
  22:             <chart:Chart Height="200" Title="My Simple Pie Chart" x:Name="MyPieChart">
  23:                 <chart:Chart.Series>
  24:                     <chart:PieSeries ItemsSource="{Binding}" 
  25:                                      IndependentValueBinding="{Binding ChartType}"
  26:                                      DependentValueBinding="{Binding ChartSaleCount}" />
  27:                 </chart:Chart.Series>
  28:             </chart:Chart>
  29:         </StackPanel>
  30:         
  31:     </Grid>
  32: </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;
  10: using System.Collections.ObjectModel;
  11: using Microsoft.Windows.Controls.DataVisualization.Charting;
  12:  
  13: namespace SLToolkitDemo
  14: {
  15:     public partial class Page : UserControl
  16:     {
  17:         ObservableCollection<Sale> salesData;
  18:  
  19:         public Page()
  20:         {
  21:             // Required to initialize variables
  22:             InitializeComponent();
  23:             salesData = SalesData.GetData();
  24:             Loaded += new RoutedEventHandler(Page_Loaded);
  25:         }
  26:  
  27:         void Page_Loaded(object sender, RoutedEventArgs e)
  28:         {
  29:             ColumnSeries column = MyBarChart.Series[0] as ColumnSeries;
  30:             PieSeries pie = MyPieChart.Series[0] as PieSeries;
  31:             column.ItemsSource = salesData;
  32:             pie.ItemsSource = salesData;
  33:             LineValueSlider.ValueChanged += new RoutedPropertyChangedEventHandler<double>(LineValueSlider_ValueChanged);
  34:         }
  35:  
  36:         void LineValueSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
  37:         {
  38:             salesData[2].ChartSaleCount = Convert.ToInt32(e.NewValue);
  39:             SliderValue.Text = e.NewValue.ToString();
  40:         }
  41:     }
  42: }

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;
  10: using System.Windows.Shapes;
  11: using System.Collections.ObjectModel;
  12: using System.Collections.Generic;
  13: using System.ComponentModel;
  14:  
  15: namespace SLToolkitDemo
  16: {
  17:     public class SalesData
  18:     {
  19:         public static ObservableCollection<Sale> GetData()
  20:         {
  21:             ObservableCollection<Sale> sales = new ObservableCollection<Sale>();
  22:             
  23:             sales.Add(new Sale() { ChartSaleCount = 100, ChartType = "Bar" });
  24:             sales.Add(new Sale() { ChartSaleCount = 73, ChartType = "Pie" });
  25:             sales.Add(new Sale() { ChartSaleCount = 12, ChartType = "Line" });
  26:             sales.Add(new Sale() { ChartSaleCount = 24, ChartType = "Spline" });
  27:  
  28:             return sales;
  29:         }
  30:     }
  31:  
  32:     public class Sale : INotifyPropertyChanged
  33:     {
  34:         private int _count;
  35:         public string ChartType { get; set; }
  36:         public int ChartSaleCount
  37:         {
  38:             get { return _count; }
  39:             set
  40:             {
  41:                 _count = value;
  42:                 NotifyPropertyChanged("ChartSaleCount");
  43:             }
  44:         }
  45:  
  46:         #region INotifyPropertyChanged Members
  47:  
  48:         public event PropertyChangedEventHandler PropertyChanged;
  49:  
  50:         public void NotifyPropertyChanged(string propertyName)
  51:         {
  52:             if (PropertyChanged != null)
  53:             {
  54:                 PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
  55:             }
  56:         }
  57:         #endregion
  58:     }
  59: }

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.


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


10/28/2008 11:51 AM | # re: Silverlight Toolkit Released – More controls!
Does this include the source code to WrapPanel and other controls? I'd REALLY (an i mean REALLY) like to look at the source code and related files (xaml/resources) to LEARN how to write my own controls and work with the Silverlight framework from a control writer's perspective.
10/28/2008 12:14 PM | # re: Silverlight Toolkit Released – More controls!
@sysrpl, the source code for WrapPanel and all these controls is on the CodePlex site: http://www.codeplex.com/Silverlight/
10/28/2008 1:17 PM | # re: Silverlight Toolkit Released – More controls!
like the new controls.

am very new to silverlight / wpf etc.
was wondering whether it would be possible to implement drill-down functionality on a chart (or a data-grid) in the same way that it can be done in reporting services
i.e. to show a chart - e.g. a histogram - if the user then clicks on one of the bars, drill-down occurs to a sub-set of the data
or
if a grid is displayed, clicking on one of the cells in the grid would drill-down to a sub-set of the data
10/28/2008 2:41 PM | # re: Silverlight Toolkit Released – More controls!
Очень вовремя и очень полезная штука! Спасибо!
I like this!!! Thx.
10/28/2008 4:37 PM | # re: Silverlight Toolkit Released – More controls!
markse,

You may not have seen it yet, but there's a simple drill-down sample in the public charting sample page (silverlight.net/.../default.html, it's on the Pie page). All the existing sample does is populate some TextBlocks with details about the selected item, but the Series.SelectionChanged handler you implement can do whatever you want. Changing the chart itself may get a little tricky [translation: I haven't done it yet and can see some hurdles there :) ], but should be possible. I'd start by swapping out the Series.ItemsSource to the new data (or better yet, just swap out the old Series and swap in a new one) and see where things go from there. :) I've added a note to look into blogging a sample of this as time permits - if and when I do, you can see what I've done on my blog, http://blogs.msdn.com/Delay/.

Hope this helps!
10/28/2008 5:17 PM | # re: Silverlight Toolkit Released – More controls!
Very good job Tim!
Thanks,
Rachida
10/28/2008 7:34 PM | # re: Silverlight Toolkit Released – More controls!
Who is on the left-top ? So handsome and cool !
10/28/2008 11:05 PM | # re: Silverlight Toolkit Released – More controls!
I think the best open source chart control for silverlight is http://www.visifire.com/
10/29/2008 8:37 AM | # re: Silverlight Toolkit Released – More controls!
After one minute of usage, the firefox process rises too over 300 megs... Besides that, performance really is slow... Is this on the "todo" list Tim ?
10/30/2008 9:04 AM | # re: Silverlight Toolkit Released – More controls!
A question: Why doesn't Silverlight Toolkit has an installer ?
Is it supposed to unzip the toolkit binaries and add a project reference to an assembly from the custom location where the files were unzipped ?

Wouldn't be much nicer to have an installer ?

10/30/2008 9:16 AM | # re: Silverlight Toolkit Released – More controls!
Andrew: Since there is nothing to "install" it would be an installer that just copies files. Because this is an open source project we don't install to the Microsoft SDK locations. So yes, you just want to unzip to the location of your choice and add references as you desire.
10/31/2008 2:35 AM | # re: Silverlight Toolkit Released – More controls!
Hi Tim,

Just trying out these charts with SL enabled WCF services, working very well.

1.Just want to know is there any way to wrap up Chart title if its going beyond [My current Canvas orientation is Width="400" Height="300",seeking solution without change in orientation if any]

2.Any way to give sub-title to main chart title?

3.If some one actually want to embed a quick link/Hyperlink between say Chart title and Actual Graph, then it is not allowing to do so.
e.g Say title is "ABC Monthly Sales" immidiately followed by Link to ABC Portal and then actual chart below the link while rendering.
like..




Thanks,
Vikram Pendse.
Microsoft MVP.
11/3/2008 8:29 AM | # re: Silverlight Toolkit Released – More controls!
I have a question about your example code.

You do this to bind data to the column chart:

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

I'm guessing the variable "column" will referer to

in the XAML. Right?

If so, why can't you write this instead:

MySalesChartData.ItemsSource = salesData;

I've tried it, and it doesn't work. Seems like MySalesChartData is null. How come?


Thanks.
11/3/2008 8:43 AM | # re: Silverlight Toolkit Released – More controls!
haagel: I tried that as well. The ColumnSeries I'm guessing isn't created until data is available.
11/3/2008 8:57 AM | # re: Silverlight Toolkit Released – More controls!
I tried to do as in your example, but then also assign new data to the columnseries in a button click event:

void btnInsertData_Click(object sender, RoutedEventArgs e)
{
MySalesChartData.ItemsSource = newSalesData;
}

Doesn't work... Maybe this is a bug?
11/3/2008 9:15 AM | # re: Silverlight Toolkit Released – More controls!
haagel: I'll have to try again myself when I have a moment. You can pose the question to their forum at http://silverlight.net/forums/35.aspx
11/4/2008 8:57 AM | # re: Silverlight Toolkit Released – More controls!
Vikram: Great suggestions. Might I ask you to also ask them on the control team forum: http://silverlight.net/forums/35.aspx as well as log the suggestions on the Codeplex site: www.codeplex.com/Silverlight/WorkItem/List.aspx. That way our team can keep track of these suggestions/bugs.
11/6/2008 12:20 AM | # Porting to WPF
Are these controls going to be ported to WPF? (Or can they be used already today in WPF?).

Kudos to the Silverlight team!
11/6/2008 12:44 AM | # re: Silverlight Toolkit Released – More controls!
With the exception of Charting, most of these are already in WPF (ViewBox, DockPanel, etc.) in some fashion. VisualStateManager was ported for WPF in the WPF Toolkit, but I haven't tried the implicit style manager with it in WPF yet.
12/3/2008 12:07 AM | # re: Silverlight Toolkit Released – More controls!
Hi Tim,
Firstly, I would appericiate for your nice effort.

Now, my problem comes this way:
I have tried simple samples and also yours one but nothing is visible in "Preview" of my silverlight application.

Can u plz guide me on this issue?

Regards,
Youdh.
12/3/2008 8:27 AM | # re: Silverlight Toolkit Released – More controls!
Youdhbir: I'm not understanding where you mean? What preview?
12/10/2008 5:59 PM | # re: Silverlight Toolkit Released – More controls!
Dear Tim,

The chartsample.gif you've created was great. Maybe this if off the topic about siverlight toolkit but the animated image is quite good. Can you shed some tips or tell us about the tools you use to create it.
Really do appreciate it Tim
Thanks
12/10/2008 8:31 PM | # re: Silverlight Toolkit Released – More controls!
Dath: I used the wonderful tool that is Camtasia. It has an output option for animated GIF.
12/11/2008 4:55 PM | # re: Silverlight Toolkit Released – More controls!
Hi Tim
Your tips really helps.
Thanks Tim
12/16/2008 4:08 PM | # re: Silverlight Toolkit Released – More controls!
I have downloaded the SL Toolkit December release to a given location. Performed a search for other DLLs that began with 'Microsoft.Windows.Controls' so that I would know which directory to place them in and came up empty. In what directory should the 'Theming', 'Input', etc. DLLs be placed? And also, how are they accessed (in the Page.xaml UserControl xmlns?)?
12/17/2008 1:28 PM | # re: Silverlight Toolkit Released – More controls!
Donald: Take a look at the sample browser at silverlight.net/.../default.html to see some samples, how the code is used, referenced, etc. You may also want to view the introduction video here silverlight.net/learn/learnvideo.aspx?video=146244
1/21/2009 5:52 AM | # re: Silverlight Toolkit Released – More controls!
Hi Ram, you should definitely put that request on the Issue Tracker on the CodePlex project site: http://www.codeplex.com/Silverlight.
1/28/2009 2:28 PM | # re: Silverlight Toolkit Released – More controls!
Hi Tim,

Great samples! I apologize if this has already been asked, but how do you set the vertical scale on the charts such as Column Series charts to be fixed? In other words, if I'm showing percentages for example, I always want the scale to be 0 to 100. If the highest value is 19 for instance, the scale will be redrawn to a value such as 20 (the top line of the chart). I want it to stay fixed at 100.

Thanks!

John
1/31/2009 12:13 AM | # re: Silverlight Toolkit Released – More controls!
Hello

I have a requirement. As I am new to silverlight I am not able to decide. The requirement is I need to display charts in aspx page developed in vs 2005. can any one tell me how to develop charts using vs 2005. I find many silverlight tools on net can any one tell which tools i can use for vs 2005???? Thank You
3/31/2009 11:12 PM | # re: Silverlight Toolkit Released – More controls!
is there any menu contral for silverlight, i like the idea of SampleBrowser
6/18/2009 11:47 AM | # re: Silverlight Toolkit Released – More controls!
In the Silverlight charting control is there any way to get the StripLine functionality that you can get when using System.Windows.Forms.DataVisualization.Charting?
I have a graph with line series and want to show blackout periods on the graph.
Thanks
9/7/2009 10:40 PM | # re: Silverlight Toolkit Released – More controls!
Awesome Explaination
9/5/2011 3:19 AM | # re: Silverlight Toolkit Released – More controls!
This site is very informative..Thanks for sharing this with us...
State-of-the-art-mailer.com
9/27/2011 9:52 PM | # re: Silverlight Toolkit Released – More controls!
If firm having better coordination between superior and subordinate then management brings new technology and techniques..
Pelet

 
Please add 8 and 3 and type the answer here:

DISCLAIMER:

The opinions/content expressed on this blog are provided "ASIS" with no warranties and are my own personal opinions/content (unless otherwise noted) and do not represent my employer's view in any way.