如何将缩略图图像添加到Bing Map图钉的弹出/弹出窗口？ [英] How can I add a thumbnail image to a Bing Map pushpin's popup/flyout window?

问题描述

我不确定当您点击地图标记/图钉时弹出的小窗口的术语，但是我想在这个瞬态窗口中使用我的Bing Map图钉时要做的事情是，当它显示为点击/点击：

  My Dog Spot  -  miPerroMancha.png 
 {缩略图} 
 5 / 29/2013 
 
 elAmadoDeFresno.png 
 {thumbnail here} 
 10/19/2014 
  

IOW，popup应显示：

 图像说明（如果可用） ，加上文件名称;否则，只是文件名
照片的缩略图版本
照片拍摄日期
  

标记将被固定在拍照地点的地图上

到目前为止我已经得到的代码如下所示。 photraxMap 是必应地图的名称; pbd 是一个类，其中包含由图钉表示的照片的信息：

  String fileNameOnly = Path .GetFileName（pbd.filePath）; 
图钉图钉=新图钉（）; 
 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）; 
  

所以文本将与我想在弹出/弹出窗口中首先出现的内容相同。 / p>

当然，有一种方法可以挖掘pushpin被按下/点击/点击时显示的内容，但是如何呢？ Intellisense没有向我显示任何明显的方式。我希望图钉有一些属性，我可以分配HTML。我正在寻找正确的方向，还是咆哮错误的树？

更新

如果这不是可能的话，也许我需要的是一个弹出窗口（或者一个无限制的弹出窗口），它直接与Bing Map进行通信，但是由于点击图钉而被调用，并且会从该点弹出（与弹出窗口的左上角/图钉中间的不受限制的弹出窗口）

UPDATE 2

I通过你的文章博客。这似乎是一种享受，除了一件事情：弹出的信息框是深灰色的，并没有显示任何数据：

我改变了一些代码，使用String和DateTime代替两个字符串：

  //接下来的几个方法来自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; 
} 
 
 //这里的内联类是最有意义的吗？ 
 public class PushpinMetadata 
 {
 public string FileName {get;组; } 
 public DateTime DateTimeTaken {get;组; } 
 // TODO：为缩略图添加位图
} 
 
 // TODO：将位图/缩略图添加到参数和类
 public void AddPushpin （Location latlong，string fileName，DateTime dateTimeTaken，MapLayer层）
 {
 Pushpin p = new Pushpin（）
 {
 Tag = new PushpinMetadata（）
 {
 FileName =文件名，
 DateTimeTaken = dateTimeTaken //添加缩略图=缩略图
} 
}; 
 
 MapLayer.SetPosition（p，latlong）; 
 
 p.Tapped + = PinTapped; 
 
 layer.Children.Add（p）; 
 
 $ b $ private void PinTapped（object sender，Windows.UI.Xaml.Input.TappedRoutedEventArgs e）
 {
 Pushpin p = sender as Pushpin; 
 PushpinMetadata m =（PushpinMetadata）p.Tag; 
 
 //确保在修改信息框控件
之前显示内容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; 
 
 
 
 
 
 
 $ b 
我需要坚持两个字符串，传递DateTime的ToString（）？或者还有其他问题吗？ 
 
 
更新3 
 
 
 
我的不好 - 这是我失败的XAML更新;我改变了这个类的成员的名字，忘记了改变XAML中的绑定语句。现在它可以工作（除了位图 - 仍然不知道如何将它压入/将它从字节数组转换为BitmapImage）
解决方案
看起来你正在试图创建一个信息框（工具提示），它在你的图钉上方显示一个面板并包含一些信息。这很容易做，而且我在博客和我的书中多次写过。这里有一篇博客文章要做到这一点： http://rbrundritt.wordpress.com/2013/06/17/infoboxes-for-native-windows-store-apps/  
 
 
 
您也可能有兴趣在我的免费电子书创建位置智能Windows商店应用程序。你可以在这里下载它的副本： http://rbrundritt.wordpress.com/my-book/  
 
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)
解决方案
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/

                        
这篇关于如何将缩略图图像添加到Bing Map图钉的弹出/弹出窗口？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！