Windows Phone BING Map Control

we are going to see the most useful control in Windows Phone 7 development, it is obviously the BING Map Control.


The BING Map control in Windows Phone 7 application development is derived from the name
spaces Microsoft.Phone.Controls and Microsoft.Phone.Controls.Maps. We All need to register
for a BING Map developers account to get the keys which are used in developing an application with
the Bing Maps.
in this application i used my own key

AhlIQ8LF2Oe3_rEydhw-IZtxG6lGthdsnQpCeB_OhpM410qhMntZmvp-QPe36ElZ  

please use yours  own key .
please visit http://www.bingmapsportal.com/  for the key.

Make a new project with the name BingMapControl.

1) Create a following layout to yours MainPage.xaml


<phone:PhoneApplicationPage xmlns:my1="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"  
    x:Class="BingMapControl.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True"
    xmlns:my="clrnamespace: Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
    Loaded="PhoneApplicationPage_Loaded">
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="Observe Bing Maps" Style="{StaticResource
PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Bing Maps" Margin="9,-7,0,0" Style="{StaticResource
PhoneTextTitle1Style}"/>
        </StackPanel>
        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <my1:Map Height="523" CredentialsProvider="AhlIQ8LF2Oe3_rEydhw-IZtxG6lGthdsnQpCeB_OhpM410qhMntZmvp-QPe36ElZ" HorizontalAlignment="Left" Margin="6,6,0,0"
Name="map1" VerticalAlignment="Top" Width="444" />
        </Grid>
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar.share.rest.png" Text="Road View"
Click="ApplicationBarIconButton_Click"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar.feature.video.rest.png" Text="Aerial
View" Click="ApplicationBarIconButton_Click_1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar.back.rest.png" Text="Zoom In"
Click="ApplicationBarIconButton_Click_2"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar.next.rest.png" Text="Zoom Out"
Click="ApplicationBarIconButton_Click_3"/>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>

2)  MainPage.xaml .cs code is represented here


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Controls.Maps;

namespace BingMapControl
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }
        private void ApplicationBarIconButton_Click(object sender, EventArgs e)
        {
            map1.Mode = new RoadMode();
        }
        private void ApplicationBarIconButton_Click_1(object sender, EventArgs e)
        {
            map1.Mode = new AerialMode();
        }
        private void ApplicationBarIconButton_Click_2(object sender, EventArgs e)
        {
            double dbZoom;
            dbZoom = map1.ZoomLevel;
            map1.ZoomLevel = ++dbZoom;
        }
        private void ApplicationBarIconButton_Click_3(object sender, EventArgs e)
        {
            double dbZoom;
            dbZoom = map1.ZoomLevel;
            map1.ZoomLevel = --dbZoom;
        }
        int intcount = 0;
        private void map1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            intcount = intcount + 1;
            Pushpin pn = new Pushpin();
            pn.Location = map1.ViewportPointToLocation(e.GetPosition(sender as Map));
            pn.Content = "Location" + intcount;
            (sender as Map).Children.Add(pn);
        }
        private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e) { }
    }
}

3) hit the menu buttons after running the application you can observe things respectively :)