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’
Now drag and drop Map control form toolbox into MainPage.xaml design page and write down the following code:
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;
Now just click on button ‘Aerial Mode’ to see map in aerial mode.
To maximize or minimize the map; just click on the button ‘Zoom In’ or ‘Zoom Out’;
This is the complete description of Map Control in Windows 7 Phone development. I hope you will enjoy it. Thanks for reading this article.
Leave Comment