Windows PhoneApplication XML Parsing

we can parse an xml document easily in windows phone applications. for this purpose an example is shown and the code is given below.

make a project with name XMLParsing_Example

1) MainPage.xaml


<phone:PhoneApplicationPage
    x:Class="XMLParsing_Example.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True" VerticalContentAlignment="Center" VerticalAlignment="Top">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->


        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Button x:Name="myButton" Grid.Row="0" Height="75" Content="Click forXML Parsing " VerticalAlignment="Top" />

            <ListBox Name="lstEmployee" Grid.Row="2" FontSize="24">
            </ListBox>
        </Grid>
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

2) MainPage.xaml.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Xml.Linq;
using System.IO;
using System.Diagnostics;
namespace XMLParsing_Example
{
    public class Student
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public DateTime Dob { get; set; }
    }

    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();


            myButton.Click += new RoutedEventHandler(myButton_Click);
        }
        void myButton_Click(object sender, RoutedEventArgs e)
        {

            // pretend this came from a web service
            string xmlData =
            @"<rootdata>
       <Student firstname='Jitesh' lastname='upadhyay' dob='01/01/2010 12:21:00'/>
       <Student firstname='Jeetu' lastname='upadhyay' dob='01/01/2010 12:20:30' />
      </rootdata>
     ";

            XDocument dataDoc = XDocument.Load(new StringReader(xmlData));

            var studentdata = from students in dataDoc.Descendants("Student")
                              let stamp = DateTime.Parse(students.Attribute("dob").Value)
                              orderby stamp ascending
                              select new Student
                              {
                                  FirstName = students.Attribute("firstname").Value,
                                  LastName = students.Attribute("lastname").Value
                              };

            foreach (Student student in studentdata)
            {
                lstEmployee.Items.Add(student.FirstName + "  " + student.LastName + "  " + student.Dob);
            }


        }
    }
}

3) the out put will be desirable after clicking the button "Click forXML Parsing "

Windows Phone JSON Parsing Example Part-2

we can parse a json document in windows  phone applications easily and it is easy to implement and understand.

1) please make a new project with the name JsonParsingExample2 and copy following xaml layout to MainPage.xaml


<phone:PhoneApplicationPage
    x:Class="JsonParsingExample2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True" VerticalContentAlignment="Center" VerticalAlignment="Top">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
   

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Button x:Name="myButton" Grid.Row="0" Height="75" Content="Click to Call JSON service 2 " VerticalAlignment="Top" />
         
            <ListBox Name="lstEmployee" Grid.Row="2" FontSize="24">
            </ListBox>
        </Grid>
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

2) now please copy the following code to yours MainPage.xaml.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Xml.Linq;
using System.Runtime.Serialization.Json;
using System.Collections.ObjectModel;
using Newtonsoft.Json;
using System.IO;
using System.Text;

namespace JsonParsingExample2
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
            myButton.Click += new RoutedEventHandler(myButton_Click);
        }
        void myButton_Click(object sender, RoutedEventArgs e)
        {

            WebClient webClient = new WebClient();
            webClient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(webClient_DownloadStringCompleted);
            webClient.DownloadStringAsync(new Uri("http://api.androidhive.info/contacts/"));


        }
        void webClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
        {
            var rootObject = JsonConvert.DeserializeObject<RootObject>(e.Result);

            foreach (var contactdata in rootObject.contacts)
            {
                lstEmployee.Items.Add("<=>" + contactdata.address + contactdata.email + contactdata.gender + contactdata.id + contactdata.name + contactdata.phone.home + contactdata.phone.mobile + contactdata.phone.office + "<=>");
            }

        }
        public class Phone
        {
            public string mobile { get; set; }
            public string home { get; set; }
            public string office { get; set; }
        }

        public class Contact
        {
            public string id { get; set; }
            public string name { get; set; }
            public string email { get; set; }
            public string address { get; set; }
            public string gender { get; set; }
            public Phone phone { get; set; }
        }

        public class RootObject
        {
            public List<Contact> contacts { get; set; }
        }
    }
}


3) you need to take care of the references. i used Newtonsoft.Json.dll in my example so you need to add it to yours reference.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Xml.Linq;
using System.Runtime.Serialization.Json;
using System.Collections.ObjectModel;
using Newtonsoft.Json;
using System.IO;
using System.Text;  

