articles

Map Control in Windows 7 Phone Development

Anonymous User 9379 12-Apr-2012

The Bing Maps Silverlight Control for Windows Phone allows developers to provide an enhanced mapping experience within their Windows Phone applications to end users. This article is going to explain how to use Bing Map control in windows 7 phone development or Windows 7 phone application. Let’s see a brief demonstration on it.

Getting started:

1.       Open Visual Studio

2.       Create new Silverlight Windows 7 Phone Development Project

3.       Enter your project Name

4.       Click on button ‘Ok’

Map Control in Windows 7 Phone Development

Now drag and drop Map control form toolbox into MainPage.xaml design page and write down the following code:

Map Control in Windows 7 Phone Development

Code of ‘MainPage.xaml’ file:
<!--LayoutRoot
is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="#FF2D747A">
        <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="My Application" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Map Demo" 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">
            <my:Map Height="338" HorizontalAlignment="Left" Margin="34,30,0,0" Name="mapDemo" VerticalAlignment="Top" Width="380" Background="#FF47E8C3" />
            <Button Content="Road Mode" Height="96" HorizontalAlignment="Left" Margin="16,414,0,0" Name="btnRoad" VerticalAlignment="Top" Width="206" Click="btnRoad_Click" Background="#FF7C4B5E" />
            <Button Content="Aerial Mode" Height="96" HorizontalAlignment="Left" Margin="226,416,0,0" Name="btnAerial" VerticalAlignment="Top" Width="202" Background="#FF7C4B5E" Click="btnAerial_Click" />
            <Button Content="Zoom In" Height="97" HorizontalAlignment="Left" Margin="12,510,0,0" Name="btnZoomIn" VerticalAlignment="Top" Width="206" Click="btnZoomIn_Click" Background="#FF7C4B5E" />
            <Button Content="Zoom Out" Height="95" HorizontalAlignment="Left" Margin="226,512,0,0" Name="btnZoomOut" VerticalAlignment="Top" Width="202" Click="btnZoomOut_Click" Background="#FF7C4B5E" />
        </Grid>
    </Grid>


Code of ‘MainPage.xaml.cs’ file:

using System.Windows;

using Microsoft.Phone.Controls;

using Microsoft.Phone.Controls.Maps;

 

namespace MapDemo

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

        }

 

        private void btnRoad_Click(objectsender, RoutedEventArgse)

        {

            mapDemo.Mode=new RoadMode();

        }

 

        private void btnAerial_Click(objectsender, RoutedEventArgse)

        {

            mapDemo.Mode=new AerialMode();

        }

 

        private void btnZoomIn_Click(objectsender, RoutedEventArgse)

        {

            mapDemo.ZoomLevel+=1;

        }

 

        private void btnZoomOut_Click(objectsender, RoutedEventArgse)

        {

            mapDemo.ZoomLevel-=1;

        }

 

    }

}

Now execute your application then following output will be appearing;



Map Control in Windows 7 Phone Development

Now just click on button ‘Aerial Mode’ to see map in aerial mode.

Map Control in Windows 7 Phone Development

To maximize or minimize the map; just click on the button ‘Zoom In’ or ‘Zoom Out’;

Map Control in Windows 7 Phone Development

This is the complete description of Map Control in Windows 7 Phone development.  I hope you will enjoy it. Thanks for reading this article.



Updated 13-Nov-2019
I am a content writter !

Leave Comment

Comments

Liked By