Post
Ask Question

Canvas Control In Universal Apps

Canvas is a control where you explicitly position child controls using coordinates relative to Canvas area. As you can imagine, sometimes you need child controls to be relatively positioned and speaking of it, Canvas comes to the rescue! Canvas control looks like other container controls but with one exception: It lets you position which controls appear where in canvas area.

The Canvas control below has 4 Rectangles inside a Canvas. This is a sample view how to position child controls in a Canvas container:
 

There are 2 positions which can be used in Canvas:

Left and Top 
 
Here's a simple declaration for Canvas and child control:
  1. <Canvas Width="640" Height="480" >  
  2.     <Rectangle Canvas.Left="30" Canvas.Top="30"   
  3.        Fill="Red" Width="200" Height="200" />  
  4. </Canvas>  
Child controls can use "Canvas.{position}" for explicitly positioning in a Canvas area. You can set it as you can see above declaration.

Lets make a much more detailed sample now. 
  1. <Canvas HorizontalAlignment="Left" Height="305" Margin="112,115,0,0" VerticalAlignment="Top" Width="472">  
  2.     <Rectangle Height="100" Canvas.Left="0" Canvas.Top="0" Width="100" Fill="Red" />  
  3.     <Rectangle Height="100" Canvas.Left="45" Canvas.Top="45" Width="100" Fill="Blue" />  
  4.     <Rectangle Height="100" Canvas.Left="90" Canvas.Top="90" Width="100" Fill="Green" />  
  5.     <Rectangle Height="100" Canvas.Left="135" Canvas.Top="135" Width="100" Fill="Yellow" />  
  6.     <Rectangle Height="100" Canvas.Left="180" Canvas.Top="90" Width="100" Fill="Black" />  
  7.     <Rectangle Height="100" Canvas.Left="225" Canvas.Top="45" Width="100" Fill="Magenta" />  
  8.     <Rectangle Height="100" Canvas.Left="270" Canvas.Top="0" Width="100" Fill="Gray" />  
  9.     <Rectangle Height="100" Canvas.Left="135" Canvas.Top="205" Width="100" Fill="Brown" />   
  10. </Canvas>  
 
As you can see in the example above, you can set Left and Top values to explicitly position the rectangles. This is pretty useful if you want to set UI elements explicitly. Canvas helps you position the child UI elements using its Left and Top property so its easy to set elements in the Canvas area.


Similar Articles