How to implement WPF Canvas? Explain with an example

How to implement WPF Canvas? Explain with an example

How to implement WPF Canvas? Explain with an example

What is canvas?

WPF has many layouts, among which the canvas is a popular one. Let us learn something about the canvas. It has some properties and methods. You can make an icon by using Canvas.Right, Canvas.Left, Canvas.Bottom and Canvas.Top coordinators and can make undefined controls.

Canvas is a lightweight layout of WPF. Canvas is used for 2D graphic design elements but not for UI. You cannot use it for making text-box, checkbox, or drop-down because it will create difficulty in screen resolution. Canvas has its height & width, so it cannot be re-sized automatically.

It allows you to put canvas into the canvas. That’s why it can only be used for making drawings. This was the main reason and that’s why developers are not using canvas for creating any controls like text-box, check-box, and Drop-Down. Despite having the support of these things in Canvas, the developer does not use it because of the screen resolution issue with canvas. Hence it is not considered as a UI element.

It has so many properties but the main properties are height and width, you have to set the height & width for the canvas but if you do not set these properties, then your canvas control view will not get created. Because it’s by default the height & width is zero (0). So if you do not set this, it will consider as zero and you cannot see the canvas control view. Thus, it is necessary to set the height and width of canvas control. Canvas has its properties which you can change dynamically as well.

You have to set the values for each property. That’s why, it is known as the simplest layout compare to other layouts like Grid, Stack panel and dock panel, etc.

You can set the canvas in both ways statically and dynamically. If you want to set the canvas statically, then you can do it with.XAML file and if you want to set dynamically, then you can do it with .CS file. We will see the example next.

Now let’s see the common and more used properties of the canvas. By using the canvas properties, you can make a square, triangle, and rectangle. You can make many things by setting the coordinators with some properties.

Properties of the canvas are as follows.

  1. Height & width
  2. Margin
  3. Background
  4. Name
  5. Zindex

1.   Height & width

This is one of the main properties of the canvas.

You can set the value whatever you want to design time. You can also change the value through .cs file you can set other properties like min-height, max-height, min-width and max-width.

If you want to check the canvas for the run-time, then you can check it by setting the actual height & actual width


2.   Margin

Thus, the property of canvas is used for how much space you want to keep from the left or right. It is used for design purpose. You have to set numeric values for this property which you can set in 3 different ways

1. <canvas margin=”10”>

2. <canvas margin=”10 20”>

3. <canvas margin=”10 5 10 5”>

3.1  <canvas margin=”10”>

It will leave equal space from left, right, top, and bottom.

3.2 <canvas margin=”10 20”>

In this, there are two parameters the first parameter is for left & right and the second parameter is for top and bottom. So the first parameter is 10 which             will leave space from left & right, and the second parameter 20 which will leave space from the top & bottom

<canvas margin=”10 20”>

3.3  <canvas margin=”10 20 15 25”>

10 which will set margin for left
20 which will set margin for the top
15 which will set margin for right
25 which will set margin for bottom

3. Background

This Property is used to fill the color of the canvas.

4. Name

It is not a very important property in case if you want to do canvas design from a statically XAML file. But, if you want to change the value dynamically, then for the reference you have to use name property.

You can use the event handler as a name property. For every canvas control, there is an identifier.

5. Zindex

The zindex property of canvas is used for indexing the canvas. By giving index, you can easily find which control is behind or which control is overlaying and giving the full view just through sorting index property.

The control which has less index value stays behind and the control which has more zindex value stays in front and overlaps that control.

Indexing is done in ascending order so that the control having more index numbers would be shown.

Now let’s see the example of making a statistical and dynamic canvas.

1. Statistical canvas (.XAML file)


Statistical canvas Output

Statistical canvas Output

2.   Dynamic canvas(.cs File)

When the page loads canvas will create


Dynamic canvas(.cs File) Output-1

Dynamic canvas(.cs File) Output-1

We have seen two different examples of canvas creation but in different ways.


There is a small example given below to create a canvas. Dynamically adding & removing items from the canvas.

The program is simple when an empty area clicked then it will create a new canvas and again clicked on any canvas control, then it will be removed. All these functionalities would be done by using add or remove.

.XAML File

.CS File


Dynamic canvas(.cs File) Output-2

Dynamic canvas(.cs File) Output-2


In this article, we have learned in detail about how Canvas can be implemented in different ways and understood the importance of different properties of Canvas. The lightweight nature of Canvas attracts the users to utilize it for purposes like 2D design creation, etc.

Author Bio:

Vinod Satapara – Technical Director, iFour Technolab Pvt Ltd

Technocrat and entrepreneur with years of experience building large-scale enterprise web, cloud, and mobile applications using the latest technologies like ASP.NET, CORE, .NET MVC, Angular, and Blockchain. Keen interest in addressing business problems using the latest technologies and have been associated with ASP.NET software development companies.

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

Managing Kubernetes using Terraform

Kubernetes has continued in its strive to influence the tech space with its flexibility and portability in container orchestration. And with its ...

Handling GraphQL API Authentication using Auth0 with Hasura Actions

In this article, we’re going to demonstrate how we can set up Authentication/Authorization with Hasura and Auth0. First, we’ll set up the Auth0 ...

Building Rest API With Django Using Django Rest Framework and Django Rest Auth

Building Rest API seems to be complex when trying to achieve this on your own with Django,  thanks to the Django Rest framework project which has ...

No comments yet

Sign in

Forgot password?

Or use a social network account


By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account


By Signing In \ Signing Up, you agree to our privacy policy