Introduction
Today we explain how to add layout controls or layout panels in Windows Store apps. We use layout panels to arrange a group of UI elements in your app. The main thing to consider when choosing a layout panel is how the panel positions and sizes its child elements. You might also need to consider how overlapping child elements are layered on top of each other.
In Windows Store apps there are four types of layout panels available for arranging UI elements in your app.
Canvas
The Canvas layout controls the positioning and resizing of the child elements. The elements are positioned using the "Canvas.Top" and "Canvas.Left" properties. The panel does not affect the sizing of the child elements.
<Canvas Width="200" Height="200">
<Rectangle Fill="Red" Height="100" Width="100"/>
<Rectangle Fill="Blue" Canvas.Left="20" Canvas.Top="20" Height="100" Width="100"/>
<Rectangle Fill="Green" Canvas.Left="40" Canvas.Top="40" Height="100" Width="100"/>
<Rectangle Fill="Yellow" Canvas.Left="60" Canvas.Top="60" Height="100" Width="100"/>
</Canvas>
StackPanel
The StackPanel layout adds child elements, either vertically or horizontally.
<StackPanel>
<Rectangle Fill="Red" Height="100" Width="100"/>
<Rectangle Fill="Blue" Height="100" Width="100"/>
<Rectangle Fill="Green" Height="100" Width="100"/>
<Rectangle Fill="Yellow" Height="100" Width="100"/>
</StackPanel>
Grid
The Grid Layout arranges UI Elements in rows and columns. Elements are positioned using the "Grid.Row" and "Grid.Column" properties. Using the "Grid.RowSpan" and "Grid.ColumnSpan" properties, elements can span multiple rows and columns.
<Grid>
Join the conversation! Your thoughts help the community grow.