Canvas Panel

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>
 
 

 Comments on this article

Anil	Commented on 1.June 2009 Great info. I saw the canvas panel for the first time and I thought this is the panel where you put all the controls! I was unaware of dock panel, grid panel and so on.
Nevrose	Commented on 23.September 2009 It seems that ZIndex can be used to form groups. The controls are ordered by theire declaration order within a same group. Then each group are ordered by their ZIndex value. So, within the following example : - First we draw the group "ZIndex=0". Within this group, Ellipse Blue is drawn, then Ellipse Red is drawn. - Now we draw the group "ZIndex=1". Within this group, Ellipse Green is drawn, then Ellipse Violet is drawn. So, the display order is from the bottom to top : Blue, Red, Green, Violet. <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"/> <Ellipse Fill="Red" Width="40" Height="40" Canvas.Left="60" Canvas.Top="20" /> <Ellipse Fill="Violet" Width="40" Height="40" Canvas.Left="45" Canvas.Top="50" Canvas.ZIndex="1"/> </Canvas>
Nevrose	Commented on 10.January 2010 @ Neurosis: Yes, that's right! Zindex is the same as in css.
Trevor	Commented on 18.January 2010 Is there a way to change the ZIndex on a UIElement programatically at runtime?
Trevor	Commented on 18.January 2010 Is there a way to change the ZIndex on a UIElement programatically at runtime?
Trevor	Commented on 18.January 2010 Is there a way to change the ZIndex on a UIElement programatically at runtime?
Berni	Commented on 29.January 2010 Use Grid.SetZIndex(element, index) or Canvas.SetZIndex(element, index)
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
sdfdsf	Commented on 5.July 2010 ertert
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