Canvas Layout allows us to arrange child elements using coordinates that are very similar to Windows Forms applications. Canvas allows us to specify coordinates relative to any corner. We can use attached properties (Top, Right, Bottom and Left) of the Canvas for adjusting the position of Child Elements inside the Canvas. Canvas is one of the basic and lightweight containers. Child Elements inside a Canvas do not resize on resizing the window during runtime that makes it less useful in creating forms but it is useful when the surface for working on graphics is required.
Let's use various properties of Canvas Layout.
1. Attached Properties of Canvas layout
We can adjust the position of child elements in a Canvas using coordinates relative to any corner of the Canvas.
- <Canvas>
- <Button Content="Canvas.Top='25' Canvas.Left='25'" Canvas.Top="25" Canvas.Left="25"></Button>
- <Button Content="Canvas.Top='200' Canvas.Right='100'" Canvas.Top="200" Canvas.Right="100"></Button>
- <Button Content="Canvas.Bottom='0' Canvas.Right='0'" Canvas.Bottom="0" Canvas.Right="0"></Button>
- </Canvas>
Preview
![]()
We cannot use more than two attached properties of a Canvas at the same time. For Example, If we use the Canvas.Left and Canvas.Right properties simultaneously then the Canvas.Right property is ignored. Similarly, If we use Canvas.Top and Canvas.Bottom properties simultaneously then the Canvas.Bottom property is ignored.
2. ZIndex Property of Canvas
When child Elements inside the Canvas overlapp thrn we can control which elements are to placed in front and which is to placed behind using the ZIndex property.
In the following example, I have created three ellipses in the Canvas. The child element placed last will overlap the previous element. By default, the last ellipse (in other words Blue) will be placed in front of the Green Ellipse and the same thing happens for a Green and Red Ellipse.
- <Canvas>
- <Ellipse Fill="Red" Height="100" Width="100"></Ellipse>
- <Ellipse Fill="Green" Height="100" Width="100" Canvas.Left="70"></Ellipse>
- <Ellipse Fill="Blue" Height="100" Width="100" Canvas.Left="140"></Ellipse>
- </Canvas>
But we can control the overlapping using the Canvas.ZIndex property. We can set any value (must be Integer) in ZIndex (negative as well as positive). An element with the highest ZIndex property is rendered on the top or in the front of other elements. The default value of the ZIndex property is 0. In the example above, I have set the ZIndex property for Green Ellipse to 1 so that it came in front of other elements.
- <Canvas>
- <Ellipse Fill="Red" Height="100" Width="100"></Ellipse>
-
- <Ellipse Fill="Green" Height="100" Width="100" Canvas.Left="70" Canvas.ZIndex="1"></Ellipse>
- <Ellipse Fill="Blue" Height="100" Width="100" Canvas.Left="140"></Ellipse>
- </Canvas>
Preview
3. ClipToBounds property of Canvas
When the size of the canvas (may be height or width) is smaller than the grapics/content inside the layout, then the grapics/content inside the layout will overflow from the Canvas Layout. We can clip the graphics or contents by setting the ClipToBounds property to True.
- <Canvas Height="120" ClipToBounds="True">
- <Ellipse Fill="Red" Height="100" Width="100"></Ellipse>
- <Ellipse Fill="Green" Height="100" Width="100" Canvas.Left="40" Canvas.Top="40" Canvas.ZIndex="1"></Ellipse>
- <Ellipse Fill="Blue" Height="100" Width="100" Canvas.Left="70"></Ellipse>
- </Canvas>
Preview
I hope you like it. Thanks.
Other Related Articles