Difference between Grid, StackPanel, WrapPanel, DockPanel and Canvas

Grid: 

Combination of row and column layout is a Grid or it defines a flexible grid area that consists of columns and rows.; in other words, a Grid arranges controls in a tabular format.

Row and Column definitions in a grid indicate row and column. If you create additional rows and columns, you have to add RowDefinition items to the RowDefinitions collection and ColumnDefinition items to the ColumnDefinitions collection.

The Grid control is the most flexible layout panel, and supports arranging controls in multi-row and multi-column layouts. You can specify a Grid's Row and Column definitions by using RowDefinitions andColumnDefinitions properties that are declared immediately within the Grid control. You can position objects in specific cells of the Grid by using the Column and Row attached properties. You can distribute space within a column or a row by using Auto or star sizing. Auto and star sizing were explained earlier in this Quickstart. Content can span across multiple rows and columns by using the RowSpan and ColumnSpan attached properties.

Child elements of a Grid are drawn in the order in which they appear in markup or code. As a result, layered order (also known as z-order) can be achieved when elements share the same coordinates. For more information about z-order, see ZIndex.

The following XAML shows how to create a Grid with three rows and two columns. The height of the first and third rows is just large enough to contain the text. The height of the second row fills up the rest of the available height. The width of the columns is split equally within the available container width.

XAML

<Grid ShowGridLines="True" Margin="12,0,12,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition />
        <RowDefinition Height="auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <TextBox Text="1st row 1st column" TextWrapping="Wrap" Grid.Column="0" Grid.Row="0" />
    <TextBox Text="3rd row 1st column" TextWrapping="Wrap" Grid.Column="0" Grid.Row="2" />
    <Button Content="1st row 2nd column" FontSize="17" Grid.Column="1" Grid.Row="0" />
    <Button Content="3rd row 2nd column" FontSize="17" Grid.Column="1" Grid.Row="2" />
</Grid>

NOTE:

• "*" sizing distributes remaining available space proportionally.
• "Auto" sizing distributes space evenly based on the size of the content that is within a column or row.

StackPanel :

The StackPanel is a simple layout panel that arranges its child elements into a single line that can be oriented horizontally or vertically. You can use the Orientation property to specify the direction of the child elements. The default value for the Orientation property is Vertical. StackPanel is typically used in scenarios where you want to arrange a small subsection of the UI on your page.

Stack Panel common properties are:

• Stack child element horizontally or vertically.
• Default is vertical.
• Use orientation to change to horizontal.
• Controls positioning of elements by setting their horizontal alignment or vertical alignment properties.
• Control spacing by setting a margin and padding properties of elements.

The following XAML shows how to create a vertical StackPanel of items.

XAML

<StackPanel Margin="20">
    <Rectangle Fill="Red" Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Blue" Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Green" Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Purple" Width="50" Height="50" Margin="5" />
</StackPanel>

WrapPanel:

WrapPanel control which comes with the Silverlight for Windows Phone Toolkit.

One of the new controls in the Silverlight Toolkit is  WrapPanel. It enables users to position child elements sequentially from left to right or top to bottom.  When elements extend beyond the panel edge, they are positioned in the next row or column.

The wrap panel is similar to the StackPanel but it does not just stack all child elements to one row, it wraps them to new lines if no space is left. The Orientation can be set to Horizontal or Vertical.

The WrapPanel can be used to arrange tabs of a tab control, menu items in a toolbar or items in an Windows Explorer like list. The WrapPanel is often used with items of the same size, but its not a requirement.

To begin using WrapPanel first  add a reference to  the Microsoft.Phone.Controls.Toolkit.dll  assembly which is installed with the toolkit and you can find it in :        C:\ProgramFiles(x86)\MicrosoftSDKs\WindowsPhone\v8.0\Toolkit\Nov10\Bin\Microsoft.Phone.Controls.Toolkit.dll.

You will also need to add the "toolkit" prefix declaration. Make sure that your page declaration includes the "toolkit" namespace:

       xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Visual Structure

Note: A WrapPanel contains a collection of UIElement objects, which are in the Children property!

In the most common scenario WrapPanel as the name says will wrap controls, any controls which cannot fit on the first line/column will be wrapped to next line/column and so forth.

 Key Properties

• ItemHeight

      ItemHeight is a dependency property of type double. Gets or sets the height of the layout area for each item that is contained in a WrapPanel. The default value is      Double.NaN.

• ItemWidth

      ItemWidth is a dependency property of type double.Gets or sets the width of the layout area for each item that is contained in a WrapPanel. The default value is Double.NaN.

• Orientation

      Orientation is a dependency property of type Orientation. Gets or sets the direction in which child elements are arranged. The default is System.Windows.Controls.Orientation.Horizontal.

Sample Usage

Here is a simple example of how to use this Panel in Horizontal and Vertical Orientation mode. We will arrange 5 items i n a WrapPanel. The code is as follows:

?

