Hi guys, Its remarkable achievement in the
technology that today we can complete most of our work through phone. It serves
to be a best companion in daily life for example, if you consider yourself in a
strange place and dont know where to go then your phone can sometime come for
the rescue by showing you the right directions to the destined place. In this
article you will learn how to implement this feature in your Windows Phone
application. For incorporating this follow the steps below.
Step 1 : First of all you need to have
Windows Phone 7.1 SDK installed in your system.
Step 2 : Then open Visual Studio
- Select new project
- Select your preferred language
- Select the silverlight for Windows Phone
application on the left pane and Windows Phone application in right pane.
- Name the project
Step 3 : Now you land up in a screen
showing the Windows Phone application and XAML coding into different partition.
Now you may change the look of your application as you wish.
![design view.gif]()
Step 4 : Now drag and drop the map
control from the toolbox into the phone application.
- Add a textbox and in the properties change
the name of this textbox as "fromtxtbox". This text box holds the value of
the start place.
- Add another textbox and in the properties
change the name of this textbox as "totxtbox" . This text box holds the
value of the end place to find the direction between these two.
- Add a button name it as "Change view".
This is to change the mode of view of the map.
- Add another button and name it as "Get
direction" to start the event of searching direction between two places.
Step 5 : Now before we start the
coding ahead you need to get the credentials for using the Bing map in Windows Phone application. To know how to get the credentials see this
article . If you don't get the credentials then an irritating white strip keeps appearing
over the map urging to get the credential for using the map control.
Step 6 : When you have the Bing map key,
move to the XAML part and find the following:
<my:Map
Grid.Row="1"
Height="448"
HorizontalAlignment="Left"
Margin="12,0,0,0"
Name="map1"
VerticalAlignment="Top"
Width="456"/>
In this line add the following
parameters to make the map work better.
CredentialsProvider="type
the bing map key you got here"
LogoVisibility="Collapsed"
Then the complete code
becomes.
<my:Map
Grid.Row="1"
Height="448"
HorizontalAlignment="Left"
Margin="12,0,0,0"
Name="map1"
VerticalAlignment="Top"
Width="456"
CredentialsProvider="type
the bing map key you got here"
LogoVisibility="Collapsed"/>
Step 7 : Now add the
following references:
![reference.gif]()
Step 8 : Now
if you want your phone to show your location then write the following line of
code in the constructor.
public partial
class MainPage :
PhoneApplicationPage
{
// Constructor
GeoCoordinateWatcher
watcher; // This is declared global
public MainPage()
{
InitializeComponent();
map1.ZoomBarVisibility = System.Windows.Visibility.Visible;
// This sets the Zoom bar in the map
visible
map1.LogoVisibility =
Visibility.Collapsed;
// The Bing map logo is set not to appear in the
map
map1.CopyrightVisibility =
Visibility.Collapsed;
// The bing map copyright text is hidden
map1.Mode = new
AerialMode();
// The map is set to load with default view mode
as aerial.
if (watcher ==
null)
{
//---To get the
highest accuracy--
watcher =
new GeoCoordinateWatcher(GeoPositionAccuracy.High)
{
//---the minimum
distance (in meters) to travel before the next location updates---
MovementThreshold = 10
};
//when a new
position is obtained---
watcher.PositionChanged +=
new EventHandler<GeoPositionChangedEventArgs<GeoCoordinate>>(watcher_PositionChanged);
//---event to
fire when there is a status change in the location
// service API---
watcher.StatusChanged +=
new EventHandler<GeoPositionStatusChangedEventArgs>(watcher_StatusChanged);
watcher.Start();
}
}
Now if the status is changed
then this method covers the status change event.
void
watcher_StatusChanged(object sender,
GeoPositionStatusChangedEventArgs e)
{
switch (e.Status)
{
case
GeoPositionStatus.Disabled:
if (watcher.Permission ==
GeoPositionPermission.Denied)
{
// the user has changed the settings in phone.
Debug.WriteLine("Location is
disabled.Change Settings");
}
else
{
Debug.WriteLine("Location is not
functioning on this phone");
}
break;
case
GeoPositionStatus.Initializing:
Debug.WriteLine("initializing");
Debug.WriteLine("finding
location");
break;
case
GeoPositionStatus.NoData: Debug.WriteLine("nodata");
break;
case
GeoPositionStatus.Ready: Debug.WriteLine("ready");
break;
}
}
Now if the position of the
user changes then this method comes to the rescue to keep updated with changes
in positions.
void watcher_PositionChanged(object
sender, GeoPositionChangedEventArgs<GeoCoordinate>
e)
{
Debug.WriteLine("({0},{1})",
e.Position.Location.Latitude, e.Position.Location.Longitude);
map1.Center = new
GeoCoordinate(e.Position.Location.Latitude,
e.Position.Location.Longitude);
}
Step 9 : Now in the design
view double click on the "change view button" and in the code write the code:
private
void chngview(object
sender, RoutedEventArgs e)
{
if (map1.Mode
is RoadMode)
{
map1.Mode = new
AerialMode(true);
}
else
{
map1.Mode = new
RoadMode();
}
}
Step 10 : Now double click on
the "get dir" button; write the following code:
private
void getdir(object
sender, RoutedEventArgs e)
{
var task =
new Microsoft.Phone.Tasks.BingMapsDirectionsTask();
task.Start = new
Microsoft.Phone.Tasks.LabeledMapLocation(fromtxtbx.Text,
new System.Device.Location.GeoCoordinate());
task.End = new
Microsoft.Phone.Tasks.LabeledMapLocation(totxtbx.Text,
new System.Device.Location.GeoCoordinate())
task.Show();
}
Step 11 : Now press F5 and see
the preview in the Windows Phone emulator. Output.
![output1.gif]()
Changing the mode of the map to Roadmode.
![output3.gif]()
Entering the places:
![output2.gif]()
Time, Distance and directions are displayed in the application.
![output4.gif]()