In February 2009 we released the Graphing control, which is an exemplar application of the Microsoft Health CUI Design Guidance – Displaying Graphs and Tables. Although the default implementation is styled to meet healthcare guidelines, it can also be customized to fit other needs.

One of the core features of the Graphing control is design-time support, whereby the control can be seen and customized during design. We recommend using Microsoft Expression Blend, as Microsoft Visual Studio 2008 does not support the Silverlight design view.

The Graphing control can be easily restyled (reskinned) to match your application's user interface. We support the following two approaches for restyling a graph:

• Customize by setting properties
• Customize by providing a ControlTemplate

Customize by setting properties

Customizing the background color of the graph and the normal range shading can be simply done by setting properties. The following code snippet demonstrates this:

Other elements that can be customized by setting properties are:

• DataMarkerTemplate: this property can be set to customize the symbol used to display each data point
• LabelTemplate: this property can be set to customize the label shown when hovering over a data point

Customize by providing a ControlTemplate

You can customize the appearance of a control by giving it a new ControlTemplate which specifies the visual structure and visual behavior of a control. When you create a ControlTemplate, the appearance of the existing control will be changed without altering its functionality.

The easiest way to create a ControlTemplate is to modify the existing one rather than starting from scratch.

How to get the existing ControlTemplate:

1. Open Microsoft Expression Blend and create a new Silverlight application.



2. Add a reference to the Microsoft.Cui.Controls assembly.



3. Click on the Asset Library icon on the left hand toolbar, navigate to the Custom Controls tab and select TimeLineGraph.



4. Hold the mouse left button and draw a rectangle on the design surface to add the TimeLineGraph to the page. The graph is added to page.



5. Right click on the graph, select Edit Control Parts (Template).
6. Select Edit a copy.
7. Click OK when prompted.
8. Switch to the XAML view where you can view a local copy of the control template.

Apart from generating a local copy of the template, getting an existing control template also copies all the required resources and assigns the new local control template to the control.

Now that you have a local copy of the control template, any changes to this template will modify the appearance of the control. You can add or remove elements from the generated ControlTemplate, however there are certain elements which the Graphing control expects to be present and removing those elements, or changing the type, may cause the Graphing control not to be rendered properly, or even cause runtime exceptions. For a complete list of elements that can be changed, see the Graphing Control page.

How to change the background color of the graph area:

1. Get the existing control template and generate a local copy of the template (as above). 
2. Switch to the XAML view.
3. Find the Canvas with the name ELEMENT_nonDynamicRightAxisViewPort.
4. Change the background to the desired color.
   
   

   <Canvas Margin="5,30,0,5" x:Name="ELEMENT_nonDynamicRightAxisViewPort" Grid.Row="2" Background="Gray" Canvas.ZIndex="5" > <Canvas x:Name="ELEMENT_NonDynamicRightAxisLabels" /> <Canvas x:Name="ELEMENT_NonDynamicRightAxisLines" /> </Canvas>



5. Switch to Design view to see the new color.
   
   

How to position the X-axis at the bottom the graph:

1. Get the existing control template and generate a local copy of the template (as above). 
2. Switch to the XAML view.
3. Modify ELEMENT_nonDynamicRightAxisViewPort to add a bottom margin instead of a top margin. Change Margin="5,30,0,5" to Margin="5,0,0,30".
4. Modify ELEMENT_scrollBarVertical to add a bottom margin instead of a top margin. Change Margin="2,30,2,5" to Margin="2,0,2,30".
5. Replace the contents of ELEMENT_dynamicMainLayerTemplate with the following:



<Grid x:Name="ELEMENT_dynamicMainLayer">     <Grid.RowDefinitions>         <RowDefinition Height="*"/>         <RowDefinition Height="30"/>     </Grid.RowDefinitions>     <Canvas Grid.Row="1" x:Name="ELEMENT_dynamicTopAxisLayerViewport" VerticalAlignment="Top" Canvas.ZIndex="10" Margin="0,5,0,0">         <Canvas x:Name="ELEMENT_dynamicTopAxisLayer"/>     </Canvas>     <Canvas Grid.Row="0" x:Name="ELEMENT_dynamicPlotLayerViewport" Canvas.ZIndex="5">         <Canvas x:Name="ELEMENT_dynamicPlotLayer"/>     </Canvas> </Grid>



6. Modify ELEMENT_dynamicMainLayerViewport and add an attribute Background="White".
7. Add the property PlotTicksBeforeLabels="True" to the TimeLineGraph.
8. Switch to the Design view.

How to include a legend:

1. Add a new Row to the Grid with name ELEMENT_layoutRoot.
   
   

   <RowDefinition Height="30"/>



2. Add the content to the row X-axis - time, Y-axis - beats per minute.
   
   

   <Border Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2"> <StackPanel> <TextBlock FontWeight="Bold" FontStyle="Italic" >X-axis - time</TextBlock> <TextBlock FontWeight="Bold" FontStyle="Italic" >Y-axis - beats per minute</TextBlock> </StackPanel> </Border>



3. Switch to the Design view to see the legend.
   
   

Graph layout and template parts:

The following illustrates the logical organization of elements within the graph:

• Title: Contains the Title, Units, Units description and buttons for scale to fit and minimize
• Axis: Contains the X-axis. Values of the axis are updated when the horizontal scrollbar is moved
• Graph area: Contains the plot area where the graph is actually plotted
• Horizontal scrollbar: Scrollbar to view the data outside the visible window
• Vertical scrollbar: Scrollbar to view data outside the visible Y-axis region

Graph area is constituted of two main parts:

• Dynamic area: This contains elements that will be redrawn when a scroll happens either horizontally or vertically. Examples of these elements are data points, interpolation lines and 'out of view' arrow buttons. The dynamic layer contains two main elements:
  • Axis
  • Plot area
• Non-dynamic area: This contains elements or controls that will be added once to the graph. Examples of these elements are grid lines, background color and Y-axis. This area will be plotted only once, and will not be updated when scrolling either horizontally or vertically. It has two main elements:
  • Axis lines
  • Axis labels

Things to check when customizing the template:

When customizing the template, you should ensure the following:

• The plot area of the dynamic layer should have the same bounds as the non-dynamic layer
• The dynamic layer has a higher ZIndex order than the non-dynamic layer so that dynamic layer appears on top of the non-dynamic layer
• No background is applied to the dynamic layer as this will obstruct the visibility of the non-dynamic layer
• The top and bottom margins of the vertical scrollbar match the non-dynamic layer