WPF: Force a shape to fill area while keeping stroke thickness

Enlarging a shape in WPF is simple enough. But if you want to auto-expand to fill a space you need to do some work. Using a ViewBox makes the shape expand, but it expands everything including the stroke drawn around the outside of the shape. This tip shows you how to make the shape expand but leave the stroke thickness untouched.

Enlarging a shape in WPF is simple enough. But if you want to auto-expand to fill a space, you need to do some work. Using a ViewBox makes the shape expand, but it expands everything including the stroke drawn around the outside of the shape. This tip shows you how to make the shape expand but leave the stroke thickness untouched.

Stating the problem
Here a simple problem. At least, at first glance it seems to be.

Problem statement:

  • Use an Ellipse element.
  • Enforce that it is always circular.
  • Draw a 2 pixel stroke on ellipse.
  • Place an ellipse in any standard WPF panel.
  • Have ellipse expand to fill the host panel (but it must remain circular).
  • The stroke must remain at 2 pixels.

First attempt
This XAML obviously won't work. It's a circle and stroke is the correct thickness, but it doesn't expand to fill the container.

Second attempt
This example is better. By putting the Ellipse inside a Viewbox it expands to fill the space. But if the stroke gets thicker and if the container is not rectangular then the ellipse will not be circular.

Third attempt
What if you bound the Width property on the Ellipse to the ActualWidth of the parent container? That would work, but only if the width and height are the same. Otherwise you end up with a none circular item.

Success on the fourth attempt
The secret to making this work it use a multi binding. Multi-bindings take multiple data sources and passes them through a MultiValueConverter. The binding will pass both the parents ActualWidth and ActualHeight to the binding.

 The converter analyzes both parameters and returns the smaller of the two.

 Here's the successful version.


This was first published in August 2010

Dig deeper on Windows Presentation Foundation

0 comments

Oldest 

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

-ADS BY GOOGLE

SearchCloudComputing

SearchSoftwareQuality

SearchSOA

TheServerSide

SearchCloudApplications

Close