Page Stack in Windows Phone

In your application there may be many pages and you will come across requirement to navigate between pages. Windows Phone navigation model allows you to navigate between pages. Windows Phone navigation model is same as web based page navigation model. Even though name suggests in Windows Phone, pages are not windows. In your application, you can navigate between many pages and Windows Phone operating system stores those pages on stack. At any given time you have navigation history stored in the page stack. Windows phone operating system pushes all the pages on the stack and popped out pages with back key. When only one page left on page stack on clicking of hardware back button application gets terminated.

Page stack can be understand with below diagram,

You navigated from Page 1 to Page2 then page stack will be as below,

clip_image001

You navigated from Page2 to Page3. Now Page 3 has been pushed to Page Stack.

clip_image002

On Page 3 you pressed hardware back button so Page 3 has been popped out from the Page Stack.

clip_image003

Now on Page 2 you pressed hardware back button so Page 2 has been popped out from the Page Stack.

clip_image004

In last you have navigated back to start page of the application. And only one page is left on the Page Stack. Now if you press hardware back button you will come out of the application.

You can iterate the Page Stack by calling BackStack property of NavigationService class.

clip_image005

BackStack property is having only getter and not setter. So you can read all the pages from the stack but cannot manipulate that.

clip_image006

You can read Uri of all the pages in PageStack as below,

clip_image007

In this way you can work with Page Stack in Windows Phone. I hope this post is useful. Thanks for reading.

 

Capture Picture from Camera and Save in Media Library in Windows Phone

In this post we will see the way to capture a photo using camera and saving that in Media Library.

CameraCaptureTask chooser is used to capture photo using Windows Phone Camera. To work with CameraCaptureTask , first you need add namespace

image

Then define a global variable,

image

In constructor of the page, you need to instantiate CameraCaptureTask and attach completed event handler.

image

Next you need to show camera to user. You can call Show function anywhere as per your business requirement however I am calling it on click event of a button as below,

image

 

Now in the completed event of the CameraCaptureTask we need to save the image in Media Library. To work with Medialibrary, you need to add reference of Microsoft.Xna.Framework. After adding the reference add below namespace,

image

In completed event of CameraCaptureTask, make instance of MediaLibrary and call SavePicture method as below,

image

As you see SavePicture function takes two input parameters. It takes Name of picture as one input parameter and picture stream as another. In this example we are saving picture taken from camera. You may also save picture downloaded from services as stream.

For your reference full source code is given as below,



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 Microsoft.Phone.Tasks;
using Microsoft.Xna.Framework.Media;

namespace PhoneApp17
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
CameraCaptureTask cameraTask;
public MainPage()
{
InitializeComponent();
cameraTask = new CameraCaptureTask();
cameraTask.Completed += new EventHandler<PhotoResult>(cameraTask_Completed);

}

void cameraTask_Completed(object sender, PhotoResult e)
{
if (e.TaskResult == TaskResult.OK)
{
MediaLibrary medialibrary = new MediaLibrary();
medialibrary.SavePicture("givenameofimage", e.ChosenPhoto);

}
}

private void btnShowCamera_Click(object sender, RoutedEventArgs e)
{
cameraTask.Show();
}
}
}


In this way you can save picture to Media Library. I hope this post is useful. Thanks for reading.

 

Accessing Pictures from Media Library in Windows Phone

You may come across a requirement to access the entire picture saved in Media Library of Windows Phone. Media Library can be access using MediaLibrary class.

To work with MediaLibrary class you need to add reference of Microsoft.Xna.Framework. This class is defined in namespace Microsoft.Xna.Framework.Media namespace.

To work with MediaLibrary, you need to make instance of MediaLibrary class as below,

image

Pictures property of MediaLibrary class returns all the images as Picture. You can iterate to all images as below,

image

Image can be fetch as stream inside foreach look as below,

image

You can create Image from returend stream as below.

image

Eventually you can set imageToShow as source of Image control. For your reference below code will add all the pictures from Media Library in a listbox called lstImageFromMediaLibrary


MediaLibrary m = new MediaLibrary();

foreach (var r in m.Pictures)
{
Stream imageStream = r.GetImage();

var imageToShow = new Image()
{
Source = PictureDecoder.DecodeJpeg(r.GetImage())
};

lstImageFromMediaLibrary.Items.Add(imageToShow);
}
}


You can access Media Library on emulator only in debugmode. In this way you can access all the images from Media library. I hope this post is useful. Thanks for reading.

 

How to launch Call Task from Secondary Tile in Windows Phone 7

Recently I got a mail from one of the reader. She asked; How could be launch Call Task from Secondary Tile? In this post I am going to show the way to do that. Before you go ahead with this post, I strongly recommend reading below three posts for more on Live Tiles and Call Task.

Video on How to work with Live Tiles in Windows Phone 7

Live Tiles in Windows Phone 7.5 or Mango phone

Code to make call in Windows Phone 7

Delete Secondary Tiles in Windows Phone 7.5 or Mango Phone

Idea of launching Call Task from Secondary Tiles is very simple.

  1. On clicking of Secondary Tile user will get navigated to a blank page. Let us call that page as Page1.XAML
  2. On NavigatedTo method of the Page1.Xaml, we will instantiate Call Task and show call panel to user.

Let us create Secondary Tile on MainPage.Xaml. I have put a button on MainPage and on click event of the button Secondary Tile will get created.


private void btnCreateSecondaryTiles_Click(object sender, RoutedEventArgs e)
{

var newTile = new StandardTileData()
{
Title = "Blogs Update",
BackgroundImage = new Uri("background.png", UriKind.Relative),
Count = 42,
};
var uri = "/Page1.xaml?state=Live Tile";
ShellTile.Create(new Uri(uri, UriKind.Relative), newTile);



}

If you notice in above code, I have set navigation to Page1.Xaml. Now on onNavigatedTo() method we need to write code to launch Call Task.


protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
//base.OnNavigatedTo(e);
PhoneCallTask callTask = new PhoneCallTask();
callTask.PhoneNumber = "999999";
callTask.DisplayName = "debugMode";
callTask.Show();


}


 

On running you should be getting below output

image

I hope this post was useful. Thanks for reading.

How to consume WCF REST Service with JSON in Windows Phone 7

In this post I will show you the way to consume JSON WCF REST Service in Windows Phone 7. This post is divided into four parts.

  1. Creating simple WCF REST Service for ADD
  2. Consuming JSON REST Service in Windows Phone 7 application.
  3. Creating complex WCF REST Service with custom classes and types.
  4. Consuming complex JSON REST Service in Windows Phone 7 application.

Creating simple Add Service

To start with let us create a WCF REST Service returning JSON as below. There is one operation contact named Add in the service and that is taking two strings as input parameters and returning integer.


[ServiceContract]
public interface IService2
{

[OperationContract]
[WebGet(UriTemplate="/Add/{Number1}/{Number2}",RequestFormat=WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json
)]
int Add(string  Number1, string Number2);

}

Service is implemented as below,


using System;

namespace MultipleBindingWCF
{

public class Service1 : IService2
{

public int Add(string Number1, string Number2)
{
int num1 = Convert.ToInt32(Number1);
int num2 = Convert.ToInt32(Number2);
return num1 + num2;
}

}
}

Next in this section we need to configure service. We need to configure service webHttpBinding to eanble it as REST Service. So in Web.Config we need to do the below changes.


<?xml version="1.0"?>
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.0" />
</system.web>
<system.serviceModel>
<behaviors>
<serviceBehaviors>
<behavior name ="servicebehavior">
<serviceMetadata httpGetEnabled="true"/>
<serviceDebug includeExceptionDetailInFaults="false"/>
</behavior>
</serviceBehaviors>
<endpointBehaviors>
<behavior name="restbehavior">
<webHttp/>
</behavior>
</endpointBehaviors>
</behaviors>
<services>
<endpoint name ="RESTEndPoint"
contract ="MultipleBindingWCF.IService2"
binding ="webHttpBinding"
address ="rest"
behaviorConfiguration ="restbehavior"/>
</service>
</services>
</system.serviceModel>
<system.webServer>
<modules runAllManagedModulesForAllRequests="true"/>
</system.webServer>
</configuration>

After configuring, Service ready for hosting. You are free to host it either on Azure, IIS, or Cassini. For local ASP.Net Server hosting press F5. Do a testing of service in browser and if you are getting expected output, you are good to consume it in the Windows Phone 7 application.

Consuming Service in Windows Phone 7

To consume REST Service in Windows Phone 7 and then parse JSON, you need to add below references in Windows Phone 7 project.

 

 

 

As the design of the page I have put two textbox and one button. User will input numbers to be added in the textbox and on click event of button result would get displayed in message box. Essentially on click event of the button we will make a call to the service. Design of the page is as below,


<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="calling JSON REST" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="JSON REST" 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">
<TextBox x:Name="txtNumber1" Height="100" Margin="-6,158,6,349" />
<TextBox x:Name="txtNumber2" Height="100" Margin="-6,28,6,479" />
<Button x:Name="btnAdd" Height="100" Content="Add" Click="btnAdd_Click"/>
</Grid>
</Grid>

On click event of the button we need to make a call to the service as below,

clip_image002

And ServiceURi is constructed as below,

clip_image004

There is nothing much fancy about above service call. We are just downloading JSON as string using WebClient. However parsing of JSON is main focus of this post. To parse we need to write below code in completed event.

clip_image006

In above code

  • Converting downloaded string as Stream
  • Creating instance of DataContractJsonSerializer. In that we are passing type as string since returned type of service is string.
  • Reading stream into instance of DataContractJsonSerializer
  • Displaying the result.

Putting all code together you should have below code to make a call and parse JSON in windows phone 7


using System;
using System.Net;
using System.Windows;
using Microsoft.Phone.Controls;
using System.Runtime.Serialization.Json;
using System.IO;
using System.Text;

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

private void btnAdd_Click(object sender, RoutedEventArgs e)
{

string Number1 = txtNumber1.Text;
string Number2 = txtNumber2.Text;
string ServiceUri = "http://localhost:30576/Service1.svc/Rest/add/"
+ Number1 + "/"
+ Number2;
WebClient proxy = new WebClient();
proxy.DownloadStringCompleted +=
new DownloadStringCompletedEventHandler(proxy_DownloadStringCompleted);
proxy.DownloadStringAsync(new Uri(ServiceUri));

}

void proxy_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
Stream stream = new MemoryStream(Encoding.Unicode.GetBytes(e.Result));
DataContractJsonSerializer obj = new DataContractJsonSerializer(typeof(string));
string result = obj.ReadObject(stream).ToString();
MessageBox.Show(result);
}
}
}

Creating complex Service with custom classes and types

Go back to service and add a custom class as below,

[DataContract]
public class Student
{
[DataMember]
public string Name { get; set; }
[DataMember]
public string RollNumber { get; set; }
[DataMember]
public string Grade { get; set; }
}

And add one more function to service. This operation contract will return List of Students.


[OperationContract]
[WebGet(UriTemplate = "/GetStudents", RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json
)]
List<Student> GetStudents();

Next you need to implement service as below,


public List<Student> GetStudents()
{
List<Student> lstStudent = new List<Student>
{
new Student { Name = "John " ,RollNumber = "1" , Grade = "A"},
new Student { Name = "Dan " ,RollNumber = "2" , Grade = "Q"},
new Student { Name = "Pinal " ,RollNumber = "3" , Grade = "M"},
new Student { Name = "Mahesh " ,RollNumber = "4" , Grade = "Z"},
new Student { Name = "Julie" ,RollNumber = "5" , Grade = "L"},
};
return lstStudent;
}

Configuration will be the same as of simple REST Service returning JSON. Press F5 to host and test the service.

Consuming complex JSON REST Service in Windows Phone 7 application

At the Windows Phone 7 application, you need to create entity class. This class will be representing Student class of service. Add Student class to project as below,


public class Student
{
public string Name { get; set; }
public string RollNumber { get; set; }
public string Grade { get; set; }

}

Design page as below. I have put a button and on click event of the button service will get called and returned data would be bind to the listbox.


<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="110" />
</Grid.RowDefinitions>
<ListBox x:Name="lstStudents" Height="auto" Width="auto" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextTitle2Style}"  />
<TextBlock Text="{Binding RollNumber}" Style="{StaticResource PhoneTextTitle3Style}" />
<TextBlock Text="{Binding Grade}" Style="{StaticResource PhoneTextAccentStyle}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

<Button Grid.Row="1" x:Name="btnAdd" Height="100" Content="Add" Click="btnAdd_Click"/>
</Grid>

In the code behind on click event of the button we need to make call using WebClient again


private void btnAdd_Click(object sender, RoutedEventArgs e)
{
WebClient proxy = new WebClient();
proxy.DownloadStringCompleted += new DownloadStringCompletedEventHandler(proxy_DownloadStringCompleted);
proxy.DownloadStringAsync(new Uri("http://localhost:30576/Service1.svc/rest/getstudents"));

}

And need to parse the returned JSON as below. In parameter to create instance of DataContractJsonSrrializer we are passing List of Student.


void proxy_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
Stream stream = new MemoryStream(Encoding.Unicode.GetBytes(e.Result));
DataContractJsonSerializer obj = new DataContractJsonSerializer(typeof(List<Student>));
List<Student> result = obj.ReadObject(stream) as List<Student>;
lstStudents.ItemsSource = result;
}

On running you should be getting output as below.

image

In this way you can work with WCF REST with JSON Data and Windows Phone 7. I hope this post is is useful. Thanks for reading

Block Diagram on Windows Phone 7 Application Life Cycle Events

Below block diagram depicts the way various events get executed in Windows Phone 7 application lifecycle.

clip_image002

Different events are as below. All events are written in App.Xaml.Cs

Application Launching

clip_image004

Application Activated

clip_image006

Application Deactivated

clip_image008

Application Closing

clip_image010

As a developer it is must to have understanding of sequence of events get executed in Windows Phone 7 application life cycle. I hope this post is useful. Thanks for reading.