Windows Phone App Development for Beginners #6 Layout

published on: 2/9/2012 | Views: N/A | Tags: Beginners

by WindowsPhoneGeek

This is the 6th post  from the "Windows Phone Application Development for Beginners" series of articles in which I use a more informal approach in order to explain everything you need to know in order to get started developing Windows Phone applications in a simple and easy to understand way.

• Windows Phone App Development for Beginners #1: Intro
• Windows Phone App Development for Beginners #2 Installing the Tools
• Windows Phone App Development for Beginners #3 Getting Help
• Windows Phone App Development for Beginners #4 First Visual Studio project
• Windows Phone App Development for Beginners #5 Basic XAML
• Windows Phone App Development for Beginners #6 Layout

NOTE: If you are a professional Windows Phone Developer you should probably stop reading now - this series is for absolute beginners.

In short you use different Panels to define the layout of your Windows Phone application. The term layout describes the process of sizing and positioning objects in your app. To position UI elements such as buttons,checkboxes, shapes, text, and other content presented on the screen, you must put them in a Panel (or other container object).

NOTE: I will start using the terms "UI element" or "Object" in order to describe elements such as buttons,checkboxes, shapes, text, and other content presented on the screen.

To allow for complex layouts, Silverlight for Windows Phone currently implements panel elements such as Canvas, StackPanel, and Grid discussed below.

Canvas

Canvas defines an area within which you can explicitly position child objects by specifying x and y coordinates in pixels. The x and y coordinates are often specified by using the Canvas.Left and Canvas.Top that determine the position of the child(inside) element like for example:

<Canvas Width="400" Height="400" Background="Green">
    <TextBlock Text="Text" Canvas.Left="100" Canvas.Top="100"/>
</Canvas>

For reference take a look at the MSDN documentation.

StackPanel

StackPanel arranges child elements into a single line that can be oriented either horizontally or vertically. You can change its orientation via its Orientation property. By default if you do not change anything the orientation is set to vertical:

<StackPanel Background="Red">
    <TextBlock Text="Text1"/>
    <TextBlock Text="Text2"/>
    <Button Content="Button1"/>
    <Button Content="Button2"/>
</StackPanel>

 

 

NOTE: You can also use <StackPanel Background="Red" Orientation="Vertical"> </StackPanel >

You can set the StackPanel to horizontal orientation using Orientation="Horizontal":

<StackPanel Background="Red" Orientation="Horizontal">
    <TextBlock Text="Text1"/>
    <TextBlock Text="Text2"/>
    <Button Content="Button1"/>
    <Button Content="Button2"/>
</StackPanel>

 

 

For reference take a look at the MSDN documentation.

Grid

Grid defines a table layout consisting of columns and rows. By default, a Grid contains one row and one column. To define multiple rows and columns use the ColumnDefinitions and RowDefinitions collections. You can specify the size of the particular rows/columns via RowDefinition and ColumnDefinition objects. You can position objects in specific cells of the Grid by using the Grid.Column and Grid.Row attached properties.

NOTE:

• "*" sizing distributes remaining available space proportionally.
• "Auto" sizing distributes space evenly based on the size of the content that is within a column or row.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Text1" Grid.Row="0" Grid.Column="0"/>
    <TextBlock Text="Text2" Grid.Row="0" Grid.Column="1"/>
    <Button Content="Button1" Grid.Row="0" Grid.Column="2"/>
    <Button Content="Button2" Grid.Row="1" Grid.Column="0"/>
    <TextBlock Text="Text3" Grid.Row="1" Grid.Column="2"/>
    <Button Content="Button3" Grid.Row="2" Grid.Column="1"/>
</Grid>

 

 

You can also use the Visual Studio Toolbox to define your Grid layout as described in the previous post:

For reference take a look at the MSDN documentation.

That's it for now. 

I hope the post was helpful.

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'Windows Phone App Development for Beginners #6 Layout'

Title Your Name

Comment