• Article

Exercise 2: Create a Silverlight App with the Bing Maps Silverlight Control

In this exercise, you will create a new Silverlight web application and use the Bing Maps Silverlight control

Note:
Before starting, ensure you have installed Silverlight 4 Tools for Visual Studio 2010. This add-on for Visual Studio 2010 will install the necessary Visual Studio updates, Silverlight project templates, developer runtime, and SDK. For additional information read the overview

  1. Launch Visual Studio 2010, and create a new Visual C# Silverlight Application. Change the name of your project to SharePoint2010HOL:

    Figure 15

    New Project dialog

  2. When prompted, check the default settings Host the Silverlight application in a new Web site and Silverlight 4, and accept the default project name.

    Figure 16

    New Silverlight Application dialog

  3. By default, two projects are created
    1. SharePoint2010HOL: This is the Silverlight Application

    2. SharePoint2010HOL.Web: This is the Web application that hosts the Silverlight control to display in the browser

      Figure 17

      Solution Explorer pane

  4. Delete the SharePoint2010HOLTestPage.html as you will not be using it.

  5. Open SharePoint2010HOLTestPage.aspx.cs code-behind file and add following namespaces to the top.

    C#

    using System.Collections.Specialized; using System.Configuration;

  6. Build the Application. You will now see that a .xap file called SharePoint2010HOL.xap is created and added to the SharePoint2010HOL.web project inside the ClientBin folder. This .xap file is the compiled Silverlight control. (Note: At this time, there is no content to be displayed yet.)

    Figure 18

    Solution Explorer pane

  7. Now, modify the SharePoint2010HOLTestPage.aspx to include the SharePoint2010HOL.xap. By that, we are hosting the Silverlight xap file in our Web Application.To do, so, open Default.aspx, and change the Head and the Body section of the code as follows

    ASPX page

    <head runat="server"> <title>SharePoint 2010 – Bing Maps Integration</title> <style type="text/css"> html, body { height: 100%; overflow: auto; } body { padding: 5; margin: 0; } #silverlightControlHost { height: 100%; text-align:center; } </style> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript"> function onSilverlightError(sender, args) { var appSource = ""; if (sender != null && sender != 0) { appSource = sender.getHost().Source; } var errorType = args.ErrorType; var iErrorCode = args.ErrorCode; if (errorType == "ImageError" || errorType == "MediaError") { return; } var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n"; errMsg += "Code: " + iErrorCode + " \n"; errMsg += "Category: " + errorType + " \n"; errMsg += "Message: " + args.ErrorMessage + " \n"; if (errorType == "ParserError") { errMsg += "File: " + args.xamlFile + " \n"; errMsg += "Line: " + args.lineNumber + " \n"; errMsg += "Position: " + args.charPosition + " \n"; } else if (errorType == "RuntimeError") { if (args.lineNumber != 0) { errMsg += "Line: " + args.lineNumber + " \n"; errMsg += "Position: " + args.charPosition + " \n"; } errMsg += "MethodName: " + args.methodName + " \n"; } throw new Error(errMsg); } </script> </head> <body> <form id="form1" runat="server" style="height:100%"> <div id="silverlightControlHost"> <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> <param name="source" value="ClientBin/SharePoint2010HOL.xap"/> <param name="onError" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value="4.0.50401.0" /> <param name="autoUpgrade" value="true" /> <a href="https://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none"> <img src="https://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/> </a> </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div> </form>

    </body>

  8. With the Silverlight project (SharePoint2010HOL) selected, and using Project…Add Reference from the file menu, add a reference to the Silverlight Map Control assemblies, which should be located in C:\Program Files\Bing Maps Silverlight Control\v1\Libraries\ (or) C:\Program Files (x86)\Bing Maps Silverlight Control\V1\Libraries. (Note: The path may be different if you have chosen custom location during install.)

    Figure 19

    Add Reference dialog

  9. Add a reference to the Map Control namespaces in MainPage.xaml by adding the following text to the User Control element:

    XAML

    xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"

    XAML

    Note: Your User Element Should be as follows:
    <UserControl x:Class="SharePoint2010HOL.MainPage"
    FakePre-c2ef28a05c7d46fba82834e81958b988-8b37bfc228ba4e209d39c6cac67dac51FakePre-dcc9b7c3dc2b4eb8aa500aa1eb2faa8c-fc62bea7e47b4ccd80e5f7449f99ea59FakePre-dfa06918b8784c97809273853be059f7-3a4d252f6297413bace7d66dd0c8aae3FakePre-ba8a4e906f544ba4a08a1cfc35f75339-4cc1deb105724e629ffc858f9fa1ca06FakePre-1e60f4ea6ee94c408c702b9ecbd2f675-a301aee17b3d4d079ea984dd902b6395FakePre-51555aae52e84458adc78e047d06a8fc-f89e2e2ccebf407aa00364e25ff336f0FakePre-200fb7d0d86f4d20ab9749959aed2622-c4497cd18928414e8525208aa28cf6ebFakePre-8f3706bd714d4ab6bd756d8a3ff25c04-a853dde940d240a4abf0316971305051FakePre-0ce774e457a04bef8e481fc64b9f9310-6cccaa33faa64bd68689bc7b8a57f817

  10. Add a Map element into the existing Grid element, with the attributes x:Name="MainMap” CredentialsProvider="<Your Bing Maps Key>" AnimationLevel="Full" Mode="AerialWithLabels" ZoomLevel="5" Center="38.000,-95.000". This will cause your map to display a hybrid map centered on US at zoom level 5.

    Note:
    Replace <Your Bing Maps Key> with your actual Key. You can obtain your Bing Maps key from https://www.bingmapsportal.com/).

    XAML

    Note: Your Grid Element Should look as follows:
    <Grid x:Name="LayoutRoot" Background="White">
    FakePre-be074215e5bf4daf849c320843d5adf1-460ca0a58d614a71b5ba8084935f71b9FakePre-bdc84e67d45641078f40247119946cbe-36fde6a5320a44fdace282eec5dc0337FakePre-1ce120ff592049268424d8bbf8e81e20-1409134c777a4499a6d02d104c8276fdFakePre-9146991386054618af4634a0e00c03b2-2b88b5e644b14d1da6e62a2e016cf18cFakePre-88f24738c1434d4b84930fe95023011d-66a40c31879a45af8f5bc2ab97b1957aFakePre-5e06330479a740679e6f200441987944-22c7719302444cee84450c769262bc9eFakePre-773a7a264b1a4ff2bf88ba70cc3b846b-b98fceaef97a4949ae87f4099d70cfe9

  11. Open the MainPage.xaml.cs code-behind file and add following namespaces to the top.

    C#

    using Microsoft.Maps.MapControl;

  12. Save MainPage.xaml. Press F5 to run the application. If prompted to enable debugging, do so

    Figure 20

    Debugging Not Enabled warning

  13. You should now see your Silverlight map appear in a new browser window.

    Figure 21

    Silverlight map

< previous | next >

Downloads

Download The Offline Training Kit
Download Hands-on Lab Document (DOCX)
Download Hands-on Lab Source Files

Contents