Question

I am new to silver light and would like to understand a bit more from the pros. Let me tell you what I am trying to do. I am into photography and my goal is to create a web site that allows users to view their images and be able to rotate, zoom, crop, special effect etc. I have developed the web site that allows users to order pictures but now I want to start working on the actual picture/image manipulation. So for testing i put a canvas and a rectangle( with an image). Placed a slider and was able to link the slider to the rectangle. As i increase the slider the image gets larger. But I was kind of hoping as the image gets larger it does not surpass the boundries of the canvas. I assumed that is what it means by being a child of a canvas. Am i mistaken? If so how do you suggest me doing this? Remember I am very new to this and may be going about this very wrong.
Thanks!

Answer 1

Your are right. In Silverlight (like in WPF, WinForms etc.) gui-elements form a hierarchy of elements wherein controls can act either as parents or as children.

The reason why your rectangle surpasses the boundaries of it’s container lies in the way controls are getting aligned. This depends on what kind of container you want to place your child into.

In a canvas for example you position the children with absolute measurements (left, top, height, width). In a self-organizing container like the StackPanel you choose an horizontal alignment (Left, HCenter, HStretch, Right) or a vertical alignment (Top, VCenter, VStretch, Bottom) which determines the childs behavior when you place it inside the parent. Furthermore you can specify the dimension of the child (Width, Height) and an optional margin which determines the gap between the Top, Right, Bottom and Left bound of your child to its enclosing parent.

But what ever container you choose it’s inherent to it that you can let its children surpass its boundaries e.g. with a margin that is negative or greater than the container boundaries or simply by an child that is bigger in dimension that its container as you described the situation with your rectangle.

In your case I would consider working with the idea of clipping. Clipping simply means to

(1) define an geometrical area (in Silverlight and WPF it is a Path object) which lies over some graphical context (some section of your ui or your control etc).

(2) what lies inside the boundaries of this clipping area remains visible and everything else remains invisible.

So you can think of a clipping area as a window onto your screen which you use to look through.

When you are using Microsoft Blend this is easy to realize:

(1) Just use a geometrical shape like a Rectangle, a Circle or a custom Path.

(2) Place it somewhere upon your UI

(3) Right-click the shape, select “Path” and then “Make clipping Path”

(4) and voulà, you’ve just defined a clipping area which you can modify as you are used to modify controls.

Hope this gave you an idea how to deal with your problem.
cheers.