Quickstart: Adding layout controls (XAML)

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

This quickstart walks you through the steps to add layout controls to a Windows Runtime app using C++, C#, or Visual Basic.

Roadmap: How does this topic relate to others? See:

• Roadmap for Windows Runtime apps using C# or Visual Basic
• Roadmap for Windows Runtime apps using C++

Objective: To learn how to add layout controls to a Windows Runtime app using C++, C#, or Visual Basic.

We assume that you can add controls to a basic Windows Runtime app using C++, C#, or Visual Basic. For instructions on adding a control, see Quickstart: Adding controls and handling events.

You 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.

The panel controls provided in the XAML framework are Canvas, StackPanel, Grid, and VariableSizedWrapGrid. Here's a comparison of the main features of each panel.

Here's an example of how to add a Canvas with child elements in XAML.

<Canvas Width="120" Height="120">
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue" Canvas.Left="20" Canvas.Top="20"/>
    <Rectangle Fill="Green" Canvas.Left="40" Canvas.Top="40"/>
    <Rectangle Fill="Yellow" Canvas.Left="60" Canvas.Top="60"/>
</Canvas>

Here's an example of how to add a StackPanel with child elements in XAML.

<StackPanel>
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue"/>
    <Rectangle Fill="Green"/>
    <Rectangle Fill="Yellow"/>
</StackPanel>

Here's an example of how to add a Grid with child elements in XAML.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="50"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="50"/>
    </Grid.ColumnDefinitions>
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue" Grid.Row="1"/>
    <Rectangle Fill="Green" Grid.Column="1"/>
    <Rectangle Fill="Yellow" Grid.Row="1" Grid.Column="1"/>
</Grid>

Here's an example of how to add a VariableSizeWrapGrid with child elements in XAML.

<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44">
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue" Height="80" 
               VariableSizedWrapGrid.RowSpan="2"/>
    <Rectangle Fill="Green" Width="80" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
    <Rectangle Fill="Yellow" Height="80" Width="80" 
               VariableSizedWrapGrid.RowSpan="2" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
</VariableSizedWrapGrid>

You can create a complex UI layout by embedding panels within other panels.

Here's an example of how to create a layout using multiple panels.

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Grid.Resources>
        <Style TargetType="Rectangle">
            <Setter Property="Height" Value="100"/>
            <Setter Property="Width" Value="100"/>
            <Setter Property="Margin" Value="20"/>
        </Style>
    </Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition Height="120"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    
    <StackPanel Grid.RowSpan="2">
        <Rectangle Fill="Red"/>
        <Rectangle Fill="Blue"/>
        <Rectangle Fill="Green"/>
        <Rectangle Fill="Yellow"/>
    </StackPanel>
    
    <TextBlock Text="Text..." FontSize="72" Grid.Column="1"
               VerticalAlignment="Bottom"/>
    
    <StackPanel Grid.Row="2" Grid.Column="1" 
                Background="DarkGray"
                Height="420" VerticalAlignment="Top">
        <Canvas Width="220" Height="220">
            <Rectangle Fill="Red"/>
            <Rectangle Fill="Blue" Canvas.Left="20" Canvas.Top="20"/>
            <Rectangle Fill="Green" Canvas.Left="40" Canvas.Top="40" 
                       Canvas.ZIndex="4"/>
            <Rectangle Fill="Yellow" Canvas.Left="60" Canvas.Top="60"/>
        </Canvas>
        <StackPanel Orientation="Horizontal">
            <Rectangle Fill="Red"/>
            <Rectangle Fill="Blue"/>
            <Rectangle Fill="Green"/>
            <Rectangle Fill="Yellow"/>
        </StackPanel>
    </StackPanel>
</Grid>

In this tutorial you learned how to use different layout panels to arrange elements in your app UI.

Roadmap for Windows Runtime apps using C# or Visual Basic

Roadmap for Windows Runtime apps using C++