Polyline drawing optimization in WPF.

Question

4.00/5 (1 vote)

See more:

Hello everyone.

I am studying the wpf chart drawing and I have been abled to generate a dummy scope graph.

I am using the following method:

public Polyline NormalizedValues(Polyline pl)
{
  Polyline result = new Polyline();

  for (int i = 0; i < pl.Points.Count; i++)
  {
    Point pt = pl.Points[i];
    Point npt = NormalizedValue(pt);

    result.Points.Add(npt);
  }

  return result;
}

public Point NormalizedValue(Point pt)
{
  Point npt = new Point();

  npt.X = (pt.X - _ca.xMin) * chartCanvas.Width / (_ca.xMax - _ca.xMin);
  npt.Y = chartCanvas.Height -
           (pt.Y - _ca.yMin) * chartCanvas.Height / (_ca.yMax - _ca.yMin);

  return npt;
}

public void Draw()
{
  // Clean the chart area.
  chartCanvas.Children.Clear();

  foreach (Trace tr in _Traces)
  {
     Polyline Normalized = NormalizedValues(tr.Values);
     Normalized.Stroke = tr.Color;
     chartCanvas.Children.Add(Normalized);
  }
}

If the size of the chartCanvas is around 300 x 300, the drawing is very fast but once the window is maximized then the curve drawing starts to be much slower.

I would like to ask your advise about the different possible technique I could apply to optimize the drawing.

I have found the following article:
http://www.newyyz.com/ntgsite/2012/02/fast-line-rendering-in-wpf/

But it seems to be related to GDI and not on WPF rendering directly.

Do we have like in GDI, bitmap rendering or double buffering methods ?
Could somebody provide me some usefull links to wpf optimization ?
What could be the best approach without based on the peace of code I have pasted?

How would it be possible to draw a serie of at least 1024 samples encapsulated in a Polyline object efficiently ? It is very fast but only if my canvas is around 200 * 200.

Any inputs are welcome ? I would really learn what is the best suitable solution to cover my issue.

Thank you very much in advance.
Best regards.
MiQi.

Posted 31-Oct-12 4:45am

SuperMiQi

Updated 3-Nov-12 5:28am

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2012-10-31T05:18:00

Well, WPF has nothing to do with GDI and very, very little to do with Windows. It looks like a big step out of Windows, a library with great cross-platform potential. This is very explainable if you remember that Microsoft is working on a non-Windows OS, called "Midory". I really hope the work in direction won't stop.

What you do it the approach structurally closest to GDI, where you do rendering in the application code.

I cannot promise performance improvements, but still advise you to try a completely different method. Use the instance of System.Windows.Controls.Canvas to host the UI elements playing the role of the graph nodes, arcs, etc. Please see:
http://msdn.microsoft.com/en-us/library/system.windows.controls.canvas.aspx[^].

Please also see my past answers on related topics:
Connect different controls[^],
Vector graphics software like CorelDraw or Inkscape in C# or VB.NET[^].

I really recommend trying it. WPF is build with high performance in mind, and the optimization you are thinking about on the application level is already thought at higher level of WPF. Тhe problem of flicker is solved as well.

[EDIT]

This is ridiculously simple Canvas tutorial, but it would not help much as this is mere static XAML, but you really need "read" C# programming:
http://wpftutorial.net/Canvas.html[^].

You really need to add elements programmatically and move them using SetLeft, SetTop, etc. This is related to attached properties, but using them does not require you to understand how they work, because you can use the methods like those I've shown above; but they implement attached properties of the children, which you don't have to use. If you really need to understand attached properties (highly recommended for general WPF understanding), please see:
http://msdn.microsoft.com/en-us/library/ms749011.aspx[^].

See also:
http://www.wpftutorial.net/DependencyProperties.html[^].

For understanding of aspects of Canvas as a parent control, see this overview:
http://msdn.microsoft.com/en-us/library/ms754152.aspx[^].

For related overview and introductory material, start here:
http://msdn.microsoft.com/en-us/library/ms745058.aspx[^],
http://msdn.microsoft.com/en-us/library/ms742562.aspx[^].

For more overviews, please start here:
http://msdn.microsoft.com/en-us/library/ms754130.aspx[^].

—SA