Now that Blend 3 + Sketchflow RC has been released, we thought it would be a good idea to write a post on how to integrate charts into your prototype, some of the manual steps described here will be fixed in future Chart FX for WPF builds by providing design time assemblies for Blend 3.

Once you have created a WPF Sketchflow Prototype application, you have to

• Add a reference to our assemblies
  
  In the projects tab add a reference to the PrototypeScreens project to ChartFX.WPF.dll
  
• Create a chart
  
  In the assets window, expand the Controls\All item and select Chart, note that because the WPF toolkit also includes a chart class you have to be careful of which one you select. Our icon is a blue and green pie.
  
   
  

As soon as you drop a chart in your screen, you will quickly notice that the default chart look does not go well with the squiggly style used in Sketchflow.

Luckily, we borrowed a great piece of code that Robby Ingebretsen wrote called HandDrawnShapes and extended it to create a style for our chart that looks as if it was hand drawn, to use this style you have to add a reference to ChartFX.WPF.Motifs.HandDrawn.dll (same way as our core assembly), then you need to add an extra namespace to the top-level UserControl tag in the XAML

xmlns:cfxhanddrawn="http://schemas.softwarefx.com/chartfx/wpf/80/ext/handdrawn"

And set the Chart style property to use the handdrawn style

  <cfx:Chart Style="{x:Static cfxhanddrawn:HandDrawn.Style}" Margin="8,8,118,147"/>

We got closer but clearly there is too much color, the font does not match and the outside chart border is not squiggly, although we could change properties in the chart to customize its appearance, we will get a more reusable result if we try to create a global style with these changes in the global resource dictionary so that all charts inherit these changes.

To do this we will modify our app.xaml to create a style for charts that uses some of the handdrawn work but also integrates better with the sketch style used in your prototypes

<Style TargetType="{x:Type cfx:Chart}">
  <Setter Property="Template"
          Value="{x:Static cfxmotifs:Simple.ChartTemplate}"/>
  <Setter Property="GalleryTemplates"
          Value="{x:Static cfxhanddrawn:HandDrawn.GalleryTemplates}"/>
  <Setter Property="MarkerTemplates"
          Value="{x:Static cfxhanddrawn:HandDrawn.MarkerTemplates}"/>
  <Setter Property="MergeResources"
          Value="{x:Static cfxhanddrawn:HandDrawn.MergeResources}"/>
  <Setter Property="Border" Value="{StaticResource BorderSketch}"/>
  <Setter Property="Palette" Value="{StaticResource SketchPalette}"/>
  <Setter Property="FontFamily" Value="{DynamicResource FontFamily-Sketch}"/>
  <Setter Property="FontSize" Value="{DynamicResource SizeDouble-Sketch}"/>
</Style>

For the first four properties we are simply using static properties defined in our handdrawn and simple templates, note that we are cheating on MergeResources because this property was recently added to the HandDrawn class so you might have to download our most recent hotfix.

For the next two properties (Border and Palette) we are creating local copies, the border will use Sketchflow objects so that its appearance matches more the other sketchflow elements, the palette is basically a color palette where all backgrounds are transparent and all foregrounds and borders match the color used in the prototypes.

The last 2 properties (FontFamily and FontSize) will use dynamic resources defined in SketchStyles.xaml

Although the final product certainly looks simple which is key to reinforce the fact that this is a prototype and not fixate on visual attributes, you have a fully fledged charting engine that you can later customize the fit the look of your WPF application.

JuanC