|Chapter 2: WPF C# Walk-Through VS2008 VS2010 |
charting WPF interfaces are used when creating stand-alone
client-side EXEs to be distributed and ran on an end-users
machine. This Wpf Charting Walk-through includes instructions for Visual Studio.Net in C#.
It is recommended that the namespace: Gigasoft.ProEssentials.Enums
be included at the top of your source code files. In C#, use the using keyword:
following information demonstrates how to create your
first .NET WPF Charting ProEssentials implementation using the C#
language in VS2010. It discusses using the Wpf interfaces
to add interactive charting content to your EXEs. Other
examples are provided within the product/evaluation. Click here for VS2012 and later.
1) New Project:
Start Visual Studio.NET and create a new project
- Visual C#
- WPF Application
Accept the default
name of [WpfApplication1].
Note: Under the Project menu, select "Project Properties". From the Build tab, adjust the Platform Target setting to x86. This is necessary as the following ProEssentials assembly links to a native 32 bit DLL. This setting will allow the resulting exe to run on both 32 and 64 bit systems and provide the easiest deployment. For AnyCpu or native 64 bit targets, see our ReadMe.txt files in the folder ProEssentials8/DotNetAnyCpu.
2) When the new project opens, you will be presented
the design view of "MainWindow.xaml and MainWindow.xaml.cs".
3) Installing WPF charting interfaces into Visual Studio.NET
VS2008 / VS2010 Instructions
- Under the Tools menu, select [Choose Toolbox Items...],
- If not selected, left click the [WPF Components] tab,
- Left click the [Browse...] button and find the file "Gigasoft.ProEssentialsWpf.dll" found in the DotNet32 subdirectory where you installed ProEssentials. By default, this is located at "C:\ProEssentials8\DotNet32\",
- Select the file "Gigasoft.ProEssentialsWpf.dll" and close the [Open File] dialog,
- The [Choose Toolbox Items] dialog should now show 5 highlighted controls: Pe3do, Pego, Pepco, Pepso, and Pesgo.
- Close the dialog and the 5 new ProEssentials chart components will be at the bottom of the toolbox.
4) Right click the [PegoWpf]
tool within the toolbox
and select [Copy].
Move your cursor within the text view of MainWindow.xaml.cs between the <Grid> and </Grid> tags
and right click and [Paste].
The image shows what you see.
represents the default state of a ProEssentials
Graph. The default state has one subset with four
data points. In the course of constructing your
own charts, you'll set the properties PeData.Subsets
and PeData.Points which define the quantity of data your chart will
hold. You'll then pass data via the PeData.Y[subset,
two dimensional property array. The following
section shows example code of passing data.
ProEssentials uses the terms Subsets and Points
but you can think of these as Rows and Columns.
Passing data is as simple as filling each Subset
with Points worth of data.
5) After embedding the chart in your window, place the cursor within the PegoWpf tag and type "Name=" and provide a name for your chart "Pego1" and then type "Loaded=" and accept the default loaded event and right click and select Navigate to Event Handler. Your xaml should look like...
cursor within the Pego1_Loaded code section, enter
the following code into this section.
You can copy and paste if you must, but hand-typing
at least some of this code will help familiarize
yourself with the Gigasoft.ProEssentials namespace.
Note: adding the following using declaration at the top of "MainWindow.xaml.cs"
will shorten enumeration syntax.
Pego1.PeString.MainTitle = "Hello World";
Pego1.PeString.SubTitle = "";
Pego1.PeData.Subsets = 2;
Pego1.PeData.Points = 6;
Pego1.PeData.Y[0, 0] = 10; Pego1.PeData.Y[0, 1] = 30;
Pego1.PeData.Y[0, 2] = 20; Pego1.PeData.Y[0, 3] = 40;
Pego1.PeData.Y[0, 4] = 30; Pego1.PeData.Y[0, 5] = 50;
Pego1.PeData.Y[1, 0] = 15; Pego1.PeData.Y[1, 1] = 63;
Pego1.PeData.Y[1, 2] = 74; Pego1.PeData.Y[1, 3] = 54;
Pego1.PeData.Y[1, 4] = 25; Pego1.PeData.Y[1, 5] = 34;
Pego1.PeString.PointLabels = "Jan";
Pego1.PeString.PointLabels = "Feb";
Pego1.PeString.PointLabels = "Mar";
Pego1.PeString.PointLabels = "Apr";
Pego1.PeString.PointLabels = "May";
Pego1.PeString.PointLabels = "June";
Pego1.PeString.SubsetLabels = "For .Net Framework";
Pego1.PeString.SubsetLabels = "or MFC, ActiveX, VCL";
Pego1.PeString.YAxisLabel = "Simple Quality Rendering";
Pego1.PeColor.SubsetColors = Color.FromArgb(60, 0, 180, 0);
Pego1.PeColor.SubsetColors = Color.FromArgb(180, 0, 0, 130);
Pego1.PeColor.BitmapGradientMode = false;
Pego1.PeColor.QuickStyle = Gigasoft.ProEssentials.Enums.QuickStyle.LightShadow;
Pego1.PeTable.Show = Gigasoft.ProEssentials.Enums.GraphPlusTable.Both;
Pego1.PeData.Precision = Gigasoft.ProEssentials.Enums.DataPrecision.NoDecimals;
Pego1.PeFont.Label.Bold = true;
Pego1.PePlot.Method = Gigasoft.ProEssentials.Enums.GraphPlottingMethod.Bar;
Pego1.PePlot.Option.GradientBars = 8;
Pego1.PePlot.Option.BarGlassEffect = true;
Pego1.PeLegend.Location = Gigasoft.ProEssentials.Enums.LegendLocation.Left;
Pego1.PePlot.DataShadows = Gigasoft.ProEssentials.Enums.DataShadows.ThreeDimensional;
Pego1.PeFont.FontSize = Gigasoft.ProEssentials.Enums.FontSize.Large;
Pego1.PeConfigure.RenderEngine = Gigasoft.ProEssentials.Enums.RenderEngine.Direct2D;
Pego1.PeConfigure.AntiAliasGraphics = true;
Pego1.PeConfigure.AntiAliasText = true;
Pego1.PeUserInterface.HotSpot.Data = true;
// Pego1.Invalidate(); // optional help for real-time charts or certain update scenarios.
// Pego1.UpdateLayout(); // optional help for real-time charts or certain update scenarios.
Your project code should look similar to...
6) The code above enabled the DataHotSpot event, so
we should place some appropriate code in the DataHotSpot
Left click the Pego Wpf chart control within
visual designer to give it the focus.
From the main menu select [View]
Window] in case the property window is not showing.
Within the [Properties Window], click the [Events]
Within the available events, double-click PeDataHotSpot
This opens the code view with cursor located at "Pego1_PeDataHotSpot".
Add the following code to the Pego1_PeDataHotSpot event.
System.Windows.MessageBox.Show("Subset " + e.SubsetIndex.ToString() +
", Point " + e.PointIndex.ToString() + " with a value of " +
and run the project. Your project will show an image
as follows. Move the mouse over chart and click a bar to trigger
the DataHotSpot event.
This completes this WPF charting walkthrough.
Please review the demo code and documentation that's installed with the eval/product.
Demo projects can be accessed via shortcut...
Start / All Programs / ProEssentials v8
Note that our main demo is replicated in native WPF C#, WinForm C#.NET, VC++ MFC and VB6 projects all accessible from the start menu. These are great for modifying an existing demo to test potential charting modifications before implementing within your applications.