Positioning controls inside a Canvas

A Canvas is another simple panel in WPF, which allows you to place child elements at a specific coordinate position relative to the Canvas. It exposes four attached properties: Left, Right, Top, and Bottom, to handle the positioning of controls.

This recipe will help you to understand the positioning of child elements in a Canvas panel.

Getting ready

Let's open the Visual Studio instance and create a new WPF application project named CH03.CanvasDemo.

How to do it...

Perform the following steps to create a simple Canvas panel with a few label controls in it and position them to specific coordinate positions:

1. Open Solution Explorer and navigate to the project.
2. Open the MainWindow.xaml file and replace the default Grid with the following lines:

<Canvas> 
    <Label Width="100" Height="60" 
           Background="GreenYellow"  
           Canvas.Left="70" Canvas.Top="40" 
           Content="(70, 40)" 
           FontSize="20" FontWeight="Bold"/> 
  ...