In my previous post I described how to add multiple locations on the Bing Map by fetching the data from a XML file. In this article I will describe how to resize the Pushpin and change the default color.

I assume here that you have gone through my previous post “Bing Maps Binding XML Data Source”.

In the previous post pushpin was defined as following:

<m:Pushpin m:MapLayer.Position="{Binding Location}" >
      <ToolTipService.ToolTip >
            <TextBlock Text="{Binding CustomerName}"></TextBlock>
      </ToolTipService.ToolTip>
 </m:Pushpin>

When there are number of puspins on the Map, the size of the pushpin appears to be very large. So how do we change the size. First thing come to our mind is to change the Pushpin.Height and Pushpin.Width properties.But it doesn't work because those properties pertain to the controls Content property.

To make the size smaller add following inside the pushpin tag:

<m:Pushpin.RenderTransform> 
      <ScaleTransform ScaleX=".25" ScaleY=".25" CenterX="17" 
            CenterY="35">
      </ScaleTransform>
</m:Pushpin.RenderTransform>

Here we defined ScaleX and ScaleY to resize the pushpin.

You may have noticed along with ScaleX and ScaleY properties of the ScaleTransform the CenterX and CenterY are also set. This is because if we don't set the CenterX and CenterY appropriately the Pushpin will get "moved" from its correct location when the Transform is performed.

How did I decide to set CenterX to 17 and CenterY to 35? Well, the Pushpins "default" size sets the Width equal to 34 and Height to 35, and the PositionOrigin to BottomCenter. Since the PositionOrigin is set to BottomCenter, in order to get the pushpin to stay in its correct position on the map we need to set the CenterX to half the Width or 17, and CenterY to the Height or 35.

Now if you want to change the default color which is Red of the pushpin, then define Background property.

So the complete Pushpin tag appears as following:

<m:Pushpin m:MapLayer.Position="{Binding Location}" Background="Blue" >
	<m:Pushpin.RenderTransform> 
            <ScaleTransform ScaleX=".25" ScaleY=".25" CenterX="17" 
                  CenterY="35"></ScaleTransform>
            </m:Pushpin.RenderTransform>
	<ToolTipService.ToolTip >
                  <TextBlock Text="{Binding CustomerName}"></TextBlock>
	</ToolTipService.ToolTip>
 </m:Pushpin>

If you want to make the size bigger and show some text on the pushpin(in the circle of pushpin) add following:

<m:Pushpin.Content>
  	 <TextBlock x:Name="txtCustId" FontSize="7" Text="{Binding CustomerId}" 
  	   	 Margin="2,2,2,2"></TextBlock> 
</m:Pushpin.Content>
<m:Pushpin.RenderTransform> 
  	 <ScaleTransform ScaleX="2" ScaleY="2" CenterX="17" 
  	   	 CenterY="35">
  	 </ScaleTransform>
</m:Pushpin.RenderTransform>

See the image below:

You can modify the Tool Tip as following to show more data about the customer:

<ToolTipService.ToolTip >
<Border MinHeight="40" MaxHeight="250" Margin="-10,-5,-10,-5"
           MinWidth="150" Background="WhiteSmoke"
           Opacity="1" VerticalAlignment="Top"
           BorderBrush="Black" BorderThickness="1" CornerRadius="10" >
      <StackPanel>
         <Grid >
           <Grid.RowDefinitions>
           		<RowDefinition Height="*" />
           		<RowDefinition Height="*" />
           		<RowDefinition Height="*" />
           		<RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="*" />
                   <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
<TextBlock Text="Customer Id:"  Grid.Column="0" Grid.Row="0" Margin="2,2,2,2"></TextBlock>
<TextBlock x:Name="txtCustomerId" Grid.Column="1" Grid.Row="0" 
Text="{Binding CustomerId}" Margin="2,2,2,2"></TextBlock>
<TextBlock Text="Customer Name:" Grid.Column="0" Grid.Row="1" 
Margin="2,2,2,2"></TextBlock>
<TextBlock x:Name="txtCustomerName" Grid.Column="1" Grid.Row="1" 
Text="{Binding CustomerName}" Margin="2,2,2,2"></TextBlock>
<TextBlock Text="Latitude:" Grid.Column="0" Grid.Row="2" Margin="2,2,2,2"></TextBlock>
<TextBlock x:Name="txtLatLocation"  Grid.Column="1" Grid.Row="2" 
Text="{Binding Location.Latitude}" Margin="2,2,2,2"></TextBlock>
<TextBlock Text="Longitude:" Grid.Column="0" Grid.Row="3" Margin="2,2,2,2"></TextBlock>
<TextBlock x:Name="txtLongLocation" Grid.Column="1" Grid.Row="3" 
Text="{Binding Location.Longitude}" Margin="2,2,2,2"></TextBlock>
         </Grid>
       </StackPanel>
</Border>
</ToolTipService.ToolTip>

So till now we saw how to add multiple pushpins on the Bing Map via XML Data Source, how to resize the Pushpin. In the next article we will see how to add pushpins on the map via getting data from SQL Server Database….