Layout Panel in Windows Phone App Development

Introduction

The Windows Phone App User Interface is defined by the Extensible Application Markup Language (XAML). Using the XAML Language we use the UI element for the design interface. XAML follows the XML rules that are well-formed.

Currently Windows Phone App layout implements Canvas, Stack Panel and Grid.

1. Canvas
2. Stack Panel
3. Grid

Canvas

A Canvas is used for defining an area in which any UI control works as a child object and the child object coordinates a match from the border of the Canvas. Every element has the Property “Canvas.Left” and “Canvas.Top” for declaring the element's position in the Canvas:

<Canvas x:Name="canvaslayout" Width="300px" Height="600px" Background="Red"  >
<Button Canvas.Left="90px" Canvas.Top="250px" Background="Gray" Content="Button"   FontSize="30"></Button>
<TextBlock Canvas.Left="80px" Canvas.Top="200px" Text="TextBox" FontSize="40"></TextBlock>
 </Canvas>

 

Figure 1: TextBox

StackPanel

A StackPanel is basically used for arranging a UI element horizontally and vertically using the orientation property of the StackPanel Tag. By default it arranges UI elements vertically. Stackpanel is mainly used for making a horizontal and vertical list and menu.

<StackPanel Background="Bisque" Height="500px">
        <!-- Horizontal Menu-->
         <StackPanel Background="Bisque" Orientation="Horizontal" Height="199">
        <TextBlock Text="Menu1" FontSize="30" Margin="2 40" Foreground="Black"></TextBlock>
        <TextBlock Text="Menu2" FontSize="30" Margin="2 40" Foreground="Red"></TextBlock>
        <TextBlock Text="Menu3" FontSize="30" Margin="2 40" Foreground="Blue"></TextBlock>
        <TextBlock Text="Menu4" FontSize="30" Margin="2 40" Foreground="Green"></TextBlock>

    </StackPanel>
        <!-- vertical Menu-->
        <TextBlock  Text="Menu1" FontSize="30"  Foreground="DarkBlue" SelectionHighlightColor="#FF531BD4"></TextBlock>
        <TextBlock Text="Menu2" FontSize="30"  Foreground="Brown"></TextBlock>
        <TextBlock Text="Menu3" FontSize="30"  Foreground="Orange"></TextBlock>
        <TextBlock Text="Menu4" FontSize="30"  Foreground="DarkMagenta"></TextBlock>

   </StackPanel>

 

Figure 2:Menu

Grid

A Grid is the most flexible layout in a Windows Phone App and arranges the content in rows and columns. We use many properties of a table in this layout, ike RowSpan and ColumnSpan. A child element of a grid layout is easily set in the layout. We can define a specific row and column for each element using a property.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <Button Grid.Row="0" Grid.Column="0" Content="0-0" HorizontalAlignment="Center" Background="Red"></Button>
    <Button Grid.Row="2" Grid.Column="2" Content="2-2" HorizontalAlignment="Center" Background="Red"></Button>
    <Button Grid.Row="1" Grid.Column="1" Content="1-1" HorizontalAlignment="Center" Background="Red"></Button>
</Grid>