title: How do I create a custom pushpin with image, label, and click event?
body: <p>I am working on a location aware app, where I want to have custom pushpins that have an image, and when you tap the image, a label is added.  I have tried a couple of solutions... </p>
  
  <p>I started with this code, from this article: <a href="http://igrali.wordpress.com/2011/12/06/making-a-custom-windows-phone-bing-pushpin-from-an-image/" rel="nofollow">http://igrali.wordpress.com/2011/12/06/making-a-custom-windows-phone-bing-pushpin-from-an-image/</a></p>
  
  <pre><code>&lt;ControlTemplate
          x:Key="PushpinMe"
          TargetType="maps:Pushpin"&gt;
          &lt;Grid
              Name="PushpinMeGrid"
              Height="50"
              Width="50"
              HorizontalAlignment="Center"
              VerticalAlignment="Center"&gt;
              &lt;Image
                      x:Name="PushpinMeImage"
                      Height="50"
                      Width="50"
                      Source="Pushpins/pushpinSeaplane.png" /&gt;
              &lt;TextBlock Text="{Binding Source=}"
          &lt;/Grid&gt;
      &lt;/ControlTemplate&gt;
  </code></pre>
  
  <p>Then I tried wrapping the image in a button, but that just made the pushpin essentially invisible.  Then I tried using a control template from one of my prior apps, and modified it, and came up with this:</p>
  
  <p></p>
  
  <pre><code>        &lt;Button
              Name="PushpinButton"
              Click="Button_Click"&gt;
              &lt;Button.Style&gt;
                  &lt;Style
                      TargetType="Button"&gt;
                      &lt;Setter
                          Property="Template"&gt;
                          &lt;Setter.Value&gt;
                              &lt;ControlTemplate
                                  TargetType="Button"&gt;
                                  &lt;Grid&gt;
                                      &lt;Grid.ColumnDefinitions&gt;
                                          &lt;ColumnDefinition
                                              Width="*" /&gt;
                                          &lt;ColumnDefinition
                                              Width="*" /&gt;
                                      &lt;/Grid.ColumnDefinitions&gt;
                                      &lt;Image
                                          Grid.Column="0"
                                          Grid.Row="0"
                                          Grid.RowSpan="2"
                                          Height="50"
                                          Width="50"
                                          Source="Pushpins/pushpinSeaplane.png" /&gt;
  
                                      &lt;Grid
                                          Grid.Column="1"&gt;
  
                                          &lt;Grid.RowDefinitions&gt;
                                              &lt;RowDefinition
                                                  Height="39" /&gt;
                                              &lt;RowDefinition
                                                  Height="*" /&gt;
                                          &lt;/Grid.RowDefinitions&gt;
  
                                          &lt;Grid
                                              Grid.Row="0"
                                              Background="Black"&gt;
                                              &lt;TextBlock
                                                  Grid.Row="0"
                                                  Foreground="White"
                                                  Text="{Binding ElementName=me,
                                                    Path=Content}"
                                                  TextWrapping="Wrap"
                                                  Margin="5" /&gt;
                                          &lt;/Grid&gt;
                                      &lt;/Grid&gt;
                                  &lt;/Grid&gt;
                              &lt;/ControlTemplate&gt;
                          &lt;/Setter.Value&gt;
                      &lt;/Setter&gt;
                  &lt;/Style&gt;
              &lt;/Button.Style&gt;
          &lt;/Button&gt;
  
      &lt;/ControlTemplate&gt;
  </code></pre>
  
  <p>Still not a winner - I can't bind the content of the button, and therefore the textblock.</p>
  
  <p>There will be a series of pushpins, with different images, and different labels, so ideally, I would like to come up with a template that I can use, and bind the image and the label from code.  The code for the button's click event would be as simple as making the textblock visible or collapsed.</p>
  
  <p>I know my second example is pretty ugly, but I was trying to make the visual look right - I'll modify it as needed for the visuals, but for the moment, I need to figure out how I can bind the image and the text from code.  The button click event works with just a messagebox for now (to show that it registered the click event).</p>
  
  <p>Thanks for your assistance.</p>