Proper layout and positioning are a vital part of interactive, high-performance and user-friendly Windows applications. This series of articles explains the layout process in WPF. The series starts with an understanding of the WPF layout process. The next part of this series will cover the basics of layout and positioning such as size, margin, padding and alignment of elements. Later in this series, I will cover various panels and related parent controls available in WPF.

Table of Contents

Introduction

In the previous article, WPF Layout: Panels, I discussed the basics of panels. This article focuses on the Canvas Panel in details.

Canvas Panel

A Canvas panel is used to position child elements using coordinates relative to the canvas area. Here are some of the properties of Canvas panels.

  1. The default values of the 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.
  2. Child elements on a Canvas are never resized.
  3. 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.
  4. Margin does work partially. If a Left property of a Canvas is set, Right property does not work. If a Top property of a Canvas is set, the Bottom property does not work.

The Canvas element in XAML represents a Canvas control.

  1. <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 positions them using Canvas control properties.
  1. <Canvas Background="LightCyan" >
  2. <Rectangle
  3. Canvas.Left="10" Canvas.Top="10"
  4. Height="200" Width="200"
  5. Stroke="Black" StrokeThickness="10" Fill="Red" />
  7. <Rectangle
  8. Canvas.Left="60" Canvas.Top="60"
  9. Height="200" Width="200"
  10. Stroke="Black" StrokeThickness="10" Fill="Blue" />
  12. <Rectangle
  13. Canvas.Left="110" Canvas.Top="110"
  14. Height="200" Width="200"
  15. Stroke="Black" StrokeThickness="10" Fill="Green" />
  17. </Canvas>
Listing 1

The output looks as in Figure 1.



Figure 1

The Canvas class in WPF represents a Canvas control. The code listed in Listing 2 creates a Canvas Panel dynamically, adds three Rectangle controls to it and sets their left and top positions using Canvas.SetLeft and Canvas.SetTop methods. The output of Listing 1 generates Figure 1.
  1. private void CreateDynamicCanvasPanel()
  2. {
  4. // Create a Canvas Panel control
  5. Canvas canvasPanel = new Canvas();
  7. // Set Canvas Panel properties
  8. canvasPanel.Background = new SolidColorBrush(Colors.LightCyan );
  9. // Add Child Elements to Canvas
  10. Rectangle redRectangle = new Rectangle();
  11. redRectangle.Width = 200;
  12. redRectangle.Height = 200;
  13. redRectangle.Stroke = new SolidColorBrush(Colors.Black);
  14. redRectangle.StrokeThickness = 10;
  15. redRectangle.Fill = new SolidColorBrush(Colors.Red);
  17. // Set Canvas position
  18. Canvas.SetLeft(redRectangle, 10);
  19. Canvas.SetTop(redRectangle, 10);
  21. // Add Rectangle to Canvas
  23. canvasPanel.Children.Add(redRectangle);
  25. // Add Child Elements to Canvas
  26. Rectangle blueRectangle = new Rectangle();
  27. blueRectangle.Width = 200;
  28. blueRectangle.Height = 200;
  29. blueRectangle.Stroke = new SolidColorBrush(Colors.Black);
  30. blueRectangle.StrokeThickness = 10;
  31. blueRectangle.Fill = new SolidColorBrush(Colors.Blue);
  33. // Set Canvas position
  34. Canvas.SetLeft(blueRectangle, 60);
  35. Canvas.SetTop(blueRectangle, 60);
  37. // Add Rectangle to Canvas
  39. canvasPanel.Children.Add(blueRectangle);
  41. // Add Child Elements to Canvas
  42. Rectangle greenRectangle = new Rectangle();
  43. greenRectangle.Width = 200;
  44. greenRectangle.Height = 200;
  45. greenRectangle.Stroke = new SolidColorBrush(Colors.Black);
  46. greenRectangle.StrokeThickness = 10;
  47. greenRectangle.Fill = new SolidColorBrush(Colors.Green);
  49. // Set Canvas position
  50. Canvas.SetLeft(greenRectangle, 110);
  51. Canvas.SetTop(greenRectangle, 110);
  53. // Add Rectangle to Canvas
  54. canvasPanel.Children.Add(greenRectangle);
  56. // Set Grid Panel as content of the Window
  57. RootWindow.Content = canvasPanel;
  59. }
Listing 2

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 the Red, Blue and Green rectangles is 1, 2 and 3 respectively. Now, the code in Listing 3 changes the z-order of these rectangles using the ZIndex property of the Canvas.

The code snippet in Listing 3 sets the position of the Canvas control in the top-left corner of the page.
  1. <Canvas Background="LightCyan" >
  2. <Rectangle
  3. Canvas.Left="10" Canvas.Top="10"
  4. Height="200" Width="200"
  5. Stroke="Black" StrokeThickness="10"
  6. Fill="Red" Canvas.ZIndex="2" />
  8. <Rectangle
  9. Canvas.Left="60" Canvas.Top="60"
  10. Height="200" Width="200"
  11. Stroke="Black" StrokeThickness="10"
  12. Fill="Blue" Canvas.ZIndex="1" />
  14. <Rectangle
  15. Canvas.Left="110" Canvas.Top="110"
  16. Height="200" Width="200"
  17. Stroke="Black" StrokeThickness="10"
  18. Fill="Green" Canvas.ZIndex="3" />
  20. </Canvas>
Listing 3

The new output looks as in Figure 2 where Blue rectangle is below the Red and the Green is on top of both of them.



Figure 2

A Dock Panel is used to dock child elements in the left, right, top and bottom positions of the relative window.

Summary

In this article, I discussed the Canvas panel in WPF. In the next article of this series, I will focus on Dock panel in details.