In this article we are going to see how to programmatically specify the Zoom levels to zoom in and zoom out the maps in Windows Phone application development. To get some basics about maps please refer to my previous article on How to use Maps in Windows Phone application. Map control has the property called ZoomLevel which is used to specify the level of zoom that the maps should take up. This property accepts the zoom level from 1 to 20 of which 1 will fully zoom the map and increasing the number will provide higher zoom levels with higher resolutions. Let us see the steps on how to achieve this task in our Windows Phone application development. Open Visual Studio 2012 IDE and create a new Windows Phone project with a valid project name as shown in the screen below.     [more]

Clicking on OK will create the project and the solution with the list of default files and folders that are required to run the application. It will take some time to create these files based on your system configuration, so once everything is ready we can see the Visual Studio IDE with the project as shown in the screen below.

Let us add some controls to trigger the Zoom In and Zoom out of the maps with the button click event, basically we will add 2 button controls and a Maps control from the tool box as shown in the screen below.

XAML Code:

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="F5debug How to Series" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Zoom Maps" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <Button Content="Zoom In" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="175" Click="Button_Click"/>
            <Button Content="Zoom Out" HorizontalAlignment="Left" Margin="271,10,0,0" VerticalAlignment="Top" Width="175" Click="Button_Click"/>

            <maps:Map HorizontalAlignment="Left" Margin="23,102,0,0" VerticalAlignment="Top" Height="479" Width="402"/>

        </Grid>

In the Zoom in and Zoom out button click events write the below code which is a basic code to zoom in and zoom out, in real time you need to handle the code so that the Zoom level should not exceed between 1 to 20 as the property can accept only the limit specified.

C# Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using F5debugHowto70.Resources;

namespace F5debugHowto70
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }
       
        private void Button1_Click(object sender, RoutedEventArgs e)
        {
            mymaps.Center = new System.Device.Location.GeoCoordinate(12.9833, 77.5833);
            mymaps.ZoomLevel = 1;
        }

        private void Button2_Click(object sender, RoutedEventArgs e)
        {
            mymaps.Center = new System.Device.Location.GeoCoordinate(12.9833, 77.5833);
            mymaps.ZoomLevel = 10;
        }     
    }
}

Now we are done with the code, just run the application by pressing F5 directly from the keyboard or we can use the Build and execute the project option from the tool bar to run the application. Once the Build is successful we can see the Windows Phone emulator with the application and the expected outputs as shown in the screen below.