Canvas Control in WPF

Canvas Control In WPF

A Canvas panel is used to position child elements by using coordinates that are relative to the canvas area. Here are some of the properties of Canvas panels. The default values of Height and Width properties of a Canvas are 0. If you do not set these values, you will not see a canvas unless child elements are automatically resizable. 
 
Child elements on a Canvas are never resized. The vertical and horizontal alignments on child elements do not work. Child elements are placed on positions set by the Canvas Left, Top, Right, and Bottom properties.

 Margin does work partially. If Left property of Canvas is set, Right property does not work. If Top property of Canvas is set, Bottom property does not work.

Properties 

The Canvas control has three properties. The Left property represents the distance between the left side of a control and its parent container Canvas. The Top property represents the distance between the top of a control and its parent container Canvas.

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="396.25" Width="453.75">
    <Grid Height="343.75" Width="332.5">
        <Canvas Background="LightCyan" >
            <Rectangle  Canvas.Left="10" Canvas.Top="10"  Height="200" Width="200" 

               Stroke="Black" StrokeThickness="10" Fill="Red" />
            <Rectangle Canvas.Left="60" Canvas.Top="60" Height="200" Width="200"

               Stroke="Black" StrokeThickness="10" Fill="Blue" />
            <Rectangle Canvas.Left="110" Canvas.Top="110" Height="200" Width="200"
              Stroke="Black" StrokeThickness="10" Fill="Green" />
        </Canvas>
    </Grid>
</Window> 

Output