How to animate a Map! :)

The following example displays a map with default center and zoom level. When you click the Change button in the app bar, it displays a map with a new center and zoom level. When you click the Animate button, the map animates to a new center and zoom level.

This is the XAML code behind the animated map:

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>

   <!--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="Maps" Style="{StaticResource PhoneTextNormalStyle}"/>
      <TextBlock x:Name="PageTitle" Text="MapView" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

   <!--ContentPanel - place additional content here-->
   <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
      <maps:Map x:Name="MyMap"  Center="13.0810, 80.2740" ZoomLevel="10"/>

<!--Sample code showing usage of ApplicationBar-->
   <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
      <shell:ApplicationBarIconButton x:Name="BtnZoom"  IconUri="/Images/appbar_button2.png" Text="Change" Click="OnCenterZoom_Click"/>
      <shell:ApplicationBarIconButton x:Name="BtnCenter"  IconUri="/Images/appbar_button1.png" Text="Animate" Click="OnAnimate_Click"/>

While this is the C# code:

void OnCenterZoom_Click(object sender, EventArgs args)
   MyMap.Center = new GeoCoordinate(47.6097, -122.3331);
   MyMap.ZoomLevel = 18;

void OnAnimate_Click(object sender, EventArgs args)
   MyMap.SetView(new GeoCoordinate(47.6097, -122.3331), 15, MapAnimationKind.Parabolic);


Happy coding! 🙂


Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:


Stai commentando usando il tuo account Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati derivati dai commenti.