Windows Phone Toolkit y el Control de Mapas

En el post anterior vimos un inicio de como utilizar el control mapas de Nokia para Windows Phone8, en este post añadiremos Windows Phone Toolkit

Para aquellos que no conozcáis Windows Phone Toolkit, este es un conjunto de herramientas y controles extra desarrollados por Microsoft y Open Source alojados en codeplex, concretamente en http://phone.codeplex.com/.

A la hora de utilizarlo en un proyecto nos serviremos de Nuget, haremos click derecho sobre el proyecto o solución > Administrar paquetes Nugget y buscar el Windows Phone Toolkit.

imageimage

Una vez instalado para su utilización deberemos importar su espacio de nombres

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

 

Una vez importado puedes utilizar en la pagina sus controles que son

 

con esto ya se tienen disponibles los todos los controles del toolkit, los cuales son:

  • AutoCompleteBox

  • ContextMenu

  • CustomMessageBox

  • DateTimeConverters

  • DateTimePickers

  • Effects – SlideInEffect, TiltEffect and TurnstileFeatherEffect

  • ExpanderView

  • HubTile

  • ListPicker

  • LongListMultiSelector

  • Map extensions

  • PhoneTextBox

  • RatingControl

  • ToggleSwitch

  • Navigation transitions

  • WrapPanel

  • LongListSelector for 7.x

  • MultiSelect for 7.x

En este caso vamos a ver la extension de mapas, para ello debemos importar su espacio de nombres

xmlns:toolkit="clr-namespace:Microsoft.Phone.Maps.Toolkit;assembly=Microsoft.Phone.Controls.Toolkit"

Como podéis ver en este using estamos importando el espacio de nombres de Mapas del Toolkit y vamos a ver los controles UserLocationMarker y

Pushpin, ambos son un capa de pushpinss personalizados como los que vimos en el anterior post que podíamos hacer con la clase MapOverlay cada uno con su look y destinado a utilizarse para diferentes casos.

 

  • Pushpin: tiene el mismo look & feel que el viejo Bing Maps y se utiliza para señalar puntos de interés en el mapa
  • UserLocationMarker: es usado para identificar la posición del usuario y tiene el mismo look & feel que el usado en la aplicación nativa.

Usarlos es tan sencillo como el siguiente trozo de código

        <Controls:Map x:Name="map"
                      Center="43.2566901,-2.92406159"
                      ZoomLevel="15"
                      Pitch="8"
                      PedestrianFeaturesEnabled="True"
                      LandmarksEnabled="True"
                      Grid.Row="1">
            <toolkit:MapExtensions.Children>
                <toolkit:UserLocationMarker x:Name="UserLocationMarker" />
                <toolkit:Pushpin x:Name="MyPushpin" Content="Posición">
                </toolkit:Pushpin>
            </toolkit:MapExtensions.Children>
        </Controls:Map>
    

Si queremos trabajar con ellos desde el code-behind para enviar un posicionamiento en el mapa y lo marque utilizaremos el siguiente código

        private void CreatePushPins()
        {
            Pushpin pushpin = null;
            UserLocationMarker marker = null;

            ObservableCollection<DependencyObject> children = MapExtensions.GetChildren(map);
            pushpin = children.FirstOrDefault(x => x.GetType() == typeof(Pushpin)) as Pushpin;
            marker = children.FirstOrDefault(x => x.GetType() == typeof(UserLocationMarker)) as UserLocationMarker;
            pushpin.GeoCoordinate = new GeoCoordinate(43.2576901, -2.9250616);
            marker.GeoCoordinate = map.Center;
        }

Como veis a través del método MapExtensions.GetChildren me devuelve todos los objetos creados en el mapa y luego a través de LinQ los recupero por tipo, en este caso, solo el primero de cada tipo porque podemos tener múltiples, a partir de ahí les asigno las coordenadas en las cuales los quiero mostrar, siendo la localización del usuario el centro del mapa y el PushPin una posición al lado como se ve en la imagen

image

 

 

Si lo que queremos es mostrar una serie de lugares a partir de una lista de coordenadas que tengo por ejemplo de restaurantes utilizaremos el siguiente XAML

            <toolkit:MapExtensions.Children>
                <toolkit:MapItemsControl>
                    <toolkit:MapItemsControl.ItemTemplate>
                        <DataTemplate>
                            <toolkit:Pushpin GeoCoordinate="{Binding Coordenada}" Content="{Binding Informacion}" />
                        </DataTemplate>
                    </toolkit:MapItemsControl.ItemTemplate>
                </toolkit:MapItemsControl>
            </toolkit:MapExtensions.Children>

 

Nuestro siguiente paso es crear la clase donde vamos a tener los datos con los que realizamos el binding, como por ejemplo

    public class Lugar
    {
        public GeoCoordinate Coordenada { get; set; }
        public string Informacion { get; set; }      
    }

Rellenaríamos los datos que queremos mostrar

 

private void CrearLugares()
        {
            lugares.Add(new Lugar()
            {
                Coordenada = new GeoCoordinate(43.2566901, -2.92406159),
                Informacion = "Restaurante 1"
            });
            lugares.Add(new Lugar()
            {
                Coordenada = new GeoCoordinate(43.2576901, -2.93406159),
                Informacion = "Restaurante 2"
            });
            lugares.Add(new Lugar()
            {
                Coordenada = new GeoCoordinate(43.2526901, -2.93406159),
                Informacion = "Restaurante 3"
            });
        }

Y ya nos queda el último paso que es asignar la lista de lugares al objeto MapItemsControl, con estas tres líneas de código

 private void CreatePushPins()
        {

            ObservableCollection<DependencyObject> children = MapExtensions.GetChildren(map);
            var obj = children.FirstOrDefault(x => x.GetType() == typeof(MapItemsControl)) as MapItemsControl;

            obj.ItemsSource = lugares;
        }

 

El resultado es

 

image

 

Podéis descargar el ejemplo desde el siguiente enlace

descargar-ejemplo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *