WPF

Canvas In WPF

A Canvas panel is used to position child elements by using coordinates that are relative to the canvas area. Here are some of the properties of Canvas panels.
  • The default values of Height and Width properties of a Canvas are 0. If you do not set these values, you will not see a canvas unless child elements are automatically resizable. 
  • Child elements on a Canvas are never resized.
  • The vertical and horizontal alignments on child elements do not work. Child elements are placed on positions set by the Canvas Left, Top, Right, and Bottom properties.
  • Margin does work partially. If Left property of Canvas is set, Right property does not work. If Top property of Canvas is set, Bottom property does not work.
The Canvas element in XAML represents a Canvas control.
 
<Canvas/>
 
The Canvas control has three properties. The Left property represents the distance between the left side of a control and its parent container Canvas. The Top property represents the distance between the top of a control and its parent container Canvas.
 
The code in Listing 1 creates a Canvas and adds three Rectangle controls and position them using Canvas control properties.
  1. <Canvas Background="LightCyan">  
  2.     <Rectangle Canvas.Left="10" Canvas.Top="10" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Red" />  
  3.     <Rectangle Canvas.Left="60" Canvas.Top="60" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Blue" />  
  4.     <Rectangle Canvas.Left="110" Canvas.Top="110" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Green" />  
  5. </Canvas>  
Listing 1
 
The output looks like Figure 1.
CanvasImg1.gif
Figure 1
 
The Canvas class in WPF represents a Canvas control. The code listed in Listing creates a Canvas Panel dynamically, add three Rectangle controls to it, and sets their left and top positions using Canvas.SetLeft and Canvas.SetTop methods. The output of Listing generates Figure 1.
  1. private void CreateDynamicCanvasPanel() {    
  2.     // Create a Canvas Panel control    
  3.     Canvas canvasPanel = new Canvas();    
  4.     // Set Canvas Panel properties    
  5.     canvasPanel.Background = new SolidColorBrush(Colors.LightCyan);    
  6.     // Add Child Elements to Canvas    
  7.     Rectangle redRectangle = new Rectangle();    
  8.     redRectangle.Width = 200;    
  9.     redRectangle.Height = 200;    
  10.     redRectangle.Stroke = new SolidColorBrush(Colors.Black);    
  11.     redRectangle.StrokeThickness = 10;    
  12.     redRectangle.Fill = newS olidColorBrush(Colors.Red);    
  13.     // Set Canvas position    
  14.     Canvas.SetLeft(redRectangle, 10);    
  15.     Canvas.SetTop(redRectangle, 10);    
  16.     // Add Rectangle to Canvas    
  17.     canvasPanel.Children.Add(redRectangle);    
  18.     // Add Child Elements to Canvas    
  19.     Rectangle blueRectangle = newRectangle();    
  20.     blueRectangle.Width = 200;    
  21.     blueRectangle.Height = 200;    
  22.     blueRectangle.Stroke = new SolidColorBrush(Colors.Black);    
  23.     blueRectangle.StrokeThickness = 10;    
  24.     blueRectangle.Fill = new SolidColorBrush(Colors.Blue);    
  25.     // Set Canvas position    
  26.     Canvas.SetLeft(blueRectangle, 60);    
  27.     Canvas.SetTop(blueRectangle, 60);    
  28.     // Add Rectangle to Canvas    
  29.     canvasPanel.Children.Add(blueRectangle);    
  30.     // Add Child Elements to Canvas    
  31.     Rectangle greenRectangle = new Rectangle();    
  32.     greenRectangle.Width = 200;    
  33.     greenRectangle.Height = 200;    
  34.     greenRectangle.Stroke = new SolidColorBrush(Colors.Black);    
  35.     greenRectangle.StrokeThickness = 10;    
  36.     greenRectangle.Fill = new SolidColorBrush(Colors.Green);    
  37.     // Set Canvas position    
  38.     Canvas.SetLeft(greenRectangle, 110);    
  39.     Canvas.SetTop(greenRectangle, 110);    
  40.     // Add Rectangle to Canvas    
  41.     canvasPanel.Children.Add(greenRectangle);    
  42.     // Set Grid Panel as content of the Window    
  43.     RootWindow.Content = canvasPanel;    
  44. }  
Listing 1
 
The z-order of a control determines whether the control is in front of or behind another overlapping control. The default z-order of controls is the order controls are created in. The ZIndex property of Canvas represents the z-order of a control. The maximum value of ZIndex is 32766.
 
In Figure 1, the z-order of red, blue, and green rectangles is 1, 2, and 3 respectively. Now, the code in Listing 2 changes the z-order of these rectangles using the ZIndex property of the Canvas. 
 
The code snippet in Listing 2 sets the position of the Canvas control in the left top corner of the page.
  1. <Canvas Background="LightCyan">  
  2.     <Rectangle Canvas.Left="10" Canvas.Top="10" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Red" Canvas.ZIndex="2" />  
  3.     <Rectangle Canvas.Left="60" Canvas.Top="60" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Blue" Canvas.ZIndex="1" />  
  4.     <Rectangle Canvas.Left="110" Canvas.Top="110" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Green" Canvas.ZIndex="3" />  
  5. </Canvas>  
Listing 2
 
The new output looks like Figure 2 where blue rectangle is below red and green is at the top of both of them.
 
CanvasImg2.gif
Figure 2

Up Next
    Ebook Download
    View all
    Learn
    View all
    Founded in 2003, Mindcracker is the authority in custom software development and innovation. We put best practices into action. We deliver solutions based on consumer and industry analysis.
    Membership not found