Before reading this article, I would like you to read the Part 1 of this article series:

Here's the second part of the series, where I will explain the StackPanel and Grid elements. Most of the time developers are confused about where to place controls inside a StackPanel or Grid element.

Let's learn about the StackPanel and Grid elements.

StackPanel Element

StackPanel elements are basically placed on top of a Grid or at the bottom of Grid elements. So, if you think about a simple web application where you place the page name inside title tag same as the working of Windows Phone apps StackPanel.
So if you provide the page name or app's name you can use a StackPanel, for that simply say a StackPanel is used for giving the page name or to arrange child elements in a single line that can be oriented horizontally or vertically.
  1. <!--LayoutRoot is the root grid where all page content is placed-->
  2. <Grid x:Name="LayoutRoot" Background="Transparent">
  3. <Grid.RowDefinitions>
  4. <RowDefinition Height="Auto"/>
  5. <RowDefinition Height="*"/>
  6. </Grid.RowDefinitions>
  7. <!--TitlePanel contains the name of the application and page title-->
  8. <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
  9. <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
  10. <TextBlock x:Name="PageTitle" Text="StackPanel" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
  11. </StackPanel>
  12. <!--ContentPanel - place additional content here-->
  13. <StackPanel Margin="150">
  14. <Rectangle Fill="Red" Width="100" Height="100" Margin="5" />
  15. <Rectangle Fill="Green" Width="100" Height="100" Margin="5" />
  16. <Rectangle Fill="Violet" Width="100" Height="100" Margin="5" />
  17. <Rectangle Fill="Firebrick" Width="100" Height="100" Margin="5" />
  18. <Rectangle Fill="White" Width="100" Height="100" Margin="5" />
  19. </StackPanel>
  20. </Grid>

Grid Element

A Grid Element provides more flexiblity to arrange a control in multiple rows or columns. In a Grid element you can set the row and column using these two RowDefinition and ColumnDefinition properties.You can set your control like Textblock, TextBox, Hyperlinkbutton and Image in a cell using row and column definitions.

The following XAML shows how to create a grid with four rows and two columns:
  • The height of the first row that contains the text is set to auto.
  • The height of the second row is set to 100px.
  • The third and fourth row are set for the rest of the available height
  • The width of the columns are set equally within the available container width using "*".
  1. <Grid x:Name="LayoutRoot" Background="Transparent">
  2. <Grid.RowDefinitions>
  3. <RowDefinition Height="*"/>
  4. <RowDefinition Height="100"/>
  5. <RowDefinition Height="*"/>
  6. <RowDefinition Height="*"></RowDefinition>
  7. </Grid.RowDefinitions>
  8. <Grid.ColumnDefinitions>
  9. <ColumnDefinition Width="*"></ColumnDefinition>
  10. <ColumnDefinition Width="*"></ColumnDefinition>
  11. </Grid.ColumnDefinitions>
  12. <!--TitlePanel contains the name of the application and page title-->
  13. <StackPanel x:Name="TitlePanel" Grid.ColumnSpan="2" Grid.Row="0"
  14. Margin="12,17,0,28">
  15. <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION"
  16. Style="{StaticResource PhoneTextNormalStyle}"/>
  17. <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0"
  18. Style="{StaticResource PhoneTextTitle1Style}"/>
  19. </StackPanel>
  20. <!--ContentPanel - place additional content here-->
  21. <Rectangle Fill="BLUE" Grid.Column="0" Grid.Row="1"></Rectangle>
  22. <Rectangle Fill="RED" Grid.Column="1" Grid.Row="1"></Rectangle>
  23. <Rectangle Fill="pink" Grid.Column="0" Grid.Row="2"></Rectangle>
  24. <Rectangle Fill="Aqua" Grid.Column="1" Grid.Row="2"></Rectangle>
  25. <Rectangle Fill="BlueViolet" Grid.Column="0" Grid.Row="3"></Rectangle>
  26. <Rectangle Fill="DarkMagenta" Grid.Column="1" Grid.Row="3"></Rectangle>
  27. </Grid>