Personalizando la apariencia de los marcadores en un Mapa de Bing en Windows Phone

Continuando en esto de aprender a añadir funcionalidades a los mapas de Bing, ahora vamos a darle un toque personal a los marcadores o pushpin que colocamos en el mapa.

Si bien podemos hacerlo manualmente a través de Visual Studio, vamos a ayudarnos más usando Expressión Blend. Recuerda que desde Visual Studio puedes abrir tu proyecto en Expression Blend, solo con un clic derecho sobre el nombre del proyecto y dando seleccionando abrir.

Cuando nuestro proyecto se abra buscamos en la lista de controles el Pushpin y lo añadimos sobre el mapa.

Ajustamos el tamaño del pushpin al de la imagen que tenemos para personalizarlo

Damos clic derecho sobre el pushpin o marcador para editar su plantilla asociada

Se asigna un nombre a la copia de la plantilla y si han seguido los pasos hasta este momento deberán tener un diccionario de recursos en su aplicación

Al entrar a la edición de nuestro marcador agregamos un Grid o Canvas si es que queremos ubicar más controles dentro en una posición determinada

Luego establecemos su apariencia, en mi caso usaré una imagen personalizada

Si deseamos que el texto de la propiedad Content del Pushpin se muestre debemos añadir un ContentPresenter 

Podemos ir a la vista de diseño para ver como queda, sin embargo allí mismo removeremos este marcador ya que los marcadores los crearemos en tiempo de ejecución

Guardamos en Expression Blend y podemos volver a Visual Studio. Buscamos el lugar donde estamos instanciando nuestro pushpin en el post anterior y allí añadimos la linea que asigna al marcador la plantilla que creamos.

 void watcher_PositionChanged(object sender, GeoPositionChangedEventArgs<GeoCoordinate> e)  
     {  
       if (actualPosition != null)  
         map1.Children.Remove(actualPosition);  
   
       actualPosition = new Pushpin();  
       actualPosition.Template = (ControlTemplate)(App.Current.Resources["PushpinActualPosition"]);  
       actualPosition.Location = e.Position.Location;  
       actualPosition.Content = "Me";  
       map1.Children.Add(actualPosition);  
   
       map1.SetView(actualPosition.Location, 10);  
     }  

Probamos nuestra aplicación y ya tenemos nuestro marcador o pushpin personalizado

Espero que este post les allá gustado y vean los fácil que es crear nuestras propias plantillas en Expression Blend.

Hasta el próximo post.

Sorey