Compartir a través de

Quickstart: Adding layout controls (XAML)

  • Artículo

[ 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:

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

Prerequisites

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.

Instructions

1. Choose a layout panel

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.

Panel Control Description
Canvas

  • You control all aspects of positioning and sizing child elements.
  • Elements are positioned absolutely using Canvas.Top and Canvas.Left attached properties.
  • Layering can be explicitly specified using the Canvas.ZIndex attached property.
  • The panel does not affect the sizing of child elements.
  • Child content can overflow the bounds of the panel and is not visually clipped if larger than the panel.
StackPanel

  • Elements are stacked in a single line either vertically or horizontally.
  • If a child's size is not set explicitly, it stretches to fill the available width (or height if the Orientation is Horizontal).
  • Child content can overflow the bounds of the panel, but is visually clipped if larger than the panel.
Grid

  • Elements are arranged in rows and columns.
  • Elements are positioned using Grid.Row and Grid.Column attached properties.
  • Elements can span multiple rows and columns using Grid.RowSpan and Grid.ColumnSpan attached properties.
  • If a child's size is not set explicitly, it stretches to fill the available space in the grid cell.
  • Child content doesn't overflow the bounds of the panel and is visually clipped if larger than the panel.
VariableSizedWrapGrid

 

2. Add a Canvas

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>

3. Add a StackPanel

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>

4. Add a Grid

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>

5. Add a VariableSizedWrapGrid

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>

6. Create a complex layout by embedding panels

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>

Summary

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++