Hello! This is Omar and I’m back with an interesting WPF surface mesh chart application tutorial. This chart is also known as a surface or mesh plot and is useful for visualizing 3D data. The surface mesh chart is a three-dimensional plot that creates a grid of interconnected quadrangles, creating the “surface” where data points are visualized. Usually, in a surface mesh chart, you’ll see that the point’s color and height will represent the data’s magnitude or intensity.

Surface mesh charts are widely used in terrain elevations. For example, to visualize the elevation of landscapes and grounds. This is widely used in topographic applications.

In this project, we will work with the WPF framework and create a 3D Surface plot application with LightningChart .NET. As said, this is a chart with X, Y, and Z values. The surface styles can be customized defining different fills, wireframes, contour palettes, and zones.

The installation will be a typical Windows process, so please continue with it until it is finished. After the installation, you will see the following programs:

• License Manager: In this application, you will see the purchase options. All the projects that you will create with this trial SDK, will be available for future developments with all features enabled.

• LightningChart .NET Interactive Examples: now you can see 100+ interactive visualizations available for WPF, WinForms, and/or UWP though today we’re working with Smith Charts.

This main method will initialize many properties that are provided by the Lightning Chart .NET framework. The great advantage of creating this surface mesh chart is, if you have C# knowledge, this syntax will be easier for you.

_chart:

The chart object will contain the LightningChart constructor… basically, this will contain a new instance of a surface mesh chart object.

We create a new instance of LightningChart and give the new surface mesh chart a name.

BeginUpdate:

Disables control repaints when a property is changed. Recommended when updating the status of many properties or updating series points.

3D View:

Let’s assign the 3D view type, which is necessary for the surface mesh chart. We assign an array with positioning values to the lights. Lights can be freely positioned anywhere in the 3D model space.

Several lights can be added to Lights. collection property. There are two different light types: Directional and Point of Light. Finally, we finish the chart update so that it begins to be generated. We assign the new instance to the grid (XAML).

This method will be responsible for generating the data series for our 3d surface plot. We’ll start by creating an instance of the SurfaceMeshSeries3D constructor. This constructor requires the view of our chart and the X, Y, and Z axes.

SurfaceMeshSeries3D is very similar to the SurfaceGridSeries3D as they both have mostly the same properties. The biggest difference is that the surface nodes can be freely positioned in a 3D space. That is, the surface does not have to be rectangular. SurfaceMeshSeries3D allows for the deformation of the surface. almost any shape, for example, a sphere or a human head.

Now we need to assign some graphical properties to our series:

ContourPalette:

It allows us to assign a pattern of colors to the Y-axis. In this case, we make use of the ValueRangePalette constructor, which will help us create color steps, which are assigned to the polygons that meet the assigned values.

WireFrameType:

• Type of wireframe: We can choose one option from the enum SurfaceWireframeType3D class.

• InitialValue: Initial value for data Y. Clears the series. It is applied when creating or resizing a Data array.

• FadeAway: Fade away surface/waterfall towards the back (higher data row numbers), with a given percent. The valid range is from 0(no fade away) to 100 (complete fade away).

• setSize: Set grid size, both X and Z simultaneously. If you already have large data, using this method is faster than setting SizeX and SizeZ separately. In this example, the values are obtained from textboxes.

• DrawWireFrameThrough: If set, draw a wireframe through the filled surface, making it always visible from above the surface and below it. Alternatively, you may prefer setting this false and using WireframeOffset to shift the wireframe slightly up or down, making it visible only on the other side of the filled surface.

• Adding the series to the chart:

This method is responsible for generating the wave shown in the chart. We will need to access the series we generated earlier. This string was assigned to a global variable called _mesh. From this series, we will extract the data and the X, and Y columns.

The values of the 3d surface plot will be modified. To obtain a new value of X and Z, we will make use of the X-axis columns, the elapsed time of the current form in milliseconds, the assigned value by the slider UI tool, and the support of the sine and cosine functions of the .NET Math library. These calculations will be processed for each row of our mesh series.

In order for these changes to be updated, we need to tell the chart that changes were made and it needs to be updated:

Here’s the final project WPF 3D surface plot:

In conclusion, in this article, we’ve created a WPF 3D Surface plot that features customizable properties and values. Creating a WPF surface mesh chart with LightningChart .NET offers a powerful and flexible solution for visualizing three-dimensional data in your applications.

As seen in this tutorial, we have easily generated a surface mesh chart that accurately represents complex data patterns and relationships. Notice that LightningChart .NET provides extensive customization options, allowing you to control the appearance, color mapping, and interaction of the surface mesh chart. See you in the next article!