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.
- 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.
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.
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.
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