these above are the used references in this demo example code!!

4) run code successfully on emulator and you can see the out put after clicking the  "Click to Call JSON service 2" button

Note:  You need to get some getters and setters which you can get with the help of

http://json2csharp.com/


put the url there and you will get the supporting classes

i used the link http://api.androidhive.info/contacts/ for the demo example
:)

for Newtonsoft.json.dll you can use the link http://www.4shared.com/file/qXtiES9U/NewtonsoftJson.html or you can search with the other links as well through google!!

Windows Phone JSON Parsing Example Part-1

we can parse a json document in windows  phone applications easily and it is easy to implement and understand.

1) please make a new project with the name JSONParsingExample and copy following xaml layout to MainPage.xaml


<phone:PhoneApplicationPage
    x:Class="JSONParsingExample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

 

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Button x:Name="myButton" Grid.Row="0" Height="75" Content="Click to Call JSON service " VerticalAlignment="Top" />
            <ListBox Name="lstEmployee"  Height="150" Grid.Row="2" FontSize="24" VerticalAlignment="Top"></ListBox>
        </Grid>
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

2) now please copy the following code to yours MainPage.xaml.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Xml.Linq;
using System.Runtime.Serialization.Json;
using System.Collections.ObjectModel;
using Newtonsoft.Json;
using System.IO;
using System.Text;

namespace JSONParsingExample
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
            myButton.Click += new RoutedEventHandler(myButton_Click);
        }
        void myButton_Click(object sender, RoutedEventArgs e)
        {

         
            try
            {
                WebClient webClient = new WebClient();
                Uri uri = new Uri("http://docs.blackberry.com/sampledata.json");
                webClient.OpenReadCompleted += new OpenReadCompletedEventHandler(webClient_OpenReadCompleted);
                webClient.OpenReadAsync(uri);
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message + "error came here 1");
            }
        }
        void webClient_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
        {


            DataContractJsonSerializer ser = null;
            try
            {
                ser = new DataContractJsonSerializer(typeof(ObservableCollection<RootObject>));
                ObservableCollection<RootObject> employees = ser.ReadObject(e.Result) as ObservableCollection<RootObject>;
                foreach (RootObject em in employees)
                {
                    string id = em.vehicleColor + "|" + em.vehicleType + "|" + em.fuel + "|" + em.treadType+"|";
                    //string nm = em.GetRoot.Customer.CustomerID;
                    lstEmployee.Items.Add("<="+id + "=>" );
                    foreach (var error in em.approvedOperators)
                    {
                        lstEmployee.Items.Add("**" + error.experiencePoints+"|"+error.name);
                    }
                }



            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message + "error came here 2" + ex.StackTrace);
            }


        }
        public class ApprovedOperator
        {
            public string name { get; set; }
            public int experiencePoints { get; set; }
        }

        public class RootObject
        {
            public string vehicleType { get; set; }
            public string vehicleColor { get; set; }
            public string fuel { get; set; }
            public List<ApprovedOperator> approvedOperators { get; set; }
            public string treadType { get; set; }
        }
    }
}

3) you need to take care of the references. i used Newtonsoft.Json.dll in my example so you need to add it to yours reference.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Xml.Linq;
using System.Runtime.Serialization.Json;
using System.Collections.ObjectModel;
using Newtonsoft.Json;
using System.IO;
using System.Text;  

these above are the used references in this demo example code!!

4) run code successfully on emulator and you can see the out put after clicking the  "Click to Call JSON service" button

You need to get some getters and setters which you can get with the help of

http://json2csharp.com/


put the url there and you will get the supporting classes

i used the link http://docs.blackberry.com/sampledata.json for the demo example
:)

for Newtonsoft.json.dll you can use the link http://www.4shared.com/file/qXtiES9U/NewtonsoftJson.html or you can search with the other links as well through google!!

Windows phone PanoramaContrpl example

In windows phone applications there is a very nice and easy to use control which is Panorama control. easy to understand and quite simple to implement and to use. for this purpose just copy the code and given images an see the beautiful look and feel of panorama control :)

1) firstly make a project with name PanoramaControl and in this project copy the below given xaml layout to MainPage.xaml


<phone:PhoneApplicationPage 
    x:Class="Day16_PanoramaControl.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True" xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls">

    <!--LayoutRoot is the root grid where all page content is placed-->
<controls:Panorama Title="Panorma Control Example">
<controls:Panorama.Background>
<ImageBrush ImageSource="PanoramaBackground.png" Opacity=".5" />
</controls:Panorama.Background>
<controls:PanoramaItem Header="First Control">
<ListBox Margin="0,0,-12,0">
<StackPanel Margin="0,0,0,17" Width="432">
<TextBlock Text="A text" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="some text block" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
<StackPanel Margin="0,0,0,17" Width="432">
<TextBlock Text="Data" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                    <TextBlock Text="some text block" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
<StackPanel Margin="0,0,0,17" Width="432">
<TextBlock Text="Some useful data text" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                    <TextBlock Text="some text block" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
<StackPanel Margin="0,0,0,17" Width="432">
<TextBlock Text="Use it" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                    <TextBlock Text="some text block" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
<StackPanel Margin="0,0,0,17" Width="432">
<TextBlock Text="Windows phone" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                    <TextBlock Text="some text block" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
<StackPanel Margin="0,0,0,17" Width="432">
<TextBlock Text="Great" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                    <TextBlock Text="tsome text block" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
<StackPanel Margin="0,0,0,17" Width="432">
<TextBlock Text="it looks good" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                    <TextBlock Text="some text block" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
<StackPanel Margin="0,0,0,17" Width="432">
<TextBlock Text="Nokia lumis" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                    <TextBlock Text="some text block" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</ListBox>
</controls:PanoramaItem>

<controls:PanoramaItem Header="Second Control">
<ListBox Margin="0,0,-12,0">
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<Image Height="100" Width="100" Source="icons/d.png" Margin="12,0,9,0"/>
<StackPanel Width="311">
<TextBlock Text="Nokia lumia"  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                        <TextBlock Text="tNokia lumia 510" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<Image Height="100" Width="100" Source="icons/a.png" Margin="12,0,9,0"/>
<StackPanel Width="311">
                        <TextBlock Text="Nokia lumia"  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                        <TextBlock Text="Nokia lumia 610" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<Image Height="100" Width="100" Source="icons/b.png" Margin="12,0,9,0"/>
<StackPanel Width="311">
                        <TextBlock Text="Nokia lumia"  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                        <TextBlock Text="Nokia lumia 620" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<Image Height="100" Width="100" Source="icons/c.png" Margin="12,0,9,0"/>
<StackPanel Width="311">
                        <TextBlock Text="Nokia lumia"  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                        <TextBlock Text="Nokia lumia 800" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<Image Height="100" Width="100" Source="icons/e.png" Margin="12,0,9,0"/>
<StackPanel Width="311">
                        <TextBlock Text="Nokia lumia"  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                        <TextBlock Text="Nokia lumia 920" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</StackPanel>
</ListBox>
</controls:PanoramaItem>
        <controls:PanoramaItem Header="Nokia lumia">

</controls:PanoramaItem>
</controls:Panorama>

<!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

2) just make folder with name icon and copy the given below images to it

3) copy the given below image to your project to use as a background of panorama control

4) Deploy and Run  you can see the desired output on your emulator as follows

Windows Phone Dynamic Navigation between Screens on button clicks

The Navigation between the Screen can be dynamic and we can pass the data/message between differet screen. in this example there are three screens and MainPage.xaml,Page2.xaml,Page3.xaml and corresponding MainPage.xaml.cs,Page2.xaml.cs,Page3.xaml.cs respectively associated with them. You can just copy all the code given below to corresponding files and you can achieve the navigation and message passing between different screens. 

it is very obvious that windows phone is using Stack to place screens one by one on clicking back button at the bottom you can anlyze the behaviour of the program.

1)MainPage.xaml

<phone:PhoneApplicationPage
    x:Class="SendingMessages.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignWidth="480"
    d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"
    Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid
        x:Name="LayoutRoot"
        Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition
                Height="Auto" />
            <RowDefinition
                Height="*" />
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel
            x:Name="TitlePanel"
            Grid.Row="0"
            Margin="12,17,0,28">
            <TextBlock
                x:Name="ApplicationTitle"
                Text="Back Stack"
                Style="{StaticResource PhoneTextNormalStyle}" />
            <TextBlock
                x:Name="PageTitle"
                Text="Page 1"
                Margin="9,-7,0,0"
                Style="{StaticResource PhoneTextTitle1Style}" />
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid
            x:Name="ContentPanel"
            Grid.Row="1"
            Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition
                    Height="1*" />
                <RowDefinition
                    Height="1*" />
                <RowDefinition
                    Height="4*" />
            </Grid.RowDefinitions>
            <StackPanel
                Grid.Row="0"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                Orientation="Horizontal">
                <Button
                    Name="RetrieveData"
                    Content="Retrieve Data"
                    Width="225"
                    Margin="5" />
                <Button
                    Name="Page3"
                    Content="Page 3"
                    Width="225"
                    Margin="5" />
            </StackPanel>
            <TextBlock
                Text=""
                Name="DisplayText"
                Grid.Row ="1" />



        </Grid>
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>



2)MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace SendingMessages
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
            RetrieveData.Click += ( RetrieveData_Click );
            Page3.Click += ( o, e ) => { NavigationService.Navigate( new Uri( "/Page3.xaml", UriKind.Relative ) ); };

        }

        void RetrieveData_Click( object sender, RoutedEventArgs e )
        {
            NavigationService.Navigate( new Uri( "/Page2.xaml", UriKind.Relative ) );
        }

        protected override void OnNavigatedTo(
            System.Windows.Navigation.NavigationEventArgs e )
        {
            string newText = string.Empty;
            if (NavigationContext.QueryString.TryGetValue(
                "DataEntered",
                out newText ))
            {
                DisplayText.Text = newText;
                NavigationService.RemoveBackEntry();
            }
            base.OnNavigatedTo( e );
        }

    }
}

3) Page2.xaml

<phone:PhoneApplicationPage
    x:Class="SendingMessages.Page2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"
    Orientation="Portrait"
    mc:Ignorable="d"
    d:DesignHeight="768"
    d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid
        x:Name="LayoutRoot"
        Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition
                Height="Auto" />
            <RowDefinition
                Height="*" />
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel
            x:Name="TitlePanel"
            Grid.Row="0"
            Margin="12,17,0,28">
            <TextBlock
                x:Name="ApplicationTitle"
                Text="Back Stack"
                Style="{StaticResource PhoneTextNormalStyle}" />
            <TextBlock
                x:Name="PageTitle"
                Text="Get Data"
                Margin="9,-7,0,0"
                Style="{StaticResource PhoneTextTitle1Style}" />
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid
            x:Name="ContentPanel"
            Grid.Row="1"
            Margin="12,0,12,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition
                    Width="124*" />
                <ColumnDefinition
                    Width="332*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition
                    Height="1*" />
                <RowDefinition
                    Height="1*" />
                <RowDefinition
                    Height="4*" />
            </Grid.RowDefinitions>
            <TextBlock
                Height="30"
                HorizontalAlignment="Left"
                Text="Enter Data"
                VerticalAlignment="Bottom" />
            <TextBox
                Name="DataEntered"
                HorizontalAlignment="Left"
                VerticalAlignment="Bottom"
                Width="300"
                Grid.Column="1" />
            <StackPanel
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                Grid.Row="1"
                Grid.Column="1"
                Orientation="Horizontal">
                <Button
                    Name="OK"
                    Content="OK"
                    Width="150"
                    Margin="5" />
                <Button
                    Name="Cancel"
                    Content="Cancel"
                    Width="150"
                    Margin="5" />
            </StackPanel>
        </Grid>
     
     
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>



4)Page2.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace SendingMessages
{
    public partial class Page2 : PhoneApplicationPage
    {
        public Page2()
        {
            InitializeComponent();
            OK.Click += ButtonClick;
            Cancel.Click += ButtonClick;
        }

        void ButtonClick( object sender, RoutedEventArgs e )
        {
            Button btn = sender as Button;
            string msg = string.Empty;
            if (btn.Name == "OK")
            {
                msg = DataEntered.Text;
            }
            NavigationService.Navigate(
                new Uri( "/MainPage.xaml?DataEntered=" + msg,
                    UriKind.Relative ) );
        }
    }
}

5) Page3.xaml

<phone:PhoneApplicationPage
    x:Class="SendingMessages.Page3"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"
    Orientation="Portrait"
    mc:Ignorable="d"
    d:DesignHeight="768"
    d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid
        x:Name="LayoutRoot"
        Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition
                Height="Auto" />
            <RowDefinition
                Height="*" />
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel
            x:Name="TitlePanel"
            Grid.Row="0"
            Margin="12,17,0,28">
            <TextBlock
                x:Name="ApplicationTitle"
                Text="Back Stack"
                Style="{StaticResource PhoneTextNormalStyle}" />
            <TextBlock
                x:Name="PageTitle"
                Text="New Page"
                Margin="9,-7,0,0"
                Style="{StaticResource PhoneTextTitle1Style}" />
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid
            x:Name="ContentPanel"
            Grid.Row="1"
            Margin="12,0,12,0">
            <Button
                Content="Page 1"
                Height="72"
                HorizontalAlignment="Left"
                Margin="166,39,0,0"
                Name="Page1"
                VerticalAlignment="Top"
                Width="160" />
        </Grid>
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

6) Page2.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace SendingMessages
{
    public partial class Page3 : PhoneApplicationPage
    {
        public Page3()
        {
            InitializeComponent();
            Page1.Click += ( o, e ) => { NavigationService.Navigate( new Uri( "/mainpage.xaml", UriKind.Relative ) ); };

        }
    }
}

Have a great day with Windows Phone Application development  :)

Windows Phone Navigation between Screens and sending data to next screen

It is always interesting to go for navigation between screens and Windows phone applications havea great flexibility regarding this. we can achieve navigation in just fem steps for this purpose :

1)  creat an application with name  HelloWorldAdvanced and edit the MainPage.xaml and copy the lines given below to it


<phone:PhoneApplicationPage 
    x:Class="HelloWorldAdvanced.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="Navigation Demo" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="First Page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <TextBlock Height="30" HorizontalAlignment="Left" Margin="42,37,0,0" Name="label_name" Text="Name" VerticalAlignment="Top" />
            <TextBlock Height="30" HorizontalAlignment="Left" Margin="42,132,0,0" Name="label_lastname" Text="Last Name" VerticalAlignment="Top" />
            <TextBox Height="72" HorizontalAlignment="Left" Margin="29,59,0,0" Name="txt_name" Text="" VerticalAlignment="Top" Width="460" />
            <TextBox Height="72" HorizontalAlignment="Left" Margin="29,154,0,0" Name="txt_lastname" Text="" VerticalAlignment="Top" Width="460" />
            <Button Content="Send" Height="72" HorizontalAlignment="Left" Margin="230,282,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" />
        </Grid>
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

2) Now in step two  just make sure that you have made a new page in application with name

SecondPage.xaml and copy the given below code to it


<phone:PhoneApplicationPage 
    x:Class="HelloWorldAdvanced.SecondPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="Navigated from screen one" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Second Page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Button Content="Back" Height="72" HorizontalAlignment="Left" Margin="249,280,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" />
            <TextBlock Height="171" HorizontalAlignment="Left" Margin="50,47,0,0" Name="txt_fullname" Text="FullName" VerticalAlignment="Top" Width="340" />
        </Grid>
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

3) in step three go to  MainPage.xaml.cs and copy the code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

namespace HelloWorldAdvanced

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

        }

        private void button1_Click(object sender, RoutedEventArgs e)

        {

            NavigationService.Navigate(new Uri("/SecondPage.xaml?name="+ txt_name.Text 

                +"&lastname="+txt_lastname.Text,UriKind.RelativeOrAbsolute));

        }

    }

}

4) finally in this step you are ready to fly after copying the given below lines to  SecondPage.xaml.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

namespace HelloWorldAdvanced

{

    public partial class SecondPage : PhoneApplicationPage

    {

        public SecondPage()

        {

            InitializeComponent();

        }

        private void button1_Click(object sender, RoutedEventArgs e)

        {

            NavigationService.GoBack();

        }

        protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)

        {

            base.OnNavigatedTo(e);

            string name = "";

            string lastname = "";

            NavigationContext.QueryString.TryGetValue("name",out name);

            NavigationContext.QueryString.TryGetValue("lastname", out lastname);

            txt_fullname.Text = string.Format("Name: {0}\nLast Name: {1}",name,lastname);

        }

    }

}

5)Now run the program and you will get result:  fill the firstname and secondname fields and click the send button. to go back from second screen click back button :)