Easy as Pie: Percentage Pie-Charts with the Expression Blend 4 Pie Shape

During the evolution of Silverlight and Expression Blend we’ve had to create Pie Charts for various projects. Often these were to illustrate the state of a percentage value in the application. Thus we’ve build our own a few times over. Now, with the new Pie Shape in Expression Blends 4 this has become a no-brainer. Here´s how:

    

1. Create a new Silverlight Application project in Blend 4
2. Open the Asset Panel and select the Shapes category
3. Select the Pie Shape
4. DoubleClick the Pie Shape at the bottom of the ToolBox so it is added to the Artboard with default values of StartAngle 90 and EndAngle 360
5. Name it Pie1 in the Objects and Timeline panel. This way you can use code to access its properties.
6. If you want you can give it a Fill Color to see it better.
7. Add an event handler called UpdateArcEndAngle on the MouseLeftButtonUp event of the LayoutRoot Grid.
8. In the Code Behind file (MainPage.xaml.cs) add a line of code to update the StartAngle of the Arc:private void UpdateArcStartAngle(object sender, MouseButtonEventArgs e)
   {
       Pie1.StartAngle += 45;
   }
9. Build the project and click the Pie to update it with 45 degrees each time you click it. When the Pie has reached the 360 degrees, it with start again at 45.

Of course, you can style a Pie Shape any way you want. Now it is easier than ever to show a percentage Pie Chart…

  

 

Njoy!