Understanding Layout Panels in Silverlight
Silverlight applications build their visual tree out of panels, which are container elements responsible for sizing and positioning their children. Unlike absolute-positioning frameworks, Silverlight panels participate in a two-pass layout system: a Measure pass where each child reports its desired size, and an Arrange pass where the panel places children within the final rectangle it was given. Choosing the right panel — Grid, StackPanel, Canvas, or WrapPanel — determines how the UI reflows when the browser window or Silverlight plugin area is resized.
Cricket analogy: Just as a fielding captain first surveys how much ground each fielder needs to cover before setting the field, the Measure pass lets each child ask for its desired size before the panel commits to a final arrangement, similar to placing a slip cordon only after checking the pitch conditions.
Grid: Rows, Columns, and Star Sizing
The Grid panel divides available space into rows and columns defined by RowDefinitions and ColumnDefinitions, each of which can use Auto (size to content), a fixed pixel value, or star (*) sizing that distributes remaining space proportionally. A ColumnDefinition Width="2*" next to one with Width="*" receives twice the leftover space after Auto and fixed columns are subtracted. Children are placed into cells using the attached properties Grid.Row and Grid.Column, and can span multiple cells with Grid.RowSpan and Grid.ColumnSpan, making Grid the workhorse panel for form-like and dashboard layouts.
Cricket analogy: Star sizing behaves like splitting a T20 run chase's remaining overs proportionally between two set batsmen based on their current strike rates, so a batsman on strike rate 150 effectively claims a larger share of the run target than one on 75.
StackPanel and Canvas
StackPanel arranges children in a single line, either vertically or horizontally based on its Orientation property, giving each child its desired size along the stack axis and stretching it to fill the opposite axis unless HorizontalAlignment or VerticalAlignment overrides that. Canvas, by contrast, performs no automatic layout at all: children are positioned using the attached properties Canvas.Left, Canvas.Top, and optionally Canvas.ZIndex for paint order, making it suitable for free-form diagrams, drawing surfaces, or animation targets but a poor choice for resizable UI because content does not reflow.
Cricket analogy: StackPanel's sequential arrangement is like a fixed batting order where each batsman occupies their slot one after another down the same axis, while Canvas is like a rain-delayed exhibition match where fielders are placed at arbitrary fixed spots on the ground with no formation logic.
Handling Resize and Overflow
Because Canvas children never reflow, developers wrapping a Canvas inside a resizable window must handle SizeChanged events manually or accept clipped content, whereas Grid and StackPanel automatically re-measure and re-arrange whenever the parent's available size changes, which is why most production Silverlight layouts favor Grid as the root panel and reserve Canvas for isolated drawing surfaces such as a signature pad or a chart's plotting area.
Cricket analogy: Relying on Canvas for a resizable window is like fixing field positions for a 50-over match and never adjusting them as the required run rate changes late in the innings, while Grid automatically resets the field every over based on the current match situation.
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="App.MainPage" Width="400" Height="300">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.ColumnSpan="3" Text="Order Summary" FontSize="18" />
<StackPanel Grid.Row="1" Grid.Column="0" Orientation="Vertical">
<TextBlock Text="Item" />
<TextBlock Text="Qty" />
</StackPanel>
<Canvas Grid.Row="1" Grid.Column="1" Background="#FFF0F0F0">
<Ellipse Canvas.Left="20" Canvas.Top="15" Width="40" Height="40" Fill="OrangeRed" />
</Canvas>
</Grid>Grid measures Auto and fixed columns first, then divides remaining space among star-sized columns in proportion to their star weight — this two-phase allocation is why star sizing always accounts for content that has already claimed space.
Nesting many StackPanels to fake a grid layout causes extra Measure/Arrange passes and makes resizing behavior unpredictable; prefer a single Grid with explicit RowDefinitions and ColumnDefinitions for anything beyond a simple linear list.
- Silverlight layout runs a two-pass Measure then Arrange cycle for every panel in the visual tree.
- Grid divides space using Auto, fixed pixel, and star (*) sizing, with star columns splitting leftover space by weighted ratio.
- Grid.Row/Grid.Column place children into cells; Grid.RowSpan/Grid.ColumnSpan merge cells.
- StackPanel lays children out sequentially along one axis and stretches them along the other.
- Canvas positions children at explicit Canvas.Left/Canvas.Top coordinates with no automatic reflow on resize.
- Canvas.ZIndex controls paint order for overlapping children within a Canvas.
- Grid is the standard root panel for resizable, form-like UI; Canvas suits fixed-size drawing surfaces.
Practice what you learned
1. In a Silverlight Grid, what does a ColumnDefinition with Width="2*" mean relative to one with Width="*"?
2. Which panel requires children to be positioned with explicit Canvas.Left and Canvas.Top values?
3. What two phases make up Silverlight's layout system for every panel?
4. Which attached property lets one Grid child span multiple columns?
5. Why is Canvas generally a poor choice as the root panel of a resizable Silverlight page?
Was this page helpful?
You May Also Like
Silverlight Controls
An overview of Silverlight's built-in control library, the ContentControl/ItemsControl hierarchy, and event handling for common interactive controls.
Silverlight Styles and Templates
How Style setters standardize appearance across controls, and how ControlTemplate replaces a control's entire visual structure while VisualStateManager drives its states.
Silverlight Resources
How ResourceDictionary scoping, StaticResource lookup, merged dictionaries, and embedded assets let Silverlight applications share and organize reusable objects.
Related Reading
Related Study Notes in Microsoft Technologies
Browse all study notesWindows 10 / UWP Development Study Notes
.NET · 30 topics
Microsoft TechnologiesWindows Batch Scripting Study Notes
Batch · 30 topics
Microsoft TechnologiesMFC (Microsoft Foundation Classes) Study Notes
C++ · 30 topics
Microsoft TechnologiesXAML Study Notes
.NET · 30 topics
Microsoft TechnologiesWPF (Windows Presentation Foundation) Study Notes
.NET · 30 topics
Microsoft TechnologiesMVVM Design Pattern Study Notes
.NET · 30 topics