Laying Out a Page

October 21, 2011

Layout is the process of adding panels, position controls, and setting properties to achieve the desired look and behavior of your pages.

You Will Learn

• What default panels are used in a page.
• What XAML is and how it is used to design the UI.
• How to position controls on a page.
• How to create a dynamic layout.
• How to support portrait and landscape orientations.

Applies To

• Silverlight for Windows Phone OS 7.1

  

Default Panels

When you create a new Windows Phone Application project in Visual Studio, you automatically get several panels and elements to lay out your page. Most of your layout decisions will pertain to the content panel. The following illustration shows the default panels and elements for a portrait page.

XAML Introduction

The user interface for a Windows Phone application is built with a declarative markup language called Extensible Application Markup Language (XAML). XAML is an XML format that enables you to separate the UI definition from the run-time logic by using code-behind files joined to the markup through partial class definitions. If you're familiar with Web programming, you can think of XAML as similar to HTML, but more powerful. Like HTML, XAML is made up of elements and attributes.

Visual Studio 2010 Express for Windows Phone and Expression Blend for Windows Phone enable you to drag controls to the design surface, position them, and set properties in a visual way. These tools generate the necessary XAML for you so you don’t need extensive knowledge of XAML to create a Windows Phone application. However, a basic understanding is helpful as you find it necessary to edit the XAML by hand. The XAML editor in Visual Studio offers IntelliSense and statement completion. In addition, the design surface updates as you change the XAML. If you need help for a particular item, position your cursor on that item and press F1 to navigate to a help topic on that item.

In a XAML file, each UI object is a XAML element and properties of that object are set with attributes. XAML implicitly conveys the child/parent relationship of UI layout. The following XAML shows a panel (StackPanel) that contains an image (Image) and some text (TextBlock). In this example, the properties are set with attribute syntax.

<!--Car photo and name.-->
<StackPanel Orientation="Horizontal" Margin="12,130" Height="110"
    VerticalAlignment="Top">
    <Image Height="75" Width="75" Margin="15" Stretch="UniformToFill"
        Source="{Binding Picture}"/>
    <TextBlock Text="{Binding Name}" VerticalAlignment="Center"/>
</StackPanel>

The following illustration shows how this XAML appears when you run the application.

For more information about XAML, see the XAML QuickStart and XAML Overview. For information about binding, see Displaying Data with Data Binding.

Positioning Controls

You can start your layout by simply dragging items from the Visual Studio Toolbox to the design surface. As you change things in Design view, the XAML updates. The following illustration shows some of the visual indicators the Visual Studio designer provides for control positioning such as snap lines, gridlines and margin lines.

When you drag controls and move controls around on the design surface, the designer uses margin settings and specific height and width values to determine the precise position and size of the controls. A margin line from a control to the edge of the application indicates that this margin is fixed and the distance from the control to that edge of the application will remain constant. Which margins are fixed can affect how the control moves or resizes when the application is resized. For more information, see Alignment in the Silverlight Designer and Silverlight Designer for Visual Studio 2010.

The margin editor in the Properties window shows each margin setting and how it affects the placement of the text box. The following illustration shows the margin editor.

You can also position controls precisely by using the Canvas layout control. You position controls within a Canvas by specifying pixel-based x and y coordinates.

Design Guideline:
The Canvas control can provide better layout performance than the Grid control for deeply embedded or nested controls in applications that do not change orientations.

When controls are positioned in a precise location, the layout of your application can break down when text is longer than you expect, visuals are different sizes, and you need to support both portrait and landscape orientations. A dynamic layout is the best way to ensure that your layout works in a variety of situations.

Creating a Dynamic Layout

A dynamic layout is a layout that resizes and adjusts based on its contents and orientation. If you plan to localize your application or support landscape orientation, you should create a dynamic layout.

To create a dynamic layout, you typically start with one of the following panel-derived controls.

• The Grid control enables you to position elements in rows and columns.
• The StackPanel control automatically positions child elements vertically or horizontally.

Design Guideline:
The Grid control is the best choice when the application frame needs to grow, shrink, or rotate.

In addition to selecting the correct layout controls, there are some property settings that you can specify to ensure that the controls adjust dynamically to changes in orientation.

There are two important size settings for a dynamic layout.

• Auto - Used to allow controls to fit their content, even if the content changes size.
• * (Star) - Used to distribute available space among the rows and columns of a Grid by weighted proportions.

For more information about star sizing, see the GridLength structure.

To set StackPanel properties for dynamic behavior

1. Set the Height and Width properties to Auto, which means they fill the width or height of the parent page or panel.

To set Grid properties for dynamic behavior

1. Add rows and columns to the Grid by using the Properties window or the designer.

2. Specify Auto or star (*) sizing for the row and column definitions.

   The following example shows RowDefinitions and ColumnDefinitions of the Grid named ContentPanel in the car details page of Fuel Tracker. The height of the first three rows are set to Auto, and the fourth is set to *. This means the height of the first three rows will size to their content and the last row will take up the remaining space. The width of the first column is set to Auto and the second column will take up the remaining space.

   <Grid.RowDefinitions>
       <RowDefinition Height="Auto"/>
       <RowDefinition Height="Auto"/>
       <RowDefinition Height="Auto"/>
       <RowDefinition Height="*"/>
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="Auto"/>
       <ColumnDefinition Width="*"/>
   </Grid.ColumnDefinitions>
   

3. Position child controls in a specific row and column using the Grid.Row and Grid.Column properties, or by dragging them to the correct location on the design surface.

4. If necessary, set child controls to span multiple rows or columns using the Grid.RowSpan and Grid.ColumnSpan properties.

5. Review any fixed margins for controls and make sure they are necessary.

6. Review the size for all controls and, if necessary, remove the Height and Width properties and set the MinHeight or MinWidth properties.

   Setting the MinHeight and MinWidth properties for text controls prevents the text from scaling down to a size that is unreadable.

   Design Guideline:
   Avoid a font size that is less than 15 points. You should primarily use the Segoe font.

In the Fuel Tracker application, most of the controls are positioned dynamically through the use of Grid and StackPanel controls. The following illustration shows the car details page, which uses a Grid. The rows and columns have been defined with Auto and star sizing. In the illustration on the right, you can see that the size of the text has been increased and the layout automatically adjusts.

For more information about layout, see the Layout QuickStart and Designing a Flexible User Interface.

Supporting Portrait and Landscape Orientations

Portrait is the default orientation for applications. To support landscape, you must add additional code. To specify that your application supports both portrait and landscape, you must set the SupportedOrientations property to PortraitOrLandscape either in XAML or in code. Next, you must make sure that your content displays properly in landscape.

Design Guideline:
If your application supports text input, you should support landscape orientation because of the possibility of a hardware keyboard.

There are different ways to ensure that your content displays properly in either portrait or landscape orientation. Two techniques are scrolling and grid layout. These techniques can be used separately or in combination with each other.

The scrolling technique uses a StackPanel control that is placed within a ScrollViewer control. Use this technique if you are displaying content in a list or if you have different controls appearing one after another on the page. The StackPanel allows you to order the child elements one after another in your application and the ScrollViewer control allows you to scroll through the StackPanel if the UI elements do not fit on the screen.

To support portrait and landscape orientations using the scrolling technique

1. Change the SupportedOrientations property of the page to PortraitOrLandscape.
2. Replace the default Grid in the content panel section with a ScrollViewer and a StackPanel.

The grid layout technique positions UI elements in a Grid. If necessary, when an orientation change occurs, you programmatically reposition elements into different cells of the Grid.

To support portrait and landscape orientations using the grid layout technique

1. Change the SupportedOrientations property of the page to PortraitOrLandscape.
2. Use a Grid for the content panel.
3. If necessary, create an OrientationChanged event handler and add code to reposition elements in the Grid.

The Fuel Tracker application uses the grid layout technique, but also uses ScrollViewer controls to ensure that items in a list can be viewed by the user. The layout is simple enough that it wasn’t necessary to make changes based on the OrientationChanged event. The following illustration shows the orientation behavior for the car details page.

For more information about orientation, see the Screen Orientations QuickStart and How to: Handle Orientation Changes on Windows Phone.

Next Topic | Previous Topic | Home