Windows Phone - Layout’s Demonstration in Silverlight

Introduction

We are in App Development; either it is Android, Windows Phone or Apple iPhone. In every platform, we have a layout definition. Since are planning to develop for various sized screens, in a broader way, it's not about screen dimensions but it's about the great User Interface, what a sole job of an App Developer. But, the design of the layout is as necessary as the coding itself is. What good would great code be if you have the worst User Interface for your app.

In this particular article, we are targeting Windows Phone Development.


                                      
Figure:  A small ListBox demonstration using various layouts in WP
 
Background

In Silverlight, we have 5 Layouts:

• Canvas
• Grid
• StackaPanel
• WrapPanel
• DockPanel

In this article, we will explain about Grid, StackPanel and WrapPanel only.

Since these are the most used layout in Windows Phone Development.
 
Brief Demonstration on layout

Stack Panel

As the name suggests, it arranges the objects in a Stack. And stacks are either arranged vertically or horizontally.
 
XAML Code of StckPanel

<StackPanel Name="__" Orientation="____" Height="__" Width="__" Margin="__" >
 
 Attributes

Name: It will be any unique name for the StackPanel, since it's recognized in the code.
Orientation: Either Vertical or Horizontal. In Horizontal Orientation, stacks are  horizontal aligned and in Vertical stacks, they are in vertical aligned.
Height: Defines the height of StackPanel using a numeric value.
Width: Defines the width of the StackPanel in numeric value.
Margin: Margin decides the spacing around its surrounding.

If Margin="20" then the controls inside the stack will leave 20 units from every corner (left, top, right and bottom).

If Margin="10,20,30,50" then that tells, you are giving various units for every corner.

Margin="<LEFT>,<TOP>,<RIGHT>,<BOTTOM>"  in other wiords, in a clock-wise direction.

Example

<StackPanel Height="429" Orientation="Vertical" Margin="10,6,0,0" Name="stackPanel1" Width="429">

  <Button Content="Button 1" Width="100" Height="100"/>

   <Button Content="Button 2" Width="100" Height="100"/>

  <Button Content="Button 3" Width="100" Height="100"/>

  <Button Content="Button 4" Width="100" Height="100"/>               

</StackPanel>  


                     

In horizontal orientation:

 

<StackPanel Height="429" Orientation="Horizontal" Margin="10,6,0,0" Name="stackPanel1" Width="429">

 

  <Button Content="Button 1" Width="100" Height="100"/>

  <Button Content="Button 2" Width="100" Height="100"/>

  <Button Content="Button 3" Width="100" Height="100"/>

  <Button Content="Button 4" Width="100" Height="100"/>

</StackPanel>

Grid

It is analogous to a table view in HTML. Here, we deal with rows and collumns.
So, drag a Grid control onto the MainPage and define your Grid.

It's just like defining like your table using <tr> and <td> in HTML.

There I have defined three rows and three columns, where the height of the first and last row has 100pixels and the second one has the rest of the amount (* denotes the rest of the available space). I have done the same for the column definition.

Note: If I have defined it in such a way as:

<RowDefination Height="*"/>

<RowDefination Height="*"/>

<RowDefination Height="*"/>

You then have three rows with equal space (1/3 of the available space), since you defined * for all then it will acquire equal space.

The following is the next case.

If you have two rows in such a way as:

<RowDefination Height=2*/>
<RowDefination Height="*"/>

Then we have two rows with the first one having twice the space than the second one. Since it has 2* (that means "2 times than *"), in other words it will cover 2/3 of the space and the second Grid Element will cover 1/3 of the part.
 
Now it's time to implement the Grid.

So, let's have three Buttons on various locations of the Grid.

This is similar to:



So, at (0,0) position we have our first Button,
At (0,2) position we have our Second one,
At (2,0) position we have our third button,
At (2,2) position we have our last Button.

Conclusion of Grid

1. First, have a Grid Control.
2. Second, define the Grid using RowDefination and ColumnDefination. And assure your definition that, the height attribute is in Row, Width in Column.
3. Last, assign your controls to their position using Grid.Row and Grid.Column.

WrapPanel

It is just a StackPanel with a little specification. Those are, WrapPanel is the default Horizontal and AutoWraped, whereas your Stackpanel is no mood to wrap your Control.
Let's have a WrapPanel as in the following:



Note:  WrapPanel is in the Silverlight Toolkit, so you need to install the Toolkit first before using it. (You may get this from http://silverlight.codeplex.com.)

<toolkit:WrapPanel Height="194" HorizontalAlignment="Left" Margin="56,407,0,0" Name="wrapPanel1" VerticalAlignment="Top" Width="369">

  <Button Content="One" Width="100" Height="100"/>

   <Button Content="One" Width="100" Height="100"/>

  <Button Content="One" Width="100" Height="100"/>

  <Button Content="One" Width="100" Height="100"/>

</toolkit:WrapPanel>
 
Whereas, your StackPanel is:


 

<StackPanel Height="100" Orientation="Horizontal" HorizontalAlignment="Left" Margin="56,301,0,0" Name="stackPanel2" VerticalAlignment="Top" Width="369">

    <Button Content="One" Width="100" Height="100"/>

   <Button Content="One" Width="100" Height="100"/>

   <Button Content="One" Width="100" Height="100"/>

  <Button Content="One" Width="100" Height="100"/>

</StackPanel>
 
Now you have the difference between the WrapPanel and StackPanel.

They are a little different from one another, where WrapPanel does the job of StackPanel but StackPanel can't do the same job.
 
Let's have the real-life implementation of the StackPanel and Wrap Panel.

So, design a smooth List Box with Stack Panel (or WrapPanel instead).
 
This is the code for the Single ListBox Item:
 
<StackPanel Orientation="Horizontal">

  <Image Source="Images/Android.png" Stretch="UniformToFill" Width="100" Height="100" HorizontalAlignment="Left" />                       

 <StackPanel Orientation="Vertical" Width="300">

   <TextBlock Text="Android" FontSize="30" FontWeight="Bold" Margin="10" />

   <TextBlock Text="Most Popular SmartPhone OS since 2009"  Foreground="Gray" TextWrapping="Wrap" Width="282" />

  </StackPanel>

</StackPanel>


                                       
Now, add more in a ListBox to show a group of ListBoxItems in a seprate StackPanel.
 
<ListBox>
<StackPanel>
……
[ Put the given Code here and change the TEXT & Image Property  ]
</StackPanel>
</ListBox>

Note: You may use WrapPanel instead of Horizontal-Stack Panel.


                                 
Ultimately, we will get this list of items with which seems smart.
 
Conclusion

With various layout patterns, you can create a great User Interface. In the case of list design, it is necessary to get your hands dirty with it. So, keep trying with StackPanel , Grid and WrapPanel.