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

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.

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.

    Requires Free Membership to View

    Login

    When you register, you'll begin receiving targeted emails from my team of award-winning writers. Our goal is to provide a unique online resource for developers, architects and development managers tasked with building and maintaining enterprise applications using Visual Basic, C# and the Microsoft .NET platform.

    Hannah Smalltree, Editorial Director

    By submitting your registration information to SearchWinDevelopment.com you agree to receive email communications from TechTarget and TechTarget partners. We encourage you to read our Privacy Policy which contains important disclosures about how we collect and use your registration and other information. If you reside outside of the United States, by submitting this registration information you consent to having your personal data transferred to and processed in the United States. Your use of SearchWinDevelopment.com is governed by our Terms of Use. You may contact us at webmaster@TechTarget.com.

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

Disclaimer: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.

Back to top