Custom Rectangle defined in XAML

I have a bit of a strange question and need. Basically, I need a rectangle control that can have a different border thickness and different color stroke for each of the four sides (and all stroke values, such as dash, etc.). The Border control gets me half way there allowing for different thickness values for each side of the rectangle, but doesn't allow for a different color brush for each of the sides.

I've tried using a standard Canvas and snapping Line to each of the sides, but they don't snap based on HorizontalAlighnment or VerticalAlignment - a certain number of absolute position attributes are required.

I'll know the width of my rectangle, but not it's height - meaning the vertical sides of the rectangle need to be dynam开发者_如何学Cically sized.

Any thoughts on how this can be done?

Forget the Canvas. Snapping and alignment have no effect on the children of a Canvas. It only supports absolute positioning of its child elements.

You can define a polygon* with 4 segments, each named so you can access its properties, and apply your settings to each. Polygons will stretch shape to fit containers (like a grid) but will not distort the stroke width.

Best to create a user-control wrapping all the above and expose the 4 strokes and colours as Dependency properties so you can bind them.

Note: It is much easier to author with Expression Blend, but I realise a lot of people do not have it, so will add example Xaml later when I get back to my own PC.

Maybe you could build a 3x3 Grid :

1 2 3
4 5 6
7 8 9

And set the bottom stroke of 2, the right stroke of 4, the left stroke of 6 and the top stroke of 8 using different colors. The rectangle content would be in cell 5.