Layouts in Windows Presenation Foundation(wpf)

In this post let me give you a detailed view of Layout controls in WPF.
Layout Principles
The developers of WPF knew that layout was going to be an intrinsic part of the system. The goal was to define a single layout system that could span from
paginated documents to traditional application UIs. Eventually we realized that a single, monolithic system for this wide span of scenarios was impossible (or at least very difficult) and moved to a model of layout composition. We ended up solving the bulk of the layout problems in the same way that we tackled the control library: by allowing layouts to be nested inside of other layouts.
Given this approach, it seemed that the most critical thing to determine was how a child control would communicate with the parent layout. This “contract” between the parent and child would, we hoped, enable any control to be hosted in any layout.
Layout Library
On top of the basic layout control and the more complete framework layout odel, WPF provides a suite of layout panels. These panels implement set of basic layouts that tries to represent the most common needs for layout. e will cover some of the more common layout panels: Canvas, tackPanel, DockPanel, and UniformGrid. The most complex layout, Grid, will be covered next, in a section all to itself.
1) Canvas
Canvas is the simplest layout included in WPF. Canvas offers four properties:Top, Left, Right, and Bottom. Canvas lets us position its child elements at any offset from one corner of the panel. Notice that I said “position”; Canvas does not introduce any sizing constraints on child elements. Canvas simply takes the desired size from an element and positions it relative to one of the four corners. Only two properties can be used: one horizontal coordinate and one vertical coordinate. If more are specified, the extra properties will be ignored.
Canvas doesn’t place any interesting constraints on the width or height of the layout slot, so the HorizontalAlignment and VerticalAlignment properties are irrelevant. Margins are still honored, but they are behaviorally identical to setting the Canvas layout properties. For this reason, Canvas is sometimes referred to as the “slotless” layout panel.
2) StackPanel
Up to this point in the article, StackPanel is the only layout panel that we’ve seen, so you’ve probably figured out how it works by now, but it’s still useful to talk about it. As the name implies, StackPanel stacks things up in a row. Through the Orientation property we can control whether the stack is horizontal or vertical.
The slot for each child in StackPanel is given the entire width or height of the control (depending on its orientation), and StackPanel determines its preferred size according to the maximum size of its children. To show this, we can nest a couple of StackPanel controls and see how they behave. The outermost instance has a border around it (so that it’s visible), and each inner panel has a background:
StackPanel must be used carefully because it measures children using an infinite width or height based on the orientation. This lack of a control on size can break other child layout panels, specifically causing problems for TextBlock with wrapping.
3) DockPanel
DockPanel is fairly similar to StackPanel, except that it allows mixing of stacking from different edges within the same layout container.
DockPanel is probably one of the most common UI layouts today. Windows Forms natively supported docking, and Java supports docking with its BorderLayout class. Docking allows elements to be stacked at any edge of a container, with the final element filling the remaining space.
We can break down Windows Explorer into its major structural elements: menu, toolbar, folder list, and details pane .Implementing this layout in WPF is relatively simple: The DockPanel offers a single property, Dock, which allows us to specify the edge to which a control is docked. The declaration order of the elements determines the order in which they’re placed, and by default the last child fills the remaining space.
4) WrapPanel
If DockPanel is a stack panel with multiple edges, then WrapPanel is a stack panel with wrapping support. Remember that StackPanel positions elements with infinite width or height (depending on the orientation), allowing any number of elements, stacked one after the other. WrapPanel, on the other hand, uses the available space and fits elements to it; and when it runs out of room, it wraps to the next line. The classic example of a wrappanel is toolbar layouts.
By default, WrapPanel simply sizes all the children to fit their content, although we can fix the width and height of the children by using the ItemWidth and ItemHeight properties:

5) UniformGrid
The final basic layout, which is really nothing like StackPanel, is UniformGrid. UniformGrid hides in the System.Windows.Controls.Primitives namespace and provides a very basic grid layout: Each cell is the same size (hence uniform), and the locations of the items are determined simply by their order in the children collection.
To use UniformGrid, we specify the number of columns and rows we want. If we specify only columns, then rows will be calculated as the number of children divided by the number of columns, and vice versa.
6) Grid
UniformGrid offers a basic grid, but for most scenarios it doesn’t go far enough. People want grids with items that span cells, nonuniform row and column spacing, and so on. Grid is by far the most power, flexible, and complex of the UI layouts. On the surface, Grid is simple: Elements are positioned within grid cells defined by a series of rows and columns. Easy, right?
The simplest use of Grid is to set the RowDefinitions and Column- Definitions properties, add some children, and use the Grid.Row and Grid.Column attached properties to specify which child goes in which slot :

We will see different WPF controls in the next article on WPF Controls