WPF Canvas Panel
Canvas Panel is used to place the child element by using the co-ordinates. All these elements are related to the canvas area. Canvas panel is known as the most straightforward panel. Canvas panel itself wouldn’t do anything to do anything itself. Only we can do is to put the controls in it.
Now we will write the below XAML code to create the Canvas Panel.
MainWindow.Xaml
The output of the above code will look like as shown in the below screenshot:
OUTPUT
We can see that we created the two-button and placed both of the buttons in the same position, but in the output, we can only see one button.
Canvas control itself will not do anything itself, to adjust the controls we have to use the coordinates. To place the controls, we will apply the left, right, bottom, and up coordinates.
To specify the position of the controls, we will write the below code:
MainWindow.XAML
The output of the above code will look like as shown in the below screenshot:
OUTPUT
Canvas is known as the special Layout panel. This panel places the child element according to the positions like x and y co-ordinates. We can place the elements in the canvas everywhere. Elements can be overlapped when the position of the elements intersects with each other. Elements can be placed in the sequence.
There is not any restriction to place the elements on the canvas. To define the height and width of the element is very necessary. We can also use Canvas. Left, Canvas.Top, Canvas.Right, Canvas.Bottom to define the co-ordinates in the Canvas.
Now we will take another example of the Canvas.
MainWindow.XAML
The output of the above code will look like as in the below screenshot:
OUTPUT
Here in the above code, we can see that we place the Border elements in the same area, but the canvas property changes the co-ordinates system and place the elements on the four side of the window.
As we can see in the above screenshot that the ellipse overlapped each other, it was just because of the elements are placed on the same sequence.