{"id":653,"date":"2011-03-07T01:53:00","date_gmt":"2011-03-07T01:53:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/vbteam\/2011\/03\/07\/visual-basic-windows-phone-7-series-7-how-to-create-a-bing-maps-application-for-windows-phone-7\/"},"modified":"2024-07-05T12:40:19","modified_gmt":"2024-07-05T19:40:19","slug":"visual-basic-windows-phone-7-series-7-how-to-create-a-bing-maps-application-for-windows-phone-7","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/vbteam\/visual-basic-windows-phone-7-series-7-how-to-create-a-bing-maps-application-for-windows-phone-7\/","title":{"rendered":"Visual Basic Windows Phone 7 Series #7. How to create a Bing Maps application for Windows Phone 7"},"content":{"rendered":"<p><span style=\"font-size: small\">In our <\/span><a href=\"http:\/\/blogs.msdn.com\/b\/vbteam\/archive\/2011\/03\/04\/visual-basic-windows-phone-7-series-how-to-create-an-application-bar-for-windows-phone-7.aspx\"><span style=\"font-size: small\">previous post<\/span><\/a><span style=\"font-size: small\">, I explained how to create an application bar for Windows Phone 7. <b>Bing Maps<\/b> is one of the applications that is commonly used on phones these days. In this blog post, I want to share a sample that will help you to create a Bing Maps application for Windows Phone 7. This application will provide the feature to view maps in road view and aerial view. This application will also provide the zooming in and zooming out features.<\/span><\/p>\n<p><span style=\"font-size: small\">I will now demonstrate how easy it is to create a Bing Maps application for Windows Phone 7, using Visual Basic for Windows Phone Developer Tools. The Bing Maps application can be created in 4 simple steps as follows:<\/span><\/p>\n<ol>\n<li><span style=\"font-size: small\">Create a sample application and add controls<\/span><\/li>\n<li><span style=\"font-size: small\">Add event handlers<\/span><\/li>\n<li><span style=\"font-size: small\">Build and debug the application<\/span><\/li>\n<li><span style=\"font-size: small\">Rebuild in the release mode before publishing<\/span><\/li>\n<\/ol>\n<p><i><span style=\"font-size: small\">Prerequisites:<\/span><\/i><\/p>\n<ul>\n<\/ul>\n<ul>\n<\/ul>\n<ul>\n<\/ul>\n<ul>\n<li><span style=\"font-size: small\"><i>Visual Studio 2010 Professional, Premium,\nor Ultimate. If you do not have any of the releases, you can download any of\nthe following trial versions as per your preference: <\/i><a href=\"http:\/\/www.microsoft.com\/downloads\/en\/details.aspx?FamilyID=26bae65f-b0df-4081-ae6e-1d828993d4d0&amp;displaylang=en\"><i>Professional<\/i><\/a><i>, <\/i><a href=\"http:\/\/www.microsoft.com\/downloads\/en\/details.aspx?FamilyID=7038e207-329c-4006-b620-16d1af1c42c1&amp;displaylang=en\"><i>Premium<\/i><\/a><i>, or <\/i><a href=\"http:\/\/www.microsoft.com\/downloads\/en\/details.aspx?FamilyID=e2a1a098-995e-4468-816d-7fdbe0a64f38&amp;displaylang=en\"><i>Ultimate<\/i><\/a><i>.<\/i><\/span><\/li>\n<li><span style=\"font-size: small\"><a href=\"http:\/\/www.microsoft.com\/downloads\/en\/details.aspx?FamilyID=04704acf-a63a-4f97-952c-8b51b34b00ce&amp;displaylang=en\"><i>Windows Phone Developer Tools\nRTW<\/i><\/a><\/span><\/li>\n<li><span style=\"font-size: small\"><a href=\"http:\/\/www.microsoft.com\/downloads\/en\/details.aspx?FamilyID=4e97ea70-e479-4c05-814f-639d71690e5d&amp;displaylang=en\"><i>Visual Basic\nfor Windows Phone Developer Tools &#8211; RTW<\/i><\/a><em><br \/><\/em><\/span><span style=\"font-size: small\"><em>Note: You can install the newer version- <\/em><em><a href=\"http:\/\/www.microsoft.com\/downloads\/en\/details.aspx?FamilyID=77586864-ab15-40e1-bc38-713a95a56a05&amp;displaylang=en\">Windows Phone Developer Tools 7.1 Beta<\/a>\n instead of the above mentioned two tools as it will take comparatively\nless time. However, this sample was created using the previous version.<\/em><\/span><\/li>\n<\/ul>\n<ul>\n<\/ul>\n<ul>\n<\/ul>\n<p><span style=\"font-size: small\">To create the Bing maps application, let&rsquo;s follow the 4 simple steps mentioned earlier:<\/span><\/p>\n<h3>Step 1 &ndash; Create a sample application and add controls<\/h3>\n<h4>Create a sample application<\/h4>\n<ol>\n<li><span style=\"font-size: small\">Create a new project and browse to the &ldquo;Silverlight for Windows Phone&rdquo; node. <\/span><\/li>\n<li><span style=\"font-size: small\">Select the &ldquo;Windows Phone Application&rdquo; template. <\/span><\/li>\n<li><span style=\"font-size: small\">Enter a name for the application.<br \/><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/vbteam\/wp-content\/uploads\/sites\/7\/2011\/03\/2045.Sel_App.bmp\" border=\"0\" \/><\/span><\/li>\n<li><span style=\"font-size: small\">Click OK. The MainPage.xaml page is displayed.<br \/><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/vbteam\/wp-content\/uploads\/sites\/7\/2011\/03\/7750.Init_App20-20Copy.bmp\" border=\"0\" \/><\/span><\/li>\n<\/ol>\n<h4>Add controls<\/h4>\n<ol>\n<li><span style=\"font-size: small\">Click the MY APPLICATION text. In the Properties window, change the Text property to &ldquo;Bing Maps Silverlight Control Sample&rdquo;.<\/span><\/li>\n<li><span style=\"font-size: small\">Click the page name text. In the Properties window, change the Text property to &ldquo;Bing Maps&rdquo;.<\/span><\/li>\n<li><span style=\"font-size: small\">From the toolbox, drag and drop the Map control to the design surface.<\/span><\/li>\n<li><span style=\"font-size: small\">From the toolbox, drag and drop the Button control to the design surface.<\/span><\/li>\n<li><span style=\"font-size: small\">Click the Button control. In the Properties window, change the Content property to &ldquo;Road Mode&rdquo;.<\/span><\/li>\n<li><span style=\"font-size: small\">From the toolbox, drag and drop a new Button control to the design surface.<\/span><\/li>\n<li><span style=\"font-size: small\">Click the Button control. In the Properties window, change the Content property to &ldquo;Aerial Mode&rdquo;.<\/span><\/li>\n<li><span style=\"font-size: small\">From the toolbox, drag and drop a new the Button control to the design surface.<\/span><\/li>\n<li><span style=\"font-size: small\">Click the Button control. In the Properties window, change the Content property to &ldquo;Zoom In&rdquo;.<\/span><\/li>\n<li><span style=\"font-size: small\">From the toolbox, drag and drop a new Button control to the design surface.<\/span><\/li>\n<li><span style=\"font-size: small\">Click the Button control. In the Properties window, change the Content property to &ldquo;Zoom Out&rdquo;.<\/span><\/li>\n<li><span style=\"font-size: small\">Add the following XAML code to set the height, width, and the alignment of the Map and the Button controls:\n<div id=\"codeSnippetWrapper\" style=\"text-align: left;line-height: 12pt;background-color: #f4f4f4;margin: 20px 0px 10px;width: 94.95%;font-family: 'Courier New', courier, monospace;direction: ltr;height: 109px;max-height: 200px;font-size: 8pt;overflow: auto;cursor: text;border: silver 1px solid;padding: 4px\">\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">&lt;<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">Grid<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> x<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">:<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\">Name<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;ContentPanel&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Grid.Row<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;1&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Margin<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;12,0,12,0&#8243;&gt;<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\"><span>&nbsp;&nbsp; <\/span><\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">&lt;<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">my<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">:<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">Map<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Height<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;462&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> HorizontalAlignment<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;Left&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Margin<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;6,6,0,0&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Name<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;map1&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> VerticalAlignment<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;Top&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Width<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;444&#8243; \/&gt;<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\"><span>&nbsp;&nbsp; <\/span><\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">&lt;<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">Button<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Content<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;Zoom In&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Height<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;72&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> HorizontalAlignment<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;Left&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Margin<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;6,535,0,0&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Name<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;buttonZoomIn&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> VerticalAlignment<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;Top&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Width<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;207&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> <\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">\/&gt;<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\"><span>&nbsp;&nbsp; <\/span><\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">&lt;<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">Button<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Content<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;Road Mode&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Height<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;72&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> HorizontalAlignment<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;Left&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Margin<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;6,474,0,0&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Name<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;buttonRoad&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> VerticalAlignment<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;Top&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Width<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;207&#8243; \/&gt;<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\"><span>&nbsp;&nbsp; <\/span><\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">&lt;<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">Button<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Content<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;Zoom Out&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Height<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;72&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> HorizontalAlignment<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;Left&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Margin<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;243,535,0,0&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Name<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;buttonZoomOut&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> VerticalAlignment<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;Top&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Width<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;207&#8243; \/&gt;<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\"><span>&nbsp;&nbsp; <\/span><\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">&lt;<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">Button<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Content<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;Aerial Mode&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Height<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;72&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> HorizontalAlignment<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;Left&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Margin<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;243,474,0,0&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Name<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;buttonAerial&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> VerticalAlignment<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;Top&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Width<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;207&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> <\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">\/&gt;<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">&lt;\/<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">Grid<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">&gt;<\/span><\/p>\n<\/div>\n<p><\/span><\/li>\n<\/ol>\n<p><span style=\"font-size: small\">Your application now looks like this:<br \/><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/vbteam\/wp-content\/uploads\/sites\/7\/2011\/03\/7573.Init_App.bmp\" border=\"0\" \/><\/span><\/p>\n<h3>Step 2 &ndash; Add event handlers<\/h3>\n<p><span style=\"font-size: small\">Adding event handlers is one of the important tasks. These event handlers are required to switch the map modes from aerial view to road view and vice versa when the appropriate button is clicked. <\/span><\/p>\n<p><span style=\"font-size: small\">To add the event handlers:<\/span><\/p>\n<ol>\n<li><span style=\"font-size: small\">Double-click the Road Mode button. The MainPage.xaml.vb page is displayed.<\/span><\/li>\n<li><span style=\"font-size: small\">Replace the buttonRoad_Click event handler with the following code:\n<div id=\"codeSnippetWrapper\" style=\"text-align: left;line-height: 12pt;background-color: #f4f4f4;margin: 20px 0px 10px;width: 95.49%;font-family: 'Courier New', courier, monospace;direction: ltr;height: 54px;max-height: 200px;font-size: 8pt;overflow: auto;cursor: text;border: silver 1px solid;padding: 4px\">\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">Private<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"> <span style=\"color: blue\">Sub<\/span> buttonRoad_Click(<span style=\"color: blue\">ByVal<\/span> sender <span style=\"color: blue\">As<\/span> <span style=\"color: blue\">Object<\/span>, <span style=\"color: blue\">ByVal<\/span> e <span style=\"color: blue\">As<\/span> <span style=\"color: #2b91af\">RoutedEventArgs<\/span>)<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp; <\/span>map1.Mode = <span style=\"color: blue\">New<\/span> <span style=\"color: #2b91af\">RoadMode<\/span>()<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">End<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"> <span style=\"color: blue\">Sub<\/span><\/span><\/p>\n<\/div>\n<p><\/span><\/li>\n<li><span style=\"font-size: small\">Open the MainPage.xaml page. Double-click the Aerial Mode button. The MainPage.xaml.vb page is displayed.<\/span><\/li>\n<li><span style=\"font-size: small\">Replace the buttonAerial_Click event handler with the following code:\n<div id=\"codeSnippetWrapper\" style=\"text-align: left;line-height: 12pt;background-color: #f4f4f4;margin: 20px 0px 10px;width: 95.31%;font-family: 'Courier New', courier, monospace;direction: ltr;height: 57px;max-height: 200px;font-size: 8pt;overflow: auto;cursor: text;border: silver 1px solid;padding: 4px\">\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">Private<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"> <span style=\"color: blue\">Sub<\/span> buttonAerial_Click(<span style=\"color: blue\">ByVal<\/span> sender <span style=\"color: blue\">As<\/span> <span style=\"color: blue\">Object<\/span>, <span style=\"color: blue\">ByVal<\/span> e <span style=\"color: blue\">As<\/span> <span style=\"color: #2b91af\">RoutedEventArgs<\/span>)<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp; <\/span>map1.Mode = <span style=\"color: blue\">New<\/span> <span style=\"color: #2b91af\">AerialMode<\/span>()<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">End<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"> <span style=\"color: blue\">Sub<\/span><\/span><\/p>\n<\/div>\n<p><\/span><\/li>\n<li><span style=\"font-size: small\">Open the MainPage.xaml page. Double-click the Zoom In button. The MainPage.xaml.vb page is displayed.<\/span><\/li>\n<li><span style=\"font-size: small\">Replace the buttonZoomIn_Click event handler with the following code:\n<div id=\"codeSnippetWrapper\" style=\"text-align: left;line-height: 12pt;background-color: #f4f4f4;margin: 20px 0px 10px;width: 95.07%;font-family: 'Courier New', courier, monospace;direction: ltr;height: 82px;max-height: 200px;font-size: 8pt;overflow: auto;cursor: text;border: silver 1px solid;padding: 4px\">\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">Private<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"> <span style=\"color: blue\">Sub<\/span> buttonZoomIn_Click(<span style=\"color: blue\">ByVal<\/span> sender <span style=\"color: blue\">As<\/span> <span style=\"color: blue\">Object<\/span>, <span style=\"color: blue\">ByVal<\/span> e <span style=\"color: blue\">As<\/span> <span style=\"color: #2b91af\">RoutedEventArgs<\/span>)<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp; <\/span><span style=\"color: blue\">Dim<\/span> zoom = map1.ZoomLevel<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp; <\/span>zoom += 1<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp; <\/span>map1.ZoomLevel = zoom<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">End<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"> <span style=\"color: blue\">Sub<\/span><\/span><\/p>\n<\/div>\n<p><\/span><\/li>\n<li><span style=\"font-size: small\">Open the MainPage.xaml page. Double-click the Zoom Out button. The MainPage.xaml.vb page is displayed.<\/span><\/li>\n<li><span style=\"font-size: small\">Replace the buttonZoomOut_Click event handler with the following code:\n<div id=\"codeSnippetWrapper\" style=\"text-align: left;line-height: 12pt;background-color: #f4f4f4;margin: 20px 0px 10px;width: 94.86%;font-family: 'Courier New', courier, monospace;direction: ltr;height: 80px;max-height: 200px;font-size: 8pt;overflow: auto;cursor: text;border: silver 1px solid;padding: 4px\">\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">Private<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"> <span style=\"color: blue\">Sub<\/span> buttonZoomOut_Click(<span style=\"color: blue\">ByVal<\/span> sender <span style=\"color: blue\">As<\/span> <span style=\"color: blue\">Object<\/span>, <span style=\"color: blue\">ByVal<\/span> e <span style=\"color: blue\">As<\/span> <span style=\"color: #2b91af\">RoutedEventArgs<\/span>)<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp; <\/span><span style=\"color: blue\">Dim<\/span> zoom = map1.ZoomLevel<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp; <\/span>zoom -= 1<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp; <\/span>map1.ZoomLevel = zoom<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">End<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"> <span style=\"color: blue\">Sub<\/span><\/span><\/p>\n<\/div>\n<p><\/span><\/li>\n<\/ol>\n<p><span style=\"font-size: small\">Now your Bing Maps application for Windows Phone 7 is ready! You just need to build and debug the application.<\/span><\/p>\n<h3>Step 3 &ndash; Build and debug the application<\/h3>\n<ol>\n<li><span style=\"font-size: small\">To build the application, select Build &gt; Build Solution. The project should build without any errors. <\/span><\/li>\n<li><span style=\"font-size: small\">To debug the application, set the deployment target of the application to &ldquo;Windows Phone 7 Emulator&rdquo;.<br \/><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/vbteam\/wp-content\/uploads\/sites\/7\/2011\/03\/8461.Debug_.gif\" border=\"0\" \/><\/span><\/li>\n<li><span style=\"font-size: small\">Select Debug &gt; Start Debugging. The emulator window is displayed. <br \/><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/vbteam\/wp-content\/uploads\/sites\/7\/2011\/03\/7485.Emulator.bmp\" width=\"254\" border=\"0\" height=\"590\" \/><\/span><\/li>\n<li><span style=\"font-size: small\">To test the aerial view, click the Aerial Mode button.<\/span><\/li>\n<li><span style=\"font-size: small\">To zoom in the map, click the Zoom In button.<\/span><\/li>\n<li><span style=\"font-size: small\">To zoom out and return to the initial map size, click the Zoom Out button.<\/span><\/li>\n<\/ol>\n<p><i><span style=\"font-size: small\">Note: To stop debugging the application, select Debug &gt; Stop Debugging.<\/span><\/i><\/p>\n<p><span style=\"font-size: small\">Your Bing Maps application for Windows Phone 7 is ready to be published into the marketplace. Now, you just need to rebuild your application for the release. <\/span><\/p>\n<h3>Step 4 &#8211; Rebuild in the release mode before publishing<\/h3>\n<ol>\n<li><span style=\"font-size: small\">On the standard toolbar, change the configuration manager to Release. <br \/><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/vbteam\/wp-content\/uploads\/sites\/7\/2011\/03\/4760.Release.bmp\" border=\"0\" \/><\/span><\/li>\n<li><span style=\"font-size: small\">To rebuild the application, select Build &gt; Rebuild. The XAP file of the application is generated, which is the package that you will have to submit in the marketplace to publish the application. You can also locate this XAP file in the BinRelease folder.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-size: small\">Finally, to submit your application to the market place, you can refer to <\/span><a href=\"http:\/\/create.msdn.com\/en-US\/home\/about\/app_submission_walkthrough_upload\"><span style=\"font-size: small\">upload your application walkthrough<\/span><\/a><span style=\"font-size: small\">.<\/span><\/p>\n<h3>Summary<\/h3>\n<p><span style=\"font-size: small\">That&rsquo;s it! We&rsquo;ve now seen that creating a Bing Maps application for Windows Phone 7 isn&rsquo;t that tough. In fact, you&rsquo;ve created it in just 4 simple steps! <\/span><\/p>\n<p><span style=\"font-size: small\">You can find the full source code for the application <\/span><a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/ff431744(v=VS.92).aspx\"><span style=\"font-size: small\">here<\/span><\/a><span style=\"font-size: small\">. <\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In our previous post, I explained how to create an application bar for Windows Phone 7. Bing Maps is one of the applications that is commonly used on phones these days. In this blog post, I want to share a sample that will help you to create a Bing Maps application for Windows Phone 7. [&hellip;]<\/p>\n","protected":false},"author":260,"featured_media":8818,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[195],"tags":[137,167,180],"class_list":["post-653","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-visual-basic","tag-silverlight","tag-vb2010","tag-windows-phone"],"acf":[],"blog_post_summary":"<p>In our previous post, I explained how to create an application bar for Windows Phone 7. Bing Maps is one of the applications that is commonly used on phones these days. In this blog post, I want to share a sample that will help you to create a Bing Maps application for Windows Phone 7. [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/posts\/653","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/users\/260"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/comments?post=653"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/posts\/653\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/media\/8818"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/media?parent=653"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/categories?post=653"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/tags?post=653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}