Petzold Book Blog - Rounded Graphics in WPF


Charles Petzold on writing books, reading books, and exercising the internal UTM

Recent Entries
< PreviousBrowse the ArchivesNext >
Subscribe to the RSS Feed

Rounded Graphics in WPF

April 17, 2008
Roscoe, N.Y.

A recent MSDN WPF Forum posting inquired about drawing triangles with rounded corners. I responded with some code but thought it might be good to repeat it here with some visuals.

I originally used the Path element for drawing the triangles; for some variety — and also to re-use a Pen object in my code — here I'll render the figure with an Image displaying a DrawingImage based on a GeometryDrawing.

WPF supports rounded corners with the LineJoin property of the Pen class. The only catch is that your stroke thickness must be appreciable before this LineJoin property becomes evident. If you really want to draw thick lines with rounded corners, just set LineJoin to the PenLineJoin enumeration value Round. Here's some XAML:

That results in the following visual:

Add a

attribute to the GeometryDrawing tag and you'll get a filled triangle:

However, if you want a triangle with a thin stroke, this approach won't help. You'll need another solution that involves some code. The RoundedTriangle.cs and RoundedTriangle.csproj files comprise a program that displays four progressively derived triangles in the cells of a UniformGrid. The first triangle is based on a PathGeometry named pathGeo and is the same as the first figure shown above.

The second figure is based on a PathGeometry obtained from a call to the GetWidenedPathGeometry method of pathGeo:

The Pen argument is required because the method calculates a path that surrounds the original path as if drawn with the pen. My program then strokes this path with a thin pen:

Those artifacts are typical with widened paths. However, it's possible to call the GetOutlinedPathGeometry method on this widened path:

That returns a new path that is the outline of the existing path, or:

We're getting very close! This PathGeometry obviously has two PathFigure objects in its Figures collection. We only want one of them, and the one we don't want probably has a single item in its Segments collection of type PolyLineSegment. Let's see if we can remove it. It's first necessary to clone the outlined path because we need something we can alter:

Now loop through the PathFigure objects and see if there's a good candidate for removal:

And that does it! The resultant PathGeometry looks like this:


You rock. Adding that to my bag of tricks.

Cory, Fri, 18 Apr 2008 10:16:49 -0400 (EDT)

Excellent :)

Mahesh, Tue, 29 Apr 2008 15:01:57 -0400 (EDT)


I wanted to develop a WPF project that has very intense performance requirements, and I thought it was best to consult you on this before designing the app.

The application would be rendering data obtained from a medical hardware as charts. For this, the requirements are:

1) Requires rendering of almost 250 points every 4 milliseconds in a chart (to be connected by a line or Bezier curve). The rendered points will also have a spectrum of colors (as in a heatmap).

2) The rendered points would move when new data is pumped by the hardware and rendered (as in a ECG)

3) At any given point there could be over a 150,000 moving points on the chart (because the chart window would display data of 3-5 seconds).

4) Also later we would like to retain the history of data points of past 60 seconds or so.

5) There could be upto 12 such chart displays running parallel at the same time in a window on the application.

I seek your thoughts on what could be the best approach for rendering these points and animating them. Some kind of selectively invalidating the UI would be desirable here. Also what are the recommended options for storing this much data for history purpose. The problem demands something at a very low level in the WPF stack.

Any Help would be highly appreciated,

Thanks in Advance

— Nirupama Talele, Wed, 7 May 2008 01:03:01 -0400 (EDT)

Sounds challenging! — Charles


Thsi is a gentle reminder..for the above query...

Please do give in your inputs...That would be of great help..

Thanks and Regards,


Nirupama Talele, Mon, 26 May 2008 10:14:23 -0400 (EDT)


very thankful but how will I clip this to a button? Here in my case I need a button which looks like exactly rounded corners traingle. I need the same finishing of this shape as button I mean the border and background. I need the same functinality of a button.


— Apache, Fri, 10 Apr 2009 01:38:59 -0400 (EDT)

You want the existing functionality of a button but a completely different visual appearance? In WPF (and Silverlight) programming that's called a "template", and any book or tutorial about WPF will show you how to do it. — Charles

Recent Entries
< PreviousBrowse the ArchivesNext >
Subscribe to the RSS Feed

(c) Copyright Charles Petzold