Search

In response to Joe’s comment on the Canvas article about how the Canvas control deals with the Measure/Arrange process when it is laid out by a parent Panel:

It seems that during Measure/Arrange process the child Canvas will take zero width and height provided these properties are not set, even if it contains some controls. Here is a little example:

XAML:

We don’t see the Blue background of the inner Canvas because its size is zero.

Introduction

Layout controls are Silverlight controls which act as containers of other controls. Their main purpose is the positioning and arranging of their child controls. There are several layout controls: Canvas, StackPanel and Grid and TabPanel.

See also:
Canvas Article
StackPanel Article
Grid Article

Overview

All layout controls derive from the basic abstract class Panel.

There are also four more descendants of the Panel Class: DataGridCellsPresenter, DataGridColumnHeadersPresenter, DataGridDetailsPresenter, DataGridRowsPresenter. Their purpose is the positioning of elements in a DataGrid template. They are not standalone controls.

Layout controls inherit the Children collection of type UIElementCollection. Since all elements in this collection are UIElement objects and the Panel itself derives from UIElement layout controls can be nested in one another without limitation.

The following example demonstrates the nesting:

Note: to understand this example you should be familiar with all layout controls: Canvas, StackPanel and Grid

We want to have the following meaningless result (I don’t like giving real world examples, I just want to show you how nesting of layout controls works.):

Introduction

The Canvas is the simplest layout control used as a container for other Silverlight controls. The inner controls are positioned absolutely towards its left and top sides.

See also:
Silverlight Layout controls
Grid Article
StackPanel Article

Overview

The following example demonstrates the use of the Canvas:

We want to have a rectangle positioned 100 pixels from the left side and 50 pixels from the top side:

The child controls of the Canvas are positioned absolutely towards its left and top sides by their “Canvas.Left” and “Canvas.Top” attached properties.

Here is the XAML code: