Simple infoboxes in Bing Maps Silverlight

In the AJAX control of Bing maps we could easily add infoboxes to our pushpins by setting the title or description property. In the Silverlight control there are no built in infoboxes. This post will show you one easy method for adding hoverable infoboxes to pushpins that are similar to the AJAX control.

The first method is to add text to a simple tooltip and add this to a Pushpin object. This can be done as followed:

Simple Tooltip Infobox

Pushpin pushpin1 = new Pushpin();
pushpin1.Location = new Location(45, -90);

ToolTipService.SetToolTip(pushpin1, "Pushpin 1\r\nThis is the first pushpin infobox");
pinLayer.Children.Add(pushpin1);

 

Using this method results in a tooltip to appear when you hover over the pushpin. Here is a screen shot of this tooltip:

image 
We can expand on this method by extending the Pushpin class and add a Title and Description property. We can do this using the following code:

Extend Pushpin Class

using Microsoft.Maps.MapControl;

namespace SimpleInfoboxes
{
    public partial class Pushpin : Microsoft.Maps.MapControl.Pushpin
    {
        public string Title { get; set; }
        public string Description { get; set; }
    }
}

We can then customize the ToolTip and make use of these two new properties. Here is an example custom ToolTip style:

App.xaml Application Resources

<Style x:Key="CustomInfoboxStyle" TargetType="ToolTip">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderBrush" Value="Transparent" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Border CornerRadius="5">
                    <Border.Background>
                        <SolidColorBrush Color="Black" Opacity="0.5"/>
                    </Border.Background>
                    <ContentPresenter Margin="5">
                        <ContentPresenter.Content>
                            <StackPanel Margin="5" MaxWidth="200">
                                <TextBlock Text="{Binding Title}" FontWeight="Bold" FontSize="16" Foreground="White"/>
                                <TextBlock Text="{Binding Description}" Foreground="White" TextWrapping="Wrap"/>
                            </StackPanel>
                        </ContentPresenter.Content>
                    </ContentPresenter>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

We can then apply this custom ToolTip style to our pushpin like so:

Custom ToolTip Infobox

Pushpin pushpin2 = new Pushpin();
pushpin2.Location = new Location(45, -70);
pushpin2.Title = "Pin 2";
pushpin2.Description = "This is an example of a custom infobox that is created using a tooltip and a user control.";

ToolTipService.SetToolTip(pushpin2, new ToolTip()
{
    DataContext = pushpin2,
    Style = Application.Current.Resources["CustomInfoboxStyle"] as Style
});

pinLayer.Children.Add(pushpin2);

This infobox looks like the following when hovering over the pushpin:

image

Complete source code can be found here: http://cid-e7dba9a4bfd458c5.skydrive.live.com/self.aspx/VE%20Sample%20code/SimpleInfoboxes.zip

Advertisements

16 thoughts on “Simple infoboxes in Bing Maps Silverlight

  1. Great Post. Is it possible to display the infobox as soon as the pushpin is added to the map instead of when the user hovers over the pushpin?

    I have a listbox with different addresses and when the user selects an address from the list I have the pushpin load on the map and I would like the infobox to automatically display as well.

    • I usually don’t use tooltips for situations when I want to have additional functionalities like this. With this said you can programmatically open a tooltip like so:

      ToolTip tt = ToolTipService.GetToolTip(pushpin) as ToolTip;
      tt.IsOpen = true;

      However this does not seem to place the tooltip in the correct location. I haven’t looked into this much but it might be a good starting point.

      Cheers,
      Ricky

  2. I would like to add a link on the tooltip to redirect the user to another page. Is that possible? im working in a wpf application.
    Thanks

  3. Thanks for such awesome and easy to follow article. Any hint about where i can find a code which reduces the default pushpin’s size? I am new to WPF so not sure how to do that, even though i am sure it is very much doable . My need is to scale down the default pushpin to 50% or 60%.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s