Windows Phone Development for Beginner - Part 2

Datetime:2016-08-23 03:50:57          Topic: WPhone Development           Share

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

Here's the part-2 of the series, where I willexplain about stackpanel and Grid Elements. Most of the time developers  get confused where to place control inside stackpanel or grid elements.

Let’s start to learn about StackPanel and Grid Elements.

StackPanel Element

StackPanel elements are basically placed on top of Grid or bottom of Grid elements. So, if you think about a simple web application you place the page name inside title tag same as the working of windows phone apps stackpanel.

So if you give the page name or apps name you can use stackpanel, for that simply say stackpanel is used for giving page name or arranged child elements in 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

Grid Element provide more flexiblity to arrange control in multiple rows or columns. In Grid element you can set row and column by using this two RowDefinition and ColumnDefinition properties.You can set your control like Textblock, Textbox, Hyperlinkbutton, Image in cell using row and column definition.

The following XAML shows how to create a grid with four rows and two columns:

  • Height of the first row is set auto that contains the text.
  • The height of the second row is set to 100px.
  • 3rd & 4th row is set for rest of the available height
  • The width of the columns is 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 >   





About List