Sunday, August 28, 2011

Glass Effect Silverlight Charts

I was working on developing a dashboard where I had to use Microsoft Silverlight Toolkit to create bar charts, but none of the charts would give Glass look or effect, so I had to search a way to create the same on top of existing toolkit charts.

After so much of goggling about Slverlight styles & themes, finally I managed to get glass & cylinder effect on the bars like below.

Therefore I have written this article to help developers who are in need of this.

In Microsoft Silverlight Toolkit, every Bar ColumnSeries class has child called DataPointStyle which can be customized to get this effect.

Basically, there would be two layers for each datapoint, one to render the original color and second is to get the glass mask on top of it.

Here are the few samples with source code.



Glass Effect



Source Code :

  
   
    
      100,2000
      105,2001
      10,2002
      88,2003
      150,2004
      125,2005
      93,2006
      112,2007
      145,2008
      165,2009
     
   
   
    
 






Cylinder Effect



Source Code :

  
   
    
      100,2000
      105,2001
      10,2002
      88,2003
      150,2004
      125,2005
      93,2006
      112,2007
      145,2008
      165,2009
     
   
   
    
 




You can reach me at srikanthvemulapally@gmail.com for any queries.
Thanks.