Chapter 2: C# .NET FrameWork 4.8 WinForms Walk-Through VS2022 - vs2019 |
ProEssentials WinForms interfaces are used when creating stand-alone client-side EXEs to be distributed and ran on an end-users machine.
Thank you for reading this and above FAQ section as it will speed your development and maximize your implementation's overall quality. Knowing our demo and demo project will be your best source of info.
See .NET Overview, for additional info.
Walk-Through:
The following information demonstrates how to create your first .NET ProEssentials implementation using the C# language. It discusses using the WinForm .NET 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 [WinForms .Net Framework]. Accept the default name of [WindowsFormsApp1]. Note, Do not select Windows Forms .NET (without the Framework) as the Framework is required and we recommend .Net 4.8 for this tutorial. We optionally have assemblies for Net80 (Windows) and these are installed via a Nuget package within Visual Studio package manager where our setup will add a package source of [ Gigasoft (Local) ]. See our Nuget Walkthrough if wanting to target Net80.
When the new project opens, you will be presented the design view of "Form1.cs".
Form1.cs [Design]... |
Adding controls to the toolbox... |
3) Installing WinForms interfaces into Visual Studio.NET
VS2022 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. 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 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 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.
-
|
 |
VS2019 Instructions
- Note. The first time our AnyCpu assembly is added to the Toolbar, VS2019 should be running with Admin privileges. Subsequent use will not require privileges. You may optionally install our assembly within the ProEssentials10\DotNet48\x86 subfolder which does not require first time Admin privileges, however adjust the Project Build setting Platform/CPU Target to x86.
- 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\AnyCpu folder where you installed ProEssentials. By default, this should be located at "C:\ProEssentials10\DotNet48\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 x64 assembly located in \DotNet48\x64 to VS2019 and earlier toolbox will result in an error as the VS2019 designer is 32 bit.
- Note. When deploying your finished project and prefer to change the target to AnyCpu, x64 or x86, close the Designer window, in Solution Explorer remove our Reference and replace with any of our other References. The project will now support compiling as needed to match the Reference added. To again add our charts to a form via the Designer, change Reference to our AnyCpu or DotNet48\x86 assemblies.
-
|
 |
Form1.cs [Design]... |
Adding ProEssentials to a Form... |
 |
4) Double click the [Pego] tool within the toolbox. This places an instance of the Pego component within "Form1.cs". Left click bottom-right corner of control and drag down-right to fill up client area of Form1. The adjacent image shows what you see.
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.
|
|
Adjusting design time settings... |
 |
5) Note, when setting color and font size attributes, we recommend setting the parent Form's versions as ProEssentials will use the parent form's settings to help facilitate a uniform look among sibling controls.
If new to C#, the (Name) property is probably the most fundamental property as its name is reflected in all code. For example, pego1.PeData.Subsets = 1; is a line of code, and it shows how the (Name) property (pego1) starts the line.
|
|
To enable the chart to match the size of it's container, let us change the chart's Dock setting.
Left click the pego control within Form1 to give it the focus.
From the main menu select [View] and [Properties Window]
Within the [Properties Window], scroll and locate the Layout section and then the Dock item.
Modify the Dock setting by clicking the center section or 'Fill' mode.
|
 |
Form1.cs [Code]... |
Adding Form Load event... |
6) Double click Form1's Title/Caption Bar to open the code view for "Form1.cs" with default Form1_Load event initialized.
The cursor will be within the Form1_Load 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 "Form1.cs" will shorten enumeration syntax.
using Gigasoft.ProEssentials.Enums;
// Simple to code = simple to implement and maintain //
pego1.PeString.MainTitle = "Hello World";
pego1.PeString.SubTitle = "";
pego1.PeData.Subsets = 2;
// Subsets = Rows //
pego1.PeData.Points = 6;
// Points = Columns //
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.PePlot.SubsetLineTypes[0] = Gigasoft.ProEssentials.Enums.LineType.MediumSolid;
pego1.PePlot.SubsetLineTypes[1] = Gigasoft.ProEssentials.Enums.LineType.MediumDash;
// This enables data hot spots, But we need to define code in the HotSpot event //
pego1.PeUserInterface.HotSpot.Data = true;
// These settings will be used for all charts //
pego1.PeConfigure.RenderEngine = Gigasoft.ProEssentials.Enums.RenderEngine.Direct2D;
pego1.PeConfigure.PrepareImages = true;
pego1.PeConfigure.CacheBmp = true;
pego1.PeConfigure.AntiAliasGraphics = true;
pego1.PeConfigure.AntiAliasText = true;
// Call this at end of setting properties //
pego1.PeFunction.ReinitializeResetImage();
pego1.Refresh();
// call standard .NET Refresh method to force paint
|
Your project code should look like...

Add the following code to the pego1_PeDataHotSpot event.
Form1.cs [Design]... |
Adding a DataHotSpot event... |
 |
7) The code above enabled the DataHotSpot event, so we should place some appropriate code in the DataHotSpot event.
Left click the pego control within Form1 to give it the focus.
From the main menu select [View] and [Properties Window]
Within the [Properties Window], click the event icon.
Within the available events, double-click PeDataHotSpot
This opens the code view of "Form1.cs" with cursor within the pego1_PeDataHotSpot event handler.
|
System.Windows.Forms.MessageBox.Show("Point " + e.PointIndex.ToString() +
" with a value of " + pego1.PeData.Y[e.SubsetIndex, e.PointIndex].ToString());
|
8) Save and run the project. Your project will show an image as follows. Move the mouse over a bar and click to trigger the DataHotSpot event.
Congratulations... |
Success!!! |

|
This completes this walkthrough.
Please read the remaining sections within Chapter 2 and review the demo code and documentation that's installed with the eval/product.
Once installed, the demo program can be accessed via shortcut...
Start / All Programs / ProEssentials v10 / PEDemo
Note that our main demo is replicated in C#.NET, VB.NET, Visual C++ MFC projects all accessible from the start menu. These are great for modifying an existing demo to test potential modifications before implementing within your applications.
|
|
|