×
Namespaces

Variants
Actions

Customized PushPin without WP8 toolkit PushPin Control

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to create custom PushPin without using the Windows Phone 8 ToolKit PushPin control.

SignpostIcon HereMaps 99.png
WP Metro Icon WP8.png
Article Metadata
Code ExampleCompatibility
Platform(s):
Windows Phone 8
Article
Created: munjalrohit (13 Sep 2013)
Last edited: BuildNokia (13 Jun 2014)

Introduction

A map "pushpin" is an overlay element that is placed on a map over a specific position, and which can be used to interact with the map - for example a user can press on it to find more information, or to initiate navigation to it. There is a useful Pushpin class in the The Windows Phone Toolkit which is normally used for this purpose.

The code example demonstrates how to create custom PushPin without using Windows Phone ToolKit Pushpin control. This is useful when you want to create a Pushpin at any geocoordinate having functionality of OnClick hide/show ToolTip

Custom Pushpin

Implementation

This UserControlLayOut is a usercontrol which contains the pushpin icon with tooltip which is hide/show at pin tap. It is called at run time (dynamically).

<Grid x:Name="LayoutRoot" Background="Transparent">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<Border Background="#F22E42" CornerRadius="10" Height="105" Width="250" x:Name="imgborder" HorizontalAlignment="Center" >
 
<TextBlock x:Name="Lbltext"
FontSize="20" Foreground="White" Text="This is Description on ToolTip" TextWrapping="Wrap" Margin="5,5,5,5" />
 
 
</Border>
<Path Data="M0,0 L0,1 L1,0"
Fill="#F22E42"
Stretch="Fill"
Margin="32,0"
Height="12"
Width="18"
HorizontalAlignment="Left" x:Name="imgpath" />
<Image Source="/Images/icons-marker.png" Stretch="None" x:Name="imgmarker" HorizontalAlignment="Left" Tap="imgmarker_Tap"/>
</StackPanel>
</Grid>

Code behind:

namespace CustomPushPinWithToolTip
{
public partial class UCCustomToolTip : UserControl
{
private string _description;
 
public string Description
{
get { return _description; }
set { _description = value; }
}
 
public UCCustomToolTip()
{
InitializeComponent();
Loaded += UCCustomToolTip_Loaded;
}
 
void UCCustomToolTip_Loaded(object sender, RoutedEventArgs e)
{
Lbltext.Text = Description;
}
public void FillDescription()
{
Lbltext.Text = Description;
 
}
 
private void imgmarker_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
 
if (imgpath.Opacity == 0)
{
imgpath.Opacity = 1;
imgborder.Opacity = 1;
}
else
{
imgpath.Opacity = 0;
imgborder.Opacity = 0;
}
}
}
}

Layout for MainPage :

<Grid x:Name="LayoutRoot">
<Grid.Background>
<ImageBrush ImageSource="/Images/bg-grey.png" Stretch="Fill" />
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="10*"/>
<RowDefinition Height="90*"/>
 
</Grid.RowDefinitions>
 
<Grid x:Name="grdTitle" Grid.Row="0">
<TextBlock TextWrapping="Wrap" Grid.Column="0" Text="PushPin Sample" FontSize="26.667" Foreground="#FF0C0B0B" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
 
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<maps:Map Height="600" Grid.Row="1" x:Name="mymap" Margin="0" ZoomLevel="16">
<maptk:MapExtensions.Children>
 
</maptk:MapExtensions.Children>
</maps:Map>
</Grid>
</Grid>

Code-behind for Main Page :

namespace CustomPushPinWithToolTip
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
GeoCoordinate currentLocation = null;
UCCustomToolTip _tooltip = new UCCustomToolTip();
public MainPage()
{
InitializeComponent();
GetLocation();
}
 
 
private async void GetLocation()
{
// Get current location.
Geolocator myGeolocator = new Geolocator();
Geoposition myGeoposition = await myGeolocator.GetGeopositionAsync(maximumAge: TimeSpan.FromMinutes(5), timeout: TimeSpan.FromSeconds(10));
Geocoordinate myGeocoordinate = myGeoposition.Coordinate;
currentLocation = CoordinateConverter.ConvertGeocoordinate(myGeocoordinate);
MapDisplay(currentLocation);
 
}
 
private void MapDisplay(GeoCoordinate LocationsData)
{
ReverseGeocodeQuery Query = new ReverseGeocodeQuery()
{
GeoCoordinate = new GeoCoordinate(LocationsData.Latitude, LocationsData.Longitude)
};
Query.QueryCompleted += Query_QueryCompleted;
Query.QueryAsync();
 
MapOverlay mylocationOverlay = new MapOverlay();
mylocationOverlay.Content = _tooltip;
mylocationOverlay.GeoCoordinate = LocationsData;
MapLayer myLocationLayer = new MapLayer();
myLocationLayer.Add(mylocationOverlay);
mymap.Layers.Add(myLocationLayer);
mymap.Center = LocationsData;
}
 
void Query_QueryCompleted(object sender, QueryCompletedEventArgs<IList<MapLocation>> e)
{
_tooltip.Description = "";
StringBuilder _description = new StringBuilder();
foreach (var item in e.Result)
{
if (!(item.Information.Address.BuildingName == ""))
{
_description.Append(item.Information.Address.BuildingName + ", ");
 
}
if (!(item.Information.Address.BuildingFloor == ""))
{
_description.Append(item.Information.Address.BuildingFloor + ", ");
 
}
if (!(item.Information.Address.Street == ""))
{
_description.Append(item.Information.Address.Street + ", ");
 
}
if (!(item.Information.Address.District == ""))
{
_description.Append(item.Information.Address.District + ",");
 
}
if (!(item.Information.Address.City == ""))
{
_description.Append(item.Information.Address.City + ", ");
 
}
if (!(item.Information.Address.State == ""))
{
_description.Append(item.Information.Address.State + ", ");
 
}
if (!(item.Information.Address.Street == ""))
{
_description.Append(item.Information.Address.Street + ", ");
 
}
if (!(item.Information.Address.Country == ""))
{
_description.Append(item.Information.Address.Country + ", ");
 
}
 
if (!(item.Information.Address.Province == ""))
{
_description.Append(item.Information.Address.Province + ", ");
 
}
if (!(item.Information.Address.PostalCode == ""))
{
_description.Append(item.Information.Address.PostalCode);
 
}
 
_tooltip.Description = _description.ToString();
_tooltip.FillDescription();
break;
}
}
 
}
}

Summary

The code example shows how to create a custom Pushpin without using the WP8 toolkit PushPin control. Hope you find this article useful and it helps you to make your pushpin customizable in your Windows Phone 8 application.


You can download source code from here: File:CustomPushPinWithToolTip.zip

This page was last modified on 13 June 2014, at 02:03.
3679 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×