How can I add a thumbnail image to a Bing Map push

Question

I'm not certain about the terminology for the little window that pops out when you click a map marker/pushpin, but what I want to do with my Bing Map pushpin in this transitory window is display something like this when it is clicked/tapped:

My Dog Spot - miPerroMancha.png
{ the thumbnail here }
5/29/2013

elAmadoDeFresno.png
{ the thumbnail here }
10/19/2014

IOW, the "popup" should display:

The image description, if available, plus file name; otherwise, just the file name, 
The thumbnail version of the photo
The date the photo was taken

The marker will be pinned to the map at the location the photo was taken

The code I've got so far appears below. photraxMap is the name of the Bing Map; pbd is a class that contains information about the photo represented by the pushpin:

String fileNameOnly = Path.GetFileName(pbd.filePath);
Pushpin pushpin = new Pushpin();
if (null == pbd.imgDescription)
{
    pushpin.Text = fileNameOnly;
}
else
{
    pushpin.Text = String.Format("{0} - {1}", pbd.imgDescription, fileNameOnly);
}
MapLayer.SetPosition(pushpin, new Location(pbd.latitude, pbd.longitude));
photraxMap.Children.Add(pushpin);

So the text will be the same as what I want to appear first on the flyout/popup.

Surely there's a way to tap into what displays when the pushpin is pushed/clicked/tapped, but how? Intellisense didn't show me anything obvious that way. I am hoping the pushpin has some property to which I can assign HTML. Am I looking in the right direction, or barking up the wrong tree?

UPDATE

If this is not possible, then maybe what I need is a popup (or an "untethered flyout") that has noting directly to do with the Bing Map, but is invoked as a result of clicking the pushpin, and which will popup from that spot (with the upper-left corner of the popup/untethered flyout in the middle of the pushpin)

UPDATE 2

I worked through your article blog. It seems to work a treat, except for one thing: the infobox that pops up is dark gray and shows no data:

I did change the code a little, using a String and a DateTime instead of two strings:

// The next few methods derived from http://rbrundritt.wordpress.com/2013/06/17/infoboxes-for-native-windows-store-apps/
private void CloseInfobox_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
{
    Infobox.Visibility = Visibility.Collapsed;
}

// Does an inline class make the most sense here?
public class PushpinMetadata
{
    public string FileName { get; set; }
    public DateTime DateTimeTaken { get; set; }
    // TODO: Add a Bitmap for the Thumbnail
}

// TODO: Add the Bitmap/Thumbnail to the args and the class
public void AddPushpin(Location latlong, string fileName, DateTime dateTimeTaken,  MapLayer layer)
{
    Pushpin p = new Pushpin()
    {
        Tag = new PushpinMetadata()
        {
            FileName = fileName,
            DateTimeTaken = dateTimeTaken // add Thumbnail = thumbnail
        }
    };

    MapLayer.SetPosition(p, latlong);

    p.Tapped += PinTapped;

    layer.Children.Add(p);
}

private void PinTapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
{
    Pushpin p = sender as Pushpin;
    PushpinMetadata m = (PushpinMetadata)p.Tag;

    //Ensure there is content to be displayed before modifying the infobox control
    if (!String.IsNullOrEmpty(m.FileName) || (null != m.DateTimeTaken))
    {
        Infobox.DataContext = m;

        Infobox.Visibility = Visibility.Visible;

        MapLayer.SetPosition(Infobox, MapLayer.GetPosition(p));
    }
    else
    {
        Infobox.Visibility = Visibility.Collapsed;
    }
}

Do I need to stick with two Strings, passing DateTime.ToString()? Or is there some other problem?

UPDATE 3

My bad - it was the XAML that I had failed to updated; I changed the names of the members of the class, and forgot to change the Binding statements in the XAML. Now it works (except for the bitmap - still don't know how to squeeze it into there / convert it from a byte array to a BitmapImage)

Answer 1

It looks like you are trying to create an infobox (tooltip), that shows a panel above your pushpin and contains some information. This is fairly easy to do and is something I have written about many times in blogs and in my book. Here is a blog post on to do this: http://rbrundritt.wordpress.com/2013/06/17/infoboxes-for-native-windows-store-apps/

You might also be interested in my free ebook on creating location intelligent Windows Store apps. You can download a copy of it here: http://rbrundritt.wordpress.com/my-book/