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.

 

Clipboard API in Windows Phone

In this post we will see Clipboard API support in Windows Phone. Clipboard API support came as part of Windows Phone 7.5 and it was not part of Windows Phone 7.

Class is defined in System.Windows namespace as below,

clip_image002

You can set text as below,

clip_image004

In above snippet txtSource is a text box. You can check whether clipboard has some data or not as below,

clip_image006

One very important point you need to keep in mind that you cannot use GetText() method in Windows Phone. If you try to do that you will get security exception as below,

clip_image007

For security reason access to clipboard data is prohibited in Windows Phone. In this way you can use Windows Phone Clipboard API. I hope this post is useful. Thanks for reading .

 

How to work with ToggleSwitch in Windows Phone 7

In this post I will discuss Toggle Switch Button. This comes as part of Silverlight toolkit for Windows Phone 7 and you get it from here

imageimage

To work with Toggle Switch, you need to add namespace


xmlns:tool="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

 

 

You can use ToggleSwitch as below,

 


<tool:ToggleSwitch x:Name="tglSwitch"
Header="wifi"
Checked="tglSwitch_Checked"
Unchecked="tglSwitch_Unchecked"/>


You can set Header and Content of the Toggleswitch. If you want you can very much templateaize Header and Content.

There are four events attached with Toggle Switch.

image

You can handle events as below,

void tglSwitch_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Its Clicked");

}

void tglSwitch_Indeterminate(object sender, RoutedEventArgs e)
{
MessageBox.Show("Its intermidiate");
}

private void tglSwitch_Checked(object sender, RoutedEventArgs e)
{
tglSwitch.Content = "on";
}

private void tglSwitch_Unchecked(object sender, RoutedEventArgs e)
{
tglSwitch.Content = "off";
}


In this way you can work with ToggleSwitch . I hope this post is useful. Thanks for reading.

How to work with WrapPanel in Windows Phone 7

In this post I will show you the various way of working with WrapPanel in Windows Phone 7 application. I will discuss

  1. Basic working of WrapPanel
  2. WrapPanel with ScrollBar
  3. Using WrapPanel in a ListBox

WrapPanel comes as part of Silverlight for Windows Phone Toolkit. You can download it from here . You need to install MSI package after downloading the toolkit to work with WrapPanel.

To start using toolkit add the namespace on xaml as below,


xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Basic working of WrapPanel

I am going to put 16 red rectangles inside a WrapPanel. All rectangles would be in two columns of WrapPanel.


<toolkit:WrapPanel>
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Margin="10" Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
</toolkit:WrapPanel>

Default FlowDirection is Left to Right. If you want you can change it as below along with the basic properties like Height etc.

image

On running you will get output as below,

image

You will notice that there should be 8 rows visible since there are 16 rectangles but you are getting only 5 rows and not able to scroll as well.

WrapPanel with ScrollBar

To work with scroll in WrapPanel, you need to put WrapPanel inside a ScrollViewer as below,

image

You need to put WrapPanel inside ScrollViewer. I have done this and modified the code as below to vertically scroll through all the rows of rectangles.


<ScrollViewer VerticalScrollBarVisibility="Auto">
<toolkit:WrapPanel>
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Margin="10" Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
</toolkit:WrapPanel>
</ScrollViewer>

Now on running the application, you should able to scroll vertically all the rows.

Using WrapPanel in a ListBox

A very common requirement you may come across to work with WrapPanel and ListBox together. Imagine a scenario where you want

  • Button with Image as ListBox item
  • Wrapping of Button horizontally

Something like below,

image

What all you need to do is follow below steps,

Create a ListBox

image

Inside the ListBox you need to create ItemPanel and put a template inside it for the WrapPanel as below,

image

Then you need to create ItemTemplate and DataTemplate as below. Inside DataTemplate make sure you are putting StackPanel

image

Now you need to create Image Button. For that modify Button as below. I am Binding Text of TextBlock with Name Property of the class whereas for Image Source is fixed to Application.jpg

image

By putting all the codes together, you should have below code


<ListBox x:Name="lstData">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate >
<StackPanel>
<Button x:Name="btnData" >
<StackPanel Orientation="Vertical">
<Image Source="ApplicationIcon.jpg"
Width="100"
Height="100" />
<TextBlock Text="{Binding Name}" Width="100" />
</StackPanel>
</Button>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

In the code behind, I have created a class Student.


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

I have also created function to return many Students.


private List<Student> GetDummyData()
{
List<Student> lstStd = new List<Student>
{
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"}

};
return lstStd;
}

And then binding it to the ListBox as below,


public MainPage()
{
InitializeComponent();
lstData.ItemsSource = GetDummyData();
}


In this way you can work with WrapPanel and ListBox. I hope this post is useful. Thanks for reading.

If you find my posts useful you may like to follow me on twitter http://twitter.com/debug_mode or may like Facebook page of my blog http://www.facebook.com/DebugMode.Net If you want to see post on a particular topic please do write on FB page or tweet me about that, I would love to help you.

How to navigate to other page from a user control in Windows Phone 7

Let us say, you have a scenario to navigate from user control

image

In code behind of the user control very first put below namespace,

clip_image001

Next globally define an event as below,

clip_image002

After this you need to create a method to handle page navigation event as below. This function is taking URI to navigate as input parameter.

clip_image003

Let us say you have a button on user control and you want to navigate on click event of that button then you need to call above function inside the click event of the button like below

clip_image005

Finally code behind of user control should look like below


using System;
using System.Windows.Controls;
using System.Windows.Navigation;

namespace test
{
public partial class MyUserControl : UserControl
{

public event EventHandler EventForPageNavigation;

public MyUserControl()
{
InitializeComponent();
}

public void MethodToNavigateToPage(Uri uri)
{
var e = new NavigationEventArgs(null, uri);
if (EventForPageNavigation != null)
EventForPageNavigation(this, e);
}

private void btnNavigate_Click(object sender, System.Windows.RoutedEventArgs e)
{
MethodToNavigateToPage(new Uri("/ImageUpload.xaml", UriKind.Relative));
}
}
}

Next you need to handle this event of the main page where user control is being used. Let us say you are using user control with the name NavigationUserControl. What I mean while adding user control on the XAML of the main page you gave the name NavigationUserControl

First you will have registered the event in the OnNavigatedTo method or constructor of page as below,


NavigationUserControl.EventForPageNavigation += new EventHandler(NavigationUserControl _NavigateToPageEvent);

Then in navigated event navigate to URI as below,


void NavigationUserControl_NavigateToPageEvent(object sender, EventArgs e)
{
NavigationService.Navigate(((NavigationEventArgs)e).Uri);
}

So in this way you can perform navigation in a user control. I hope this post is useful. Thanks for reading

If you find my posts useful you may like to follow me on twitter http://twitter.com/debug_mode or may like Facebook page of my blog http://www.facebook.com/DebugMode.Net If you want to see post on a particular topic please do write on FB page or tweet me about that, I would love to help you.

Code to disable hardware Back Button in Windows Phone 7

You can come across requirement when you need to disable hardware back button in Windows Phone 7.

clip_image001

If you want to disable hardware back button on Page1 then you need to override OnBackKeyPress method on Page1.

clip_image003

To disable you need to make CancelEventArgs value to cancel as given below,

clip_image004

If you want you can display a message to user when users try to navigate from back button. For your reference to disable back button code is given below.


using System.Windows;
using Microsoft.Phone.Controls;

namespace PhoneApp1
{
public partial class SecondPage : PhoneApplicationPage
{
public SecondPage()
{
InitializeComponent();
}

protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
{
//base.OnBackKeyPress(e);
MessageBox.Show("You can not use Hardware back button");

e.Cancel = true;
}

}
}

When run this code and try to navigate using back button, you will get a message and hardware back button will not work. You can have any other business requirement code in overridden OnBackKeyPress method as well. I hope this post is useful. Thanks for reading  Smile

If you find my posts useful you may like to follow me on twitter http://twitter.com/debug_mode or may like Facebook page of my blog http://www.facebook.com/DebugMode.Net If you want to see post on a particular topic please do write on FB page or tweet me about that, I would love to help you.

Code to make call in Windows Phone 7

Launchers are used to perform task provided by phone operating system. Making Call is feature of Windows phone operating system and can be used by Launcher API. PhoneCallTask launcher is used to call. This launcher class is defined as below,

image

 

To work with PhoneCallTask, first you need to add namespace of Microsoft.Phone.Task

image

Then create instance of PhoneCallTask.

image

Next you need to set values properties to make the call. To make the call you need to set below properties

  • PhoneNumber
  • DisplayName

So first set PhoneNumber property as below,

image

And DisplayName as below,

image

Last step you need to launch making call application provided by operating system. You can show that as below,

image

If you put all code together and want to make a call on click event of button then full code will be as below,

 


using System.Windows;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Tasks;

namespace Day6
{
public partial class MainPage : PhoneApplicationPage
{

public MainPage()
{
InitializeComponent();
}

private void btnCall_Click(object sender, RoutedEventArgs e)

{
PhoneCallTask callTask = new  PhoneCallTask();
callTask.PhoneNumber = "999999";
callTask.DisplayName = "debugMode";
callTask.Show();

}

}
}

&nbsp;

When you run above code you will get application running as below,

image

When you click on Call button, you will next screen as below for confirmation to call.

image

After choosing Call you will get usual Windows Phone 7 Call screen as below,

image

If you want you can very much end call, turn on speaker, mute hold or add call. I hope this post was useful. Thanks for reading Smile

If you find my posts useful you may like to follow me on twitter http://twitter.com/debug_mode or may like Facebook page of my blog http://www.facebook.com/DebugMode.Net If you want to see post on a particular topic please do write on FB page or tweet me about that, I would love to help you.