Todd Main
Todd Main

Reputation: 29153

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

Any thoughts on how this can be done?

Upvotes: 0

Views: 203

Answers (2)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

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.

Upvotes: 1

Samuel Béliveau
Samuel Béliveau

Reputation: 589

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.

Upvotes: 0

Related Questions