Displaying Additional Information With Your Silverlight Overlays

Tags: Bing, Maps, Silverlight, OverlayManager

Plotting a marker on your map is good for making your users aware that there is something worth noting at a certain geographic location. But even with Silverlight there is a limit to what you can reasonably display at the top level.

The InfoContent is an attached property defined by the OverlayManager (Reimers.Silverlight.Bing.OverlayManager). It takes a UIElement, which is what will be displayed when the overlay is clicked. You set the InfoContent attached property like you would any other attached property, either in XAML or in code.

XAML

<reimers:OverlayManager>
	<ve:MapPolyline Stroke="Black"
					StrokeThickness="5">
		<reimers:OverlayManager.InfoContent>
			<Ellipse Width="50"
					 Height="40"
					 Fill="Red" />
		</reimers:OverlayManager.InfoContent>
		<ve:MapPolyline.Locations>
			<ve:LocationCollection>
				<ve:Location Latitude="48.85"
							 Longitude="2.433" />
				<ve:Location Latitude="51.477"
							 Longitude="0" />
			</ve:LocationCollection>
		</ve:MapPolyline.Locations>
	</ve:MapPolyline>
</reimers:OverlayManager>

As you may have noticed in the XAML snippet above the info content is not defined as a property of the MapPolyline, even though it is declared inside the MapPolyline XAML. The property is defined in the OverlayManager, as stated above. This also explains why you can't do something like this:

C#

MapPolyline line = new MapPolyline();
line.InfoContent = new Ellipse();

The MapPolyline doesn't have a property called InfoContent, so it can't be set directly. Attached properties can be set in one of two ways:

C#

MapPolyline line = new MapPolyline();

UIElement displayElement = new Ellipse
{
	Width = 50,
	Height = 40,
	Fill = new SolidColorBrush(Colors.Red)
};

//Recommended way
OverlayManager.SetInfoContent(line, displayElement);

//Not recommended way
line.SetValue(OverlayManager.InfoContentProperty, displayElement);

Displaying an ellipse is not the most informative statement, but as I am sure that you have found out, it merely exemplifies that you can display any UIElement as info content.

If you display something that inherits from FrameworkElement the OverlayManager will pass the DataContext from the overlay to the InfoContent. If the DataContext of the overlay is null, the KmlOptions will be passed as DataContext instead (although this may also be null). This will allow you to set the InfoContent UI to use databinding.

The InfoWindow Control

The Reimers.Silverlight library includes an InfoWindow control, Reimers.Silverlight.Controls.InfoWindow, which is basically a content control wrapped in a border. This means that you get something like the traditional bubble, but that you can style the content yourself. This control is only one example of how you can display additional content. You could just as well use the ellipse in the example above, even though it is less useful

The InfoWindow has a default ContentTemplate which is made to display KmlOptions, since that is the default class to hold accessorial information. This means that you can pass a KmlOptions instance as Content to the InfoWindow and it will be automatically integrated into the layout.

C#

KmlOptions options = new KmlOptions { Name = "Something" };

OverlayManager.SetKmlOptions(img, options);

OverlayManager.SetInfoContent(img, new InfoWindow { Content = options });

There is nothing wrong with passing in a different ContentTemplate and displaying something other than KmlOptions information, while still benefitting from the basic layout that the InfoWindow offers.