Tutorial 20 - TeeChart for Windows Phone 7 and 8
Working with TeeChart for Windows Phone 7 and 8 is going to be familiar to anybody with experience of both the TeeChart API and Silverlight. However, there are some issues specific to the platform which we will cover here.
Contents
Installing the Visual Studio 2010 plugin
Running the Windows Phone 7 example
Changes specific to Windows Phone 8 development
API changes specific to TeeChart .NET for Windows Phone
Steema.TeeChart.Silverlight.Drawing.Aspect.RenderSeriesAsImage
Steema.TeeChart.Silverlight.Drawing.Aspect.GestureOptions
Steema.TeeChart.Silverlight.Drawing.Aspect.GestureStyle
Important differences between TeeChart .NET for Windows Phone and other TeeChart versions
Installing the Visual Studio 2010 plugin
At the time of writing, all the tools necessary for development on the Windows Phone 7 platform can be downloaded from "App Hub" ( http://create.msdn.com ). From the link on the front page, all the necessary free tools can be downloaded. Please note that these tools will only work on Windows 7 or above. The TeeChart .NET for Windows Phone assembly also depends on the Silverlight for Windows Phone Toolkit, which at the time of writing can be downloaded from Codeplex ( http://silverlight.codeplex.com/ ). Assemblies from this Toolkit are also referenced in the TeeChart .NET Windows Phone 7 example.
Running the Windows Phone 7 example
The installer for TeeChart for .NET for Visual Studio 2010 will automatically install an example project for Windows Phone 7 when run on Windows 7. This example can be found in the Example folder under the folder DemoProjectWindowsPhone. The project can be opened in Visual Studio 2010 with the Windows Phone 7 plugin and the Silverlight for Windows Phone Toolkit installed and run either in a Windows Phone 7 device or in the emulator.
Changes specific to Windows Phone 8 development
TeeChart.Phone.dll for Windows Phone 8 is installed when the installer components for Visual Studio 2012 or Visual Studio 2013 are selected. The first remarkable difference is that all the tools necessary to work with Windows Phone in Visual Studio 2012 and 2013 are already integrated in these two IDEs. The second difference here is the dependency of the Windows Phone 8 example project on the Multilingual App Toolkit ( http://msdn.microsoft.com/en-us/windows/apps/bg127574 ) which can be installed using NuGet available from Visual Studio's Extensions and Updates Manager under the Tools menu. API changes specific to TeeChart .NET for Windows Phone
Steema.TeeChart.Silverlight.Drawing.Aspect.RenderSeriesAsImage
The RenderSeriesAsImage boolean property gets or sets whether TeeChart renders the Series and its points within a bitmap image or not. When TeeChart does render the Series as a bitmap image, pinching and dragging the chart is quicker for high numbers of points with the cost of reduced pixel resolution when the Series is zoomed to a large scale.
Steema.TeeChart.Silverlight.Drawing.Aspect.GestureOptions
The GestureOptions property gets or sets an enum (Gestures) which controls to which gesture movements the TeeChart .NET for Windows Phone 7 responds. So we can set this property to Gestures.None, in which case the control will not respond to either pinch or drag gestures, to Gestures.PinchOnly, Gestures.DragOnly or Gestures.PinchAndDrag.
Steema.TeeChart.Silverlight.Drawing.Aspect.GestureStyle
The GestureStyles property gets or sets an enum (GestureStyles) which controls how TeeChart .NET for Windows Phone 7 responds to pinch and drag gestures. So we can set this property to GestureStyles.InChart, in which case the TeeChart series and axes will respond independently to pinch and drag gestures, or to GestureStyles.FullChart in which case the entirety of TeeChart responds to them.
Important differences between TeeChart .NET for Windows Phone and other TeeChart versions
While every effort has been made to maintain a high level of performance in terms of zoom (pinch) and scroll (drag) and to maintain the intuitiveness of the TeeChart API across all platforms, in the case of TeeChart for Windows Phone several compromises have had to be made.
As far as we know, everything that can be done with TeeChart on other platforms can also be done on Windows Phone with either pinch and drag deactivated (GestureOptions = Gestures.None) or by using the FullChart pinch and drag (GestureStyle = GestureStyles.FullChart). With the InChart pinch and drag activated (GestureStyle = GestureStyles.InChart and GestureOptions != Gestures.None) there are going to be instances in which some techniques of working with TeeChart are valid in all platforms other than Windows Phone. As an example of this, consider the case of wanting to draw some text onto the chart which follows a series point as it is zoomed and scrolled. In Windows Forms, we would achieve this using the following code:
Points points;
private void InitializeChart()
{
tChart1.Aspect.View3D = false;
tChart1.AfterDraw += new PaintChartEventHandler(tChart1_AfterDraw);
tChart1.Series.Add(point = new Points());
point.FillSampleValues();
}
void tChart1_AfterDraw(object sender, Graphics3D g)
{
int x = point.CalcXPosValue(point[3].X);
int y = point.CalcYPosValue(point[3].Y);
g.Font.Color = Color.Red;
g.Font.Size = 16;
g.TextOut(x, y, "MyText");
}
The equivalent code in Windows Phone is this:
Points point;
private void InitializeChart()
{
tChart1.Aspect.View3D = false;
tChart1.AfterDraw += new PaintChartEventHandler(tChart1_AfterDraw);
tChart1.Series.Add(point = new Points());
point.FillSampleValues();
}
void tChart1_AfterDraw(object sender, Graphics3D g)
{
double x = point.CalcXPosValue(point[3].X);
double y = point.CalcYPosValue(point[3].Y);
g.Font.Color = Colors.Red;
g.Font.Size = 16;
g.TextOut(x, y, "MyText");
}
However, these two code snippets do not produce the same results on screen. To achieve the same effect, we will have to modify the Windows Phone snippet thus:
Points point;
private void InitializeChart()
{
tChart1.Aspect.View3D = false;
//tChart1.AfterDraw += new PaintChartEventHandler(tChart1_AfterDraw);
tChart1.Series.Add(point = new Points());
point.AfterDrawValues += new PaintChartEventHandler(point_AfterDrawValues);
point.FillSampleValues();
}
void point_AfterDrawValues(object sender, Graphics3D g)
{
double x = point.CalcXPosValue(point[3].X);
double y = point.CalcYPosValue(point[3].Y);
g.Font.Color = Colors.Red;
g.Font.Size = 16;
g.TextOut(x, y, "MyText");
}
The reason for this is that under these circumstances, TeeChart for Windows Phone is rendering different Chart elements to multiple canvases, when normally it renders all Chart elements to one canvas. So to enable the text to move with the elements on the series canvas, an event has to be chosen which draws on this same canvas, in this case the Series' AfterDrawValues event. The Chart's AfterDraw event draws to a different canvas in this scenario.