<TextBlock Text="Horizontal Panel"/> <toolkit:WrapPanel ItemHeight="100" ItemWidth="100"  Height="300">     <Rectangle Fill="Aqua" Height="80" Width="80"/>     <Rectangle Fill="Pink" Height="80" Width="80"/>     <Rectangle Fill="Green" Height="80" Width="80"/>     <Rectangle Fill="YellowGreen" Height="80" Width="80"/>     <Rectangle Fill="Red" Height="80" Width="80"/> </toolkit:WrapPanel> <TextBlock Text="Vertical Panel"/> <toolkit:WrapPanel ItemHeight="100" ItemWidth="100" Orientation="Vertical" Height="300">     <Rectangle Fill="WhiteSmoke" Height="80" Width="80"/>     <Rectangle Fill="White" Height="80" Width="80"/>     <Rectangle Fill="Beige" Height="80" Width="80"/>     <Rectangle Fill="Bisque" Height="80" Width="80"/>     <Rectangle Fill="Wheat" Height="80" Width="80"/> </toolkit:WrapPanel>

The result can be seen at the following screen shots:

                            

WrapPanel as ItemsPanel

Although WrapPanel is a simple component it can be used in advanced scenarios when you want to change the ItemsPanel of any particular items control. For example  you can use it in the LongListSelector, ListPicker, ListBox and other ItemsControls in order to arrange the items in suitable way:

<ListBox>     <ListBox.ItemsPanel>         <ItemsPanelTemplate>             <toolkit:WrapPanel ItemWidth="100" ItemHeight="50"/>         </ItemsPanelTemplate>     </ListBox.ItemsPanel>     <ListBoxItem Content="Item1"/>     <ListBoxItem Content="Item2"/>     <ListBoxItem Content="Item3"/>     <ListBoxItem Content="Item4"/>     <ListBoxItem Content="Item5"/>     <ListBoxItem Content="Item6"/> </ListBox>

           

Note:

You should definitely avoid using it in your apps if you are planing to use in ListBox.ItemsPanel for large lists items presented with fixed size!!

Using aWrapPanelwith a large number of items will cause the control loading time and memory usage to increase,and if you make it large enough,you’ll probably start seeing your app crash with “out of memory” errors…

DockPanel:

The DockPanel is a layout control, like the StackPanel and the Grid, but in some cases is far more powerful than them. The idea of the control is that you can "dock" its child controls in all of the four directions - top, bottom, left, right (compared to the StackPanel, which allows only two directions - top->bottom and left->right). That gives us pretty much freedom when designing our application's UI. Freedom in sense that the count of the nested controls will be less, which means less code and more simple structure of the XAML, or you don't have to bother to define the structure of a Grid first.

• You can align the child controls to the top, bottom, left or right. The default alignment is to left.

• The child controls take the place that is left after placing the previous child controls.

• You can fill the rest of the place with the last child control. The DockPanel does this by default.

The panel exposes the following properties:
LastChildFill - This is a dependency property that gets or sets a value indicating whether the last child element added to the DockPanel  resizes to fill the remaining space.
Dock - This is an attached property  that determines the dock side of the element. It can be set to one of the following values:Dock.Top, Dock.Bottom, Dock.Left and Dock.Right.

To begin using WrapPanel first  add a reference to  the Microsoft.Phone.Controls.Toolkit.dll  assembly which is installed with the toolkit and you can find it in :        C:\ProgramFiles(x86)\MicrosoftSDKs\WindowsPhone\v8.0\Toolkit\Nov10\Bin\Microsoft.Phone.Controls.Toolkit.dll.

You will also need to add the "toolkit" prefix declaration. Make sure that your page declaration includes the "toolkit" namespace:xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Add the following code into your page to start using the DockPanel:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">     <toolkit:DockPanel>         <Button  Content="Bottom" toolkit:DockPanel.Dock="Bottom"/>         <Button  Content="Top" toolkit:DockPanel.Dock="Top"/>         <Button  Content="Middle" />         <Button  Content="Right"  toolkit:DockPanel.Dock="Right"/>         <Button  Content="Left"  toolkit:DockPanel.Dock="Left"/>     </toolkit:DockPanel> </Grid>

Here is how the final result should looks like:

Canvas :

Canvas defines an area within which you can explicitly position child elements by coordinates relative to the Canvas area. Canvas is useful for scenarios where the UI elements contained within it never move.

You can position the control inside the Canvas by specifying x and y coordinates. The x and y coordinates are specified by using the Canvas.Left and Canvas.Top attached properties. Canvas.Left specifies the object's distance from the left side of the containing Canvas (the x-coordinate), and Canvas.Top specifies the object's distance from the top of the containing Canvas (the y-coordinate).

• You control all aspects of positioning and sizing child elements.
• Elements are positioned absolutely using Canvas.Top and Canvas.Left attached properties.
• Layering can be explicitly specified using the Canvas.ZIndex attached property.
• The panel does not affect the sizing of child elements.
• Child content can overflow the bounds of the panel and is not visually clipped if larger than the panel.

The following XAML shows how to position a rectangle 30 pixels from the left and 200 pixels from the top of a Canvas.

XAML

<Canvas Background="Transparent">
    <Rectangle Canvas.Left="30" Canvas.Top="200"
        Fill="red" Width="200" Height="200" />
</Canvas>

.........................

If you're creating a complex layout that isn't easily achieved by using Canvas, StackPanel, or Grid, you can create a custom panel, which allows you to define layout behavior for the panel's children. To do this, derive from Panel and override its MeasureOverride and ArrangeOverride methods.