Bookmark and Share Share...    Subscribe to this feed Feed   About Christian Moser  


Canvas Panel

Introduction

The Canvas is the most basic layout panel in WPF. It's child elements are positioned by explicit coordinates. The coordinates can be specified relative to any side of the panel usind the Canvas.Left, Canvas.Top, Canvas.Bottom and Canvas.Right attached properties.

The panel is typically used to group 2D graphic elements together and not to layout user interface elements. This is important because specifing absolute coordinates brings you in trouble when you begin to resize, scale or localize your application. People coming from WinForms are familiar with this kind of layout - but it's not a good practice in WPF.



 
<Canvas>
    <Rectangle Canvas.Left="40" Canvas.Top="31" Width="63" Height="41" Fill="Blue"  />
    <Ellipse Canvas.Left="130" Canvas.Top="79" Width="58" Height="58" Fill="Blue"  />
    <Path Canvas.Left="61" Canvas.Top="28" Width="133" Height="98" Fill="Blue" 
          Stretch="Fill" Data="M61,125 L193,28"/>
</Canvas>
 
 

Override the Z-Order of Elements

Normally the Z-Order of elements inside a canvas is specified by the order in XAML. But you can override the natural Z-Order by explicity defining a Canvas.ZIndex on the element.

 
<Canvas>
    <Ellipse Fill="Green" Width="60" Height="60" Canvas.Left="30" Canvas.Top="20"    
             Canvas.ZIndex="1"/>
    <Ellipse Fill="Blue"  Width="60" Height="60" Canvas.Left="60" Canvas.Top="40"/>
</Canvas>
 
 




Last modified: 2010-04-23 20:59:02
Copyright (c) by Christian Moser, 2011.

 Comments on this article

Show all comments
Berni
Commented on 29.January 2010
Use Grid.SetZIndex(element, index) or Canvas.SetZIndex(element, index)
SDI
Commented on 8.February 2010
Is it possible to add visible grid lines to the canvas? Say a user dragged a control to the canvas and you wanted it to snap to the grid lines defined by the user...
sharmi
Commented on 19.March 2010
but i couldnt find Zindex property
Saphron
Commented on 24.April 2010
I'm a born again Christian and I don't believe in WPF. It's the devil's work.
Andrew
Commented on 30.April 2010
I am an isreali and I am claiming a birthright to use WPF. I will not tolerate any native developers making similar claims.
Arvinth
Commented on 27.May 2010
nice one
SuicideBomber
Commented on 9.July 2010
I'm a Palestinian and I like to shoot large rockets randomly in the air for fun regardless if they kill innocent people. It's my people's pastime and I have a birthright to do it. One day I will blow myself up in a eatery in Israel. It will be so fun!!!!!!!!!
Amit Prajapati
Commented on 17.July 2010
canvas.SetZindex(UIcontrol,value) will sent zindex by programming
Mangesh
Commented on 11.August 2010
I am having data points, which i want plot in 4 Quadrant on canvas. I want the origin at center of the Canvas. Please Help me.
AmazingIT
Commented on 29.August 2010
Good, Free Software HERE : www.AmazingIT.blogspot.com
Pharmg920
Commented on 29.October 2010
Hello! decacke interesting decacke site!
Shrinivas
Commented on 10.November 2010
Nice Explanation
ramesh lamani
Commented on 24.November 2010
good article ...
Britto
Commented on 9.December 2010
Nice article thank U
Rajasekar N
Commented on 10.December 2010
good
Rajesh
Commented on 7.January 2011
Its Nice
Amit
Commented on 11.January 2011
Good one
Clarence
Commented on 15.February 2011
If this is not good practice, then how can I control the position of my controls? I do NOT want my GRID dead set in the middle of my form, I want it at the top. Also, I want to position controls in various places throughout the form for the look and feel I desire. I'm new to this but to do otherwise means that WPF places the controls where it sees fit. What am I missing here, because it's frustrating. I see a lot in the tutorials about setting up the controls, that easy.... what about the advanced, real world stuff? No matter how new some of us are to something, we're still very far beyond hello world! Who knows how to write about that stuff?
Jimmy
Commented on 22.March 2011
I'm trying to figure out how to host a wpf app within another one (like a plugin). I want to use a canvas as a container for the plugin app. Is this possible, or is there a more effective way of doing so?
Christian Moser
Commented on 23.March 2011
Hi Jimmy,
using a canvas is not a good way to host a plugin. A better way would be using a ContentControl or a ContentPresenter and set the Content property to the UserControl you want to host.
If you plan to do a more elaborate application, try the PRISM framework. It covers UI composition and modulary aspects.

Greetings
Christian
noone
Commented on 11.May 2011
Hi,
I want to use a canvas panel to be editable after running the WPF application.
Is it possible, if possible how to achieve this
k
Commented on 6.July 2011
k
Sam
Commented on 16.August 2011
This is fine. My question is, which way to go when one wants thousands of interactive objects(e.g. rectangles) on the canvas? The way presented here is to slow (up from 1500 rectangles it is getting not interactive anymore). What would be the alternative???
Sam
Commented on 16.August 2011
This is fine. My question is, which way to go when one wants thousands of interactive objects(e.g. rectangles) on the canvas? The way presented here is to slow (up from 1500 rectangles it is getting not interactive anymore). What would be the alternative???
ocsirf
Commented on 18.September 2011
&quot;I want to position controls in various places throughout the form for the look and feel I desire.&quot; --EXACTLY!! I'm also new at WPF and so far the only thing that DOESN'T SUCK is a canvas. WTF is all the other layout BS I'm seeing, frustrating indeed. How can I anchor stuff to one side/corner of the Window like I could in Old School Windows Forms? That was easy and it made sense!

Name
E-Mail (optional)
Comment