| Chapter 2: WPF C# Framework 4.8 Walk-Through VS2022 VS2019 |
|
ProEssentials 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:
using
Gigasoft.ProEssentials.Enums;
Walk-Through:
The following information demonstrates how to create your first .NET WPF 4.8 Framework Charting ProEssentials implementation using the C# language. It discusses using the Wpf interfaces to add interactive charting content to your EXEs. Other examples are provided within the product/evaluation.
1) Start Visual Studio.NET and create a new project targeting [C#] [Windows] [Desktop] and [WPF .Net Framework]. Accept the default name of [WpfApp1]. Note to make sure this project type is set to .NET FrameWork; if not then project may be expecting our Net80 assemblies. We optionally have assemblies for Net80 (Windows) but these are installed via Visual Studio package manager and changing the Package Source to [ Gigasoft (Local) ]. See our Nuget Walkthrough if wanting to target Net80.
2) When the new project opens, you will be presented the design view of "MainWindow.xaml and MainWindow.xaml.cs".
| MainWindow.xaml.cs [Design]... |
Adding controls to the toolbox... |
|
3) Installing WPF charting interfaces into Visual Studio.NET
VS2022 - VS2019 Instructions
- Note: As the VS2022 IDE is 64 bit, we recommend our pure 64 bit assemblies be added for design-time and general development purposes within VS2022. If you choose our AnyCpu flavor, the first time our AnyCpu assembly is added to the Toolbar and a chart is placed on a form, VS2022 VS2019 should be running with Admin privileges. Subsequent use will not require privileges.
- 1. With the Designer window having focus, Click the [Toolbox] vertical tab,
- 2. Right Click the area below the [General] tab,
- 3. Select [Add Tab],
- 4. Enter [Gigasoft] for the tab's name,
- 5. Right Click the area below new [Gigasoft] tab,
- 6. Select [Choose Items...],
- 7. If not selected, left click the [.NET Framework Components] tab,
- 8. Left click the [Browse...] button and find the file "Gigasoft.ProEssentials.dll" found in our \DotNet48\x64 for VS2022 or our \DotNet48\AnyCpu for VS2019 or VS2022 folder where you installed ProEssentials. By default, this should be located at "C:\ProEssentials10\DotNet48\x64 and \AnyCpu\",
- 9. Select the file "Gigasoft.ProEssentials.dll" and close the [Open File] dialog,
- 10. The [Choose Toolbox Items] dialog should now show 5 highlighted controls: Pe3do, Pego, Pepco, Pepso, and Pesgo.
- 11. Close dialog and 5 ProEssentials components will show within the Gigasoft tab as shown in the bottom right image.
- Note. Attemping to add our assembly (DotNet48\x86) to the VS2022 toolbox will result in an error as the VS2022 designer is 64 bit.
- Note. When deploying your finished project and prefer to support AnyCpu, x64, x86, close the Designer window, in Solution Explorer remove Reference and replace with any of our other References. The project will now support compiling as needed that matches the Reference added. To again add our charts to a form via the Designer, change Reference to our DotNet48\x64 or AnyCpu assemblies.
-
|
 |
 |
| MainWindow.xaml.cs [Design]... |
Adding wpf chart to the window... |
|
|
4) Following the image, Right click the [PegoWpf] tool within the toolbox and select [Copy]. Move your text cursor within the text view of MainWindow.xaml.cs between the <Grid > and </Grid> tags and right click and [Paste]. * Note, use the Build menu, Rebuild project to allow the IDE to compile all that is necessary to see the chart in the Designer window.
|
 |
 |
| MainWindow.xaml.cs [Code]... |
Name property and Loaded event ... |
|
|
This 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, point] 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...
With the cursor within the Pego1_Loaded code section, enter the following code into this section.
You can copy and paste, but hand-typing a few lines 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.
using
Gigasoft.ProEssentials.Enums;
|
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[0] = "Jan";
Pego1.PeString.PointLabels[1] = "Feb";
Pego1.PeString.PointLabels[2] = "Mar";
Pego1.PeString.PointLabels[3] = "Apr";
Pego1.PeString.PointLabels[4] = "May";
Pego1.PeString.PointLabels[5] = "June";
Pego1.PeString.SubsetLabels[0] = "For .Net Framework";
Pego1.PeString.SubsetLabels[1] = "or MFC, ActiveX, VCL";
Pego1.PeString.YAxisLabel = "Simple Quality Rendering";
Pego1.PeColor.SubsetColors[0] = Color.FromArgb(60, 0, 180, 0);
Pego1.PeColor.SubsetColors[1] = 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.PeFunction.ReinitializeResetImage();
// 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...
| WPF Charting events... |
Adding a PeDataHotSpot event... |
 |
6) The code above enabled the DataHotSpot event, so we should place some appropriate code in the DataHotSpot event.
Left click the Pego Wpf chart control within visual designer to give it the focus.
From the main menu select [View] and [Properties Window] in case the property window is not showing.
Within the [Properties Window], click the [Events] icon.
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 " +
Pego1.PeData.Y[e.SubsetIndex, e.PointIndex].ToString());
|
7) Save 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 v10 Note that our main demo is replicated in native WPF C#, WinForm C#.NET, VC++ and MFC 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. 
|
|
|
