Floating FB popout byF5debug

Learn Windows Phone 7 Development in 31 Days – Day 21 – Working with BING Map Control in WP7

 

Introduction:

In this article we are going to see the most useful control on the Windows Phone 7 development, yes the BING Map Control. The BING Map Silverlight control for Windows Phone 7 development combines the power of Silverlight and Bing maps to get the best mapping experience for the developers and the real users to create location based application.

BING Map control in Windows Phone 7 application development are derived from the name spaces Microsoft.Phone.Controls and Microsoft.Phone.Controls.Maps. Developers need to register for the BING Map developers account to get the keys which are used in developing the application with the Bing Maps. Here in this article we will see the step by step process on how to make use of the BING Maps control and get the most enriching map application.     [more]

Steps:

Open Visual Studio 2010 and create a new Silverlight for Windows Phone 7 application with a valid project name as shown in the screen below.

clip_image002

Note – To get the BING Map Keys first we need to register to the BING Map account using the below URL

http://www.bingmapsportal.com/

Once we register with our valid Windows Live ID we need to login again and go to the section Create or View Keys under the My Account category

clip_image004

Now we will be requested to provide the application details like below

  • Application name: a valid application name
  • Application URL: a valid application URL to access
  • Application type: a valid application type to be selected from the list

Once we provided the details we will be provided with the BING Maps key as shown in the screen below.

clip_image006
Now we need to go back to the Visual Studio 2010 F5debugWp7BingMapControl project and start designing the application by dragging and dropping the BING Map control from the tool box and some buttons as shown in the screen below.


XAML Code:

01

<phone:PhoneApplicationPage

02

x:Class="F5debugWp7BingMapControl.MainPage"

03

xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;">http://schemas.microsoft.com/winfx/2006/xaml/presentation"</a>

04

xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml&quot;">http://schemas.microsoft.com/winfx/2006/xaml"</a>

     

05

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

06

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

07

xmlns:d="<a href="http://schemas.microsoft.com/expression/blend/2008&quot;">http://schemas.microsoft.com/expression/blend/2008"</a>

08

xmlns:mc="<a href="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;">http://schemas.openxmlformats.org/markup-compatibility/2006"</a>

     

09

mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="696"

10

FontFamily="{StaticResource PhoneFontFamilyNormal}"

11

FontSize="{StaticResource PhoneFontSizeNormal}"

12

Foreground="{StaticResource PhoneForegroundBrush}"

13

SupportedOrientations="Portrait" Orientation="Portrait"

14

shell:SystemTray.IsVisible="True" xmlns:my="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps" Loaded="PhoneApplicationPage_Loaded">

       

15

 

16

<!--LayoutRoot is the root grid where all page content is placed-->

17

<Grid x:Name="LayoutRoot" Background="Transparent">

18

<Grid.RowDefinitions>

19

<RowDefinition Height="Auto"/>

20

<RowDefinition Height="*"/>

21

</Grid.RowDefinitions>

22

 

23

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

24

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

25

<TextBlock x:Name="ApplicationTitle" Text="F5DEBUG WP7 TUTORIALS" Style="{StaticResource PhoneTextNormalStyle}"/>

26

<TextBlock x:Name="PageTitle" Text="Bing Maps" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

27

</StackPanel>

28

 

29

<!--ContentPanel - place additional content here-->

30

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

31

<my:Map Height="523" CredentialsProvider="At7uQrXAsuZLAGFyv2pz6MGQ6-EhRIqjd1l0zTto9HhHzV2VcClvIQBbumcUz74S" HorizontalAlignment="Left" Margin="6,6,0,0" Name="map1" VerticalAlignment="Top" Width="444" />

32

</Grid>

33

</Grid>

34

 

35

<!--Sample code showing usage of ApplicationBar-->

36

<phone:PhoneApplicationPage.ApplicationBar>

37

<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">

38

<shell:ApplicationBarIconButton IconUri="/Images/appbar.share.rest.png" Text="Road View" Click="ApplicationBarIconButton_Click"/>

39

<shell:ApplicationBarIconButton IconUri="/Images/appbar.feature.video.rest.png" Text="Aerial View" Click="ApplicationBarIconButton_Click_1"/>

40

<shell:ApplicationBarIconButton IconUri="/Images/appbar.back.rest.png" Text="Zoom In" Click="ApplicationBarIconButton_Click_2"/>

41

<shell:ApplicationBarIconButton IconUri="/Images/appbar.next.rest.png" Text="Zoom Out" Click="ApplicationBarIconButton_Click_3"/>

42

</shell:ApplicationBar>

43

</phone:PhoneApplicationPage.ApplicationBar>

44

 

45

</phone:PhoneApplicationPage>

clip_image008
Now we need to use the below using directive to start using the map properties to the code behind. So add the below code first to the using list at the top

Code Behind:

1

using Microsoft.Phone.Controls.Maps;

Now we need to add below code to the Road View and Aerial View button click events as shown in the code below.


Code Behind:

1

private void ApplicationBarIconButton_Click(object sender, EventArgs e)

2

{

3

map1.Mode = new RoadMode();

4

}

5

 

6

private void ApplicationBarIconButton_Click_1(object sender, EventArgs e)

7

{

8

map1.Mode = new AerialMode();

9

}

clip_image010
Now build and execute the application to check the first 2 button is working as expected. Press F5 to start building the project and we can see the application loaded to the Windows Phone 7 Emulator as shown in the screen below.

clip_image012

We can see a message Invalid Credentials: Sign up for a developer account at: http://www.microsoft.com/maps/developers as shown in the screen above. To remove this message we need to make use of the key which we got after registering with the Bing Maps website. So go to the XAML Code and add the key to the BING Maps section as shown in the screen below.


XAML Code:

1

<my:Map Height="523" CredentialsProvider="Insert the KEY here" HorizontalAlignment="Left" Margin="6,6,0,0" Name="map1" VerticalAlignment="Top" Width="444" />

clip_image014

Now run the application again by pressing the F5 key and we can see the error message is removed and the application in Aerial View and Road View as shown in the screens below.

clip_image016
Now we will write our code to do the zooming for the maps. Write the below code in the respective code behind to get the Zoom in and Zoom out as shown in the code below.


Code Behind:

01

private void ApplicationBarIconButton_Click_2(object sender, EventArgs e)

02

{

03

double dbZoom;

04

dbZoom = map1.ZoomLevel;

05

map1.ZoomLevel = ++dbZoom;

06

}

07

 

08

private void ApplicationBarIconButton_Click_3(object sender, EventArgs e)

09

{

10

double dbZoom;

11

dbZoom = map1.ZoomLevel;

12

map1.ZoomLevel = --dbZoom;

13

}

clip_image018
Now build and execute the project and we can see the Zoom in and Zoom out of the maps effectively as shown in the screens below.

clip_image020
Now we got the expected output as shown in the above screens, now let us do a add on task of pinning the location normally we need to do while travelling using a map direction. To start coding the PINNING option first add the map1_MouseLeftButtonUp event and write the below code which will do the location pinning as shown in the screen below.

Code Behind:

01

int intcount = 0;

02

private void map1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)

03

{

04

intcount = intcount + 1;

05

Pushpin pn = new Pushpin();

06

pn.Location = map1.ViewportPointToLocation(e.GetPosition(sender as Map));

07

pn.Content = "Location" + intcount;

08

 

09

(sender as Map).Children.Add(pn);

10

}

clip_image022

Now we are done with our code, let us build and execute the application by pressing F5 and we can see the expected output. Just use the Mouse Up to click on the location shown in the Windows Phone 7 Emulator to pin the location as shown in the screens below.

clip_image024

Conclusion:

So in this article we have seen how to use the BING Map control effectively with the Windows Phone 7 development to build a rich user experience.

About Author: Karthikeyan Anbarasan, Microsoft MVP (Most Valuable Professional) in ASP.NET/IIS Architecture. He is the Founder and Chief Editor of the www.f5debug.net website and has authored books on Windows Phone and Business Intelligence(SSIS). He is also a Passionate Speaker and a Blogger on Microsoft Technologies.

You can Join Me On: Facebook, Twitter, Google Plus, LinkedIn

Comments (1) -

Sanjay Pachar
Sanjay Pachar
8/5/2013 10:15:48 PM #

Sir ,
Thanks for all your documents . i am new in this field. I like your all posts as they are my first resource to learn .
Right now i am using a bing map ui in Windows Phone 7. can you please help me here.
I want to use bing maps ui element for some actions to perform on it .
How can we display route with directions including way points address.
I some how managed to get route way points and their address.
But i need to know how to get directions along it.
Can you please refer a post or guide me in this .
Thank You

Sanjay Pachar

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Recent Posts

Random Posts

Most Viewed

URL Shortner

Create your own short urls!!!

Site Counter

free counters

Disclaimer

This is a personal weblog. The opinions expressed here represent my own and not those of my employer. For accuracy and official reference refer to MSDN/ TechNet. I have documented my personal experience on this blog.

Protected by Copyscape Web Plagiarism Finder

Site Meter