Programmer Payback

Here’s a fun and useful UI control I suspect many developers out there are writing over and over again. It’s essentially a border control with an independent autosizing header. It’s not included in the framework, toolkit, or any of the open source libraries that I’ve seen and I’ve needed it myself on more than one occasion so I thought I’d share and save everyone a little work.

Here an example of it in it’s more basic form.

The code to use it is simple:

<pp:HeaderBorder Header=”Header” Content=”Content goes here”/>

You can control the radius, border, and individual backgrounds of the two main containers. The header and content areas are just standard containers so you can put any type of content in them — like all good Silverlight controls should allow. 🙂

To create this control, I sandwiched a line in between two border controls (the top containing the header ContentPresenter and the bottom containing the main ContentPresenter). Wrapped around the 2 borders and line controls is another Border control.

I found two different techniques to make sure the inner border controls don’t blead out over the containing border control (which is really the only modestly complex part about this control).

1. In the first technique, I was able to clip the inner contents using a RectangleGeometry control with RadiusX and RadiusY matching that of the outer border
2. As an alternate technique I set the individual pieces of the CornerRadius property on the two inner border controls. For example, the top might be set to “6,6,0,0” and the bottom: “0,0,6,6”. This made them match the containing border control’s border and not extend beyond it.

The rest of the work is just putting it in a control and wiring up the properties with the xaml in generic.xaml so the control’s consumer can control it.

Download the source code and check out both techniques if you’re curious or just throw it in your app and start using it.

Happy Silverlight coding!