Canvas Layout in WPF ~ IT Tutorials with Example

Monday 29 September 2014

Monday, September 29, 2014

Canvas Layout in WPF

Canvas Layout allows us to arrange child elements using coordinates which is much similar to Windows form application. Canvas allows us to specify coordinates relative to any corner. We can use attached properties(Top, Right, Bottom, Left) of Canvas for adjusting position of Child Elements inside Canvas. Canvas is one of the basic and lightweight container. Child Elements inside Canvas do not resize on resizing the window during runtime which makes it less useful in creating forms but it is useful when surface for working on graphics required.

Let's use various property of Canvas Layout:

1) Attached Properties of Canvas layout:

We can adjust the position of child elements in Canvas by using coordinates relative to any corner of Canvas.

</Canvas>

Preview:

We cannot use more than two attached properties of Canvas at a same time. For Example, If we use Canvas.Left and Canvas.Right property simultaneously than Canvas.Right property is ignored. Similarly, If we use Canvas.Top and Canvas.Bottom property simultaneously than Canvas.Bottom property is ignored.

2) ZIndex Property of Canvas:

When child Elements inside the Canvas overlapped, than we can control which elements is to placed front and which is to placed behind using ZIndex property.

In the below example, I have created three ellipse in canvas. Child element which is placed in last will overlap the previous element. By default, the Last Ellipse(i.e. Blue) will be placed in front of Green Ellipse and same thing happen for Green and Red Ellipse.

</Canvas>

But we can control the overlapping using Canvas.ZIndex property. We can set any value(must be Integer) in ZIndex (Negative as well as positive). Element with Highest ZIndex property rendered on the Top or in the front of other Elements. Default value of ZIndex property is 0. In above example, I have set ZIndex property for Green Ellipse to 1 so that it came in front of other elements.

</Canvas>

Preview:

3) ClipToBounds property of Canvas:

When size of canvas(may be height or width) is smaller than the grapics/content inside the layout, than graphics/content inside the layout will overflow from the Canvas Layout. We can clip the graphic/content by setting ClipToBounds property to True.