Home » WPF Canvas Panel

WPF Canvas Panel

by Online Tutorials Library

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

WPF Canvas Panel

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

WPF Canvas Panel

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

WPF Canvas Panel

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.


Next TopicWPF Dialog Box

You may also like