Jump to content
Software FX Community

Displaying charts in a Blend 3 Sketchflow prototype


Recommended Posts

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.

    Posted Image 

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.

Posted Image

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

[color= red]xmlns:cfxhanddrawn[/color][color= blue]=[/color]"[color= blue]http://schemas.softwarefx.com/chartfx/wpf/80/ext/handdrawn[/color]"

And set the Chart style property to use the handdrawn style

  [color= blue]<[/color][color= #a31515]cfx:Chart [/color][color= red]Style[/color][color= blue]=[/color]"[color= blue]{x:Static cfxhanddrawn:HandDrawn.Style}[/color]" [color= red]Margin[/color][color= blue]=[/color]"[color= blue]8,8,118,147[/color]"[color= blue]/>[/color]

Posted Image

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

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

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

Posted Image Posted Image

Posted Image Posted Image

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.


Link to comment
Share on other sites

  • Create New...