UI Frontier Technology: not limited to grids

The canvas is one of several layout options available in Windows presentation Foundation (WPF) and Silverlight, which is most closely related to traditional layouts. When you use child elements to fill a canvas, you can locate each child element by specifying coordinates by using the Canvas.Left and Canvas.Top attached properties. This pattern differs significantly from other panels, which are based on simple algorithms to lay out the child elements without the programmer pointing to the actual location.

When you hear the word "canvas," You may think of drawing and painting. As a result, programmers who use WPF and Silverlight may prefer to categorize the canvas to display vector graphics. However, when you use the canvas to display lines, polylines, polygons, and path elements, the elements themselves contain coordinate points for locating themselves in the canvas. Therefore, you do not need to use Canvas.Left and canvas.top attached properties.

If you don't need the additional properties that the canvas provides, why use the canvas? Is there a better way?

Canvas and Grid

Over the years, I've become more and more reluctant to use the canvas to display vector graphics, preferring to use a single cell grid. A single cell grid is like a regular grid, except that no rows or columns are defined. If the grid has only one cell, you can put multiple elements into the grid cell without using any additional properties of the grid to specify the row or column.

Initially, using a canvas or a single cell grid looks very similar. Regardless of which layout is used for vector graphics, lines, polylines, polygons, and path elements are based on their coordinates and determine their position relative to the upper-left corner of the container.

The difference between a canvas and a single cell grid is how the container is displayed to the rest of the layout system. WPF and Silverlight combine a two-step top-down layout in which each element asks for the size of its child elements, and then it is responsible for organizing its child elements relative to itself. In this layout system, the canvas differs significantly from a single cell grid:

For child elements, the grid has the same dimensions as its parent element. These dimensions are usually finite dimensions, but the canvas always displays an infinite dimension to its child elements.

The grid reports the total size of its child elements to its parent element. The canvas always has an apparent size of 0, regardless of the child elements it contains.

Suppose you have a set of polygon elements that make up some kind of cartoon-like vector image. If you place all of these polygon elements into a single cell network, the size of the mesh is determined by the maximum horizontal and ordinate polygons. The grid can then be treated as a normal element with a finite size in the layout system, because its size correctly reflects the size of the combined image. (In fact, only the upper-left corner of the image is displayed correctly when it is in the coordinate point (0, 0) and has no negative coordinates.) ）

However, if you put all of these polygons into the canvas, the canvas reports to the layout system that the size is zero. In general, when integrating a composite vector image into an application, it is almost certain that you want to see the behavior of a single cell grid rather than the canvas.

So is the canvas useless? Not at all. The trick is to make the most of the canvas's features. In fact, the canvas does not participate in the layout. Therefore, you can use the canvas when you need to go beyond the layout, showing graphics that are outside the boundaries of the layout system and those that float outside the boundaries of the layout system. By default, the canvas does not trim its child elements, so even if the canvas is very small, you can still hold the child objects outside its bounds. The canvas is more like a reference point for a display element or graphic than a container.

I think the canvas is an excellent technique for "thinking through the frame". Although I will display code examples in Silverlight, you can still use this technique in WPF. The downloadable source code included with this article is a Visual Studio solution called Thinkingoutsidethegrid, which you can find in the charlespetzold.com/silverlight/ Thinkingoutsidethegrid run the instance.