Various Types of Panels in XAML Layout

Why XAML is Important

XAML is a modern UI design Markup Language, it helps design a rich UI, 2d and 3d animation, plugin based applications and we also use XAML for:

• Defining workflow content in Windows Workflow Foundation.
• Defining services in Windows Communication Foundation.
• A UI for Silverlight and Windows Presentation Foundation.
• Rich graphics and animation based application.
• Arranging controls based on fixed pixel coordinates.

The following summarizes the differences among Windows, Web and XAML Layout applications.

Normal Windows Layout Application

• Controls have fixed coordinates.
• The Location property has x and y coordinates representing the upper-left corner of the control retrieve to upper-left corner of container.
• Some flexibility to dock the ok and cancel buttons to the lower right.
• Anchor a list box to the left of the form using flow layout to arrange controls in a flow layout.
• Use table layout to arrange controls in a table format.

Web Form Layout

• Controls are, by default, anchored relative to the upper-left of the page.
• You can specify absolute positioning if you want.
• Re-sizing a window does not change the position of controls.

XAML Layout

• XAML provides a rich set of built-in layout panels that help you to avoid the common pitfalls.
• Flow Based Layout.
• Content is organized in a Container.
• All Containers are derived from Systems.Window.control.
• Resolution and Size Independency.
• Layout automatically adjusts if the screen resolution changes.

Element Size in XAML

• The size can be specified as an absolute amount of logical units, as a percentage value or automatically.
• Size is determined by calculating the available screen space, size of constraints and layout-specific properties (Margin, Padding, etc.) behavior of the present Panel.
• Fixed size of logical units (1/96 inch).
• Auto takes as much space as needed by the contained control.
• Star (*) takes as much space as available (after filling all auto and fixed sized columns), proportionally divided over all star-sized columns. So 3*/5* means the same as 30*/50*.

Remember that star-sizing does not work if the grid size is calculated based on its content.

Panels in XAML

• Grid Panel.
• Stack Panel.
• Dock Panel.
• Wrap Panel.
• Canvas Panel.

Grid Panel: combination of row and column layout is a Grid Panel; in other words, a Grid Panel arranges controls in a tabular format. The functionality is similar to the HTML table but more flexible as in the following example we try to show a row and column combination for the windows. There are 4 rows and 4 columns.

• 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, as the above example shows a grid with 4 rows and 4 columns.

Add controls in Grid Panel

To add controls to the grid layout panel ,just put the declaration between the opening and closing tags of the Grid. Keep in mind that the row and columndefinitions must proceed any definition of child controls.

The grid layout panel provides the two attached properties Grid.Column and Grid.Row to define the location of the control.

In the following example I try to show one normal data entry form design using XAML:



StackPanel

StackPanel is a useful XAML layout. It keeps a control horizontal and vertical; using a stack we design the application like many controls.

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.

Wrap Panel

In a Wrap Panel the child elements are positioned sequentially, from left to right and top to bottom.

By default the layout orientation is horizontal and the controls flow left to right; depending on the screen size the control might wrap to the next line.

By default the screen and code:

    <Grid>
      <Grid.RowDefinitions>
          <RowDefinition></RowDefinition>
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>       
        <WrapPanel Grid.Row="0" Grid.Column="0">
            <Button Margin="10">Mango</Button>
            <Button Margin="10">Apple</Button>
            <Button Margin="10">Grape</Button>
            <Button Margin="10">Banana</Button>
            <Button Margin="10">Bilberry</Button>
            <Button Margin="10">Lemon</Button>
        </WrapPanel>
    </Grid>



Elements wrap to the next line once to reduce screen width:



DockPanel: Dock Panel is a most useful layout panel in XAML, it arranges controls to the top, left, bottom, right and remaining space. A useful property is:

• DockPanel.Dock Property indicates where the element controls are docked.

The default is left; if we don't set the dock property then it will be left:

• DockPanel.lastChildFill DockPanel will fill up the remaining space of the window.

Canvas Layout:

• Elements are placed according to coordinates
• The Canvas layout is similar to Windows forms layout.
• Elements do not resize automatically at run time.
• Use canvas.left, canvas.right, canvas.top and canvas.buttom.

Drawbacks:

• Time consuming and laborious.
• Harder to line up elements.
• No resolution and size independence.

Code

    <Canvas>
            <Label Content="Canvas Layout Demo"  FontSize="15" FontWeight="Bold"
                    Foreground="Red"  Canvas.Top="10" Canvas.Left="25"/> 
            <Label Content="ContactInfo" FontSize="12"  Canvas.Top="66" Canvas.Left="10"/> 
            <Label Content="Name"  Canvas.Top="45" Canvas.Left="93"/> 
            <Label Content="Address"  Canvas.Top="90" Canvas.Left="93"/>
            <TextBox  FontSize="15" FontWeight="Bold"         Canvas.Top="45" Canvas.Left="185" Width="93"/>
            <TextBox FontSize="15" FontWeight="Bold"          Canvas.Top="90" Canvas.Left="185" Width="93"/>
   </Canvas>



One small simple Data Entry Form Demo using all panels: stack, dock, wrap, and canvas.

In this example we try to show the real use of these panels and controls in WPF: