Using the Bing Maps Silverlight control on the Windows Phone 7
Update 5/2/2010: The updated Windows Phone 7 Development April 2010 refresh actually ends up breaking the ability to use signed assemblies. You can read about it here: http://www.manyniches.com/windows-phone/signed-assemblies-bug-in-the-windows-phone-tools-ctp-refresh/ . The problem is the workaround they support doesn't really work for Bing Maps OR the Silverlight Control Toolkit.
Update 7/12/2010: The Windows Phone 7 Beta Tools (July 2010 release) work perfectly with the Bing Maps control. The signed assemblies issue has been resolved and the instructions below work great.
This technique/article is still relevant after that issue is resolved. I think Microsoft will either update the Windows Phone 7 Dev tools or release unsigned assemblies for Bing Maps and Silverlight Control Toolkit. If you are using the previous tools (March 2010), then you are good to go to use this article as-is.
Update 10/10/2010: The Windows Phone 7 RTM tools include a NEW updated Bing Maps Control tailored for the Windows Phone 7. If you are interested in surfacing maps on the phone use that control. Step by step instructions are included in the Windows Phone 7 Training Kit located here. The code below still works and if you need to use the full Silverlight control on the Windows Phone 7 RTM, this still works. However, the Bing Maps control for the Windows Phone 7 is optimized for the phone runtime, gestures and limited resources.
The v1 version of the Silverlight Bing Map control was released in December 2009. The Silverlight control allows you to integrate an immersive mapping solution in your Silverlight applications. By using Silverlight, Microsoft is able to provide a rich experience with crisp zooming and panning that performs significantly better than the Ajax map control.
During the MIX 2010 conference last week, Microsoft unveiled the Windows Phone 7 SDK details. Developers can now leverage their existing Silverlight investments on the phone. Furthermore, developers can also leverage Microsoft's investments in Silverlight as well. The Bing map Silverlight control is a perfect example of this as it will work on the Windows Phone 7 emulator. This article will cover how to get started with integrating the Bing maps control with the Windows Phone 7 (mobile platform) and overcome some of the nasty gotchas. The source code for this article is included below.
Getting Started with Bing Maps for Silverlight mobile
The first thing you need is to navigate your browser to the Bing maps portal at https://www.bingmapsportal.com. After logging in with your Live account, you can crate a Bing Maps account and create a new key. After creating a key, download the Silverlight Bing Maps control from the Microsoft download site. Installing the Bing Maps Silverlight control will create a folder with the assemblies and documentation.
Bing Maps Account Center
Creating Your First Windows Phone 7 Mobile App with Bing Maps
Note: This article assumes you have both the Windows Phone 7 SDK and Bing Maps control for Silverlight installed.
1) Open Expression Blend 4 Beta and create a new Windows Phone project. You can optionally change the names of the page and app titles.
2) In order to use the Bing Maps control, we need to add references to the Bing Maps assemblies. In order to achieve this, simply right-click on the References folder and click "Add Reference...". If you installed the Bing Maps Silverlight control, the assemblies are located at: C:\Program Files (x86)\Bing Maps Silverlight Control\V1\Libraries. Ensure both map control assemblies are added.
3) After adding both map control references, you should now find the Map control in the asset library.
4) You can drag the Map control over on the ContentGrid control. I placed the control to take the full real estate available and named the control BingMap. Once you do this, you should see the map properly render in Expression Blend (shown below).
5) Let's build the application and try to run it. You will notice a nasty error below. Luckily for us, the error is rather descriptive and it is an easy fix.
6) In order to fix this error, simply add a reference to the System.Windows.Browser.dll which can be found at C:\Program Files (x86)\Microsoft Silverlight\4.0.50303.0\. The application should now build. Hitting F5 or debug will now run the application. If you do not have a physical Windows Phone 7 device, you can run the program in emulator mode. It will take a minute or two to boot the ROM into memory.
Note: The reason why we are getting this is error is because the System.Windows.Browser.dll is unsupported by WP7 (source: http://msdn.microsoft.com/en-us/library/dd470087(VS.96).aspx). Luckily for us they are both Silverlight assemblies and we can cheat to get it to work.
Development tip: Do NOT close the emulator while enhancing your project. Just minimize it and stop the debugging natively in Expression Blend or Visual Studio 2010. This way, the emulator does not have to boot every time.
7) Now that the emulator is loaded, we have a black screen. In order to get around this problem, simply right-click on the MainPage.xaml and click "edit in Visual Studio". For some reason, the Expression Blend emulator or web access does not work properly. You need to debug the app in Visual Studio 2010. I have no idea why that is. If anyone has any ideas, please comment below.
Important note: You have to be connected to the internet for this work. The images and credentials both have to be verified on Microsoft servers.
8) Now we FINALLY have our Bing Maps Silverlight control working on our Windows Phone 7 project. We can pan around. Notice that the zooming works. We can switch between arial and road modes.
9) We need to clean up the interface. If you are familiar with the Bing Maps Silverlight control, you will notice two strange things: the navigation arrows are in the center of the screen, and secondly, what is that white box in the middle of the map?
10) Using the Bing Map API, we can remove the navigation control. Create a loaded event for the control or the page (During the MIX conference, they mentioned you can use the OnPageNaviagedTo event as well) and simply add this code to the event: this.BingMap.NavigationVisibility = System.Windows.Visibility.Collapsed. Run the application now and you will see the navigation control removed. This removes the scaling and the mode switch but we can add those back later if we want to.
11) Investigating the white pop-up over the map control. If you are not familiar with the v1 Bing Maps Silverlight control, you might not know what this white pop-up is (This didn't happen in the beta of the control). In order to get a clue, you can create a Silverlight 3/4 (NOT mobile) project and add a map control and see what happens. I took a screen shot below of a full Silverlight app with Bing and we can clearly see that this pop-up is probably just a warning message because of invalid credentials. The Windows Phone 7 doesn't properly show the error.
12) Add credentials to the map. If you properly signed up for the Bings Map control and received an access key, you can copy it (shown in the first screen shot in this article) and set the CredentialsProvider attribute. If you added the CredentialsProvider properly, the warning message will go away.
13) Optionally, you can clean up the interface further by removing the logo and copyright notice. The clean interface will look like something something like this when fully implemented:
14) You can mimic multi-touch on the emulator WITHOUT a multi-touch monitor. Earlier we removed the navigation/scale control. If you were using this app on the phone, wouldn't you want to just zoom in by expanding both fingers? We can actually mimic this on the map control because it supports multi-touch. Fire up the application and hold down CTRL and flick the mouse to any direction. Notice that you can easily mimic zooming in like a phone user would. I don't think the pinch gesture can be mimicked (since this is kind of a hack but Microsoft mentioned it is coming to the next SDK drop.
Give Microsoft Credit
I have been preaching for almost two years now to other fellow RIA architects and developers that Microsoft's RIA strategy is really about hooking into its vast enterprise service and development verticals. How cool is it that a control NOT designed for the phone released last year just works on a preview of the Windows Phone 7 SDK? That to me is truly impressive. Furthermore, this amplifies the rationale to go with Silverlight when chosing an RIA technology. Adobe does not have the search, map, enterprise services, cloud services, development environment or mobile device to compete with Microsoft in this area. Integration with the Bing Maps Silverlight control on the Windows Phone 7 truly highlights this fact.
As you can see, there are some gotchas involved in getting started with the Bing Maps Silverlight control on the Windows Phone 7. However, if you follow these steps, you should be able to start mocking up prototype map applications easily. I kept this project really clean and did not add any specific functionality, but from what I tested, this works just as it does on the full Silverlight project. Obvious enhancements include adding landscape/portrait rotations and being able to swith between modes. Microsoft will probably update this control and licensing for the Windows Phone 7 release. Some of these problems will probably go away.
You can download the zip file of the project below (Note: I did remove my credentials from the project so you will have to add your own).
WindowsPhoneAppWithBingMaps.zip (522.72 kb)