WPF-SurfacePlot3D¶

Installation¶

Tutorial¶

So you’ve got the files you need located somewhere in your demo project, right?

To start using 3D plots, we need to follow a simple set of steps.

In the code-behind for the view (Window, App, etc.) where you’d like to display a surface plot, first ensure that the appropriate namespace is referenced with a using statement:

using WPFSurfacePlot3D;

You’ll also have to ensure the namespace is called from the XAML file as well:

<Window x:Class="MyWindow" xmlns:SurfacePlot="clr-namespace:WPFSurfacePlot3D">

Next, go to the XAML file. You can grab a SurfacePlotView control from your toolbox and drag it into your XAML file, or simply add the following XAML:

<SurfacePlot:SurfacePlotView  x:Name="mySurfacePlotView" />

Once you’ve added mySurfacePlot, now you need to set up the DataContext in the code-behind. Back in your .xaml.cs file, add the following:

mySurfacePlotModel = new SurfacePlotModel();
mySurfacePlotView.DataContext = mySurfacePlotModel;

You can, of course, rename mySurfacePlotModel and mySurfacePlotView to whatever you please.

Great - now you’re ready to start plotting functions!

Plotting Functions¶

Let’s add our own plot based on a mathematical function. First we have to define a function that has two “input” variables and one “output variable”, where all of these variables are a double type - hence, we will define a function of the type Func<double, double, double>. (Note: you have to include using System; to get access to this data type.)

One simple way of doing this is defining our function via the lambda operator:

Func<double, double, double> sampleFunction = (x, y) => x * y;

Easy enough, right? let’s define something even more interesting:

sampleFunction = (x, y) => 10 * Math.Sin(Math.Sqrt(x * x + y * y)) / Math.Sqrt(x * x + y * y);

Now we’re ready to plot our function. It’s as easy as passing in the function to the appropriate method:

PlotFunction(mySampleFunction);

This will plot your function in the range x:[-1, 1], y:[-1, 1]. If you want to change the default range, you can do so through the same function:

PlotFunction(mySampleFunction, -10, 5);

This plots the function in the range x:[-10, 5], y:[-10, 5].

If you want to have even more control over the range, you can do that too! Let’s plot the function in the domain x:[-3, 9], y:[-20, 0]:

PlotFunction(mySampleFunction, -3, 9, -20, 20);

That’s everything you need to get started with your plot! From here, why not customize your plot’s appearance? Or you can learn how to plot data that you define yourself.

Finally, it’s worth noting that in order to plot the function, we are first “sampling” that function over the defined domain. The default sample size in both x and y directions is 100 points, resulting in a collection of point objects of size 100x100 = 10000. You can add arguments to the PlotFunction method in order to change the sample size.

Plotting 3D Data¶

This is where SurfacePlot3D really shines: providing an easy entry point for your custom 3D data set. Depending on the type of data you’re starting with, there are a number of different arguments you can pass into the PlotData function.

double[,] arrayOfPoints = new double[10, 15];
for (int i = 0; i < 10; i++)
{
  for (int j = 0; j < 15; j++)
  {
    arrayOfPoints[i, j] = Math.Cos(Math.Abs(i) + Math.Abs(j)) * (Math.Abs(i) + Math.Abs(j));
  }
}

PlotData(arrayOfPoints);

int N = 20;
int M = 25;

double[] xArray = double[N];
double[] yArray = double[M];
double[,] zArray = double[N, M]; // Notice how the size of the array in each dimension has to match up with the size of the corresponding "axes" array!
for (int i = 0; i < N; i++)
{
  double x = i / N;
  for (int j = 0; j < M; j++)
  {
    double y = j / M;
    arrayOfPoints[i, j] = Math.Cos(Math.Abs(x) + Math.Abs(y)) * (Math.Abs(x) + Math.Abs(y));
  }
}

PlotData(zArray, xArray, yArray);

PlotData(point3DArray);

Editing Plot Appearance¶

So you have a plot on the screen - that’s great! But it might not look exactly the way you want it to. This section outlines some different options you can use to tweak the appearance of your plot.

SurfacePlotModel¶

[SurfacePlotViewModel API] - complete list of functions you can call on SurfacePlotModel objects.