Data Binding with the Virtual Earth Control
I was very excited to hear that the Virtual Earth (VE) team was creating a Silverlight control and that they announced at Mix a CTP (Community Technology Preview). I promptly downloaded it and started playing with it. From the Circus Mashimus contest I entered, I had learned about the Best Buy Remix APIs that let me search for products, stores, and product availability at stores using a simple REST API. The Stores API actually returns Longitude/Latitude coordinates.
When I started looking at the VE control, it was apparent that the control was missing some features related to data binding: I wanted to bind the coordinates returned from the Stores Service to shapes in the Map Layer, use a data templates to define what each store shape would look like, and synchronize the selection of stores in a listbox to the center of the map.
Take a look here to see the app.
It turns out that because of the power of XAML and Silverlight’s .NET framework, I can add my own attached properties to any dependency object using Custom Attached Properties. This let me do binding and use templates just like a ListBox or DataGrid. So to create an example like the one in the picture where I want a BestBuy logo placed whereever there is a Best Buy Store, I want to use a Data Template like this:
<DataTemplate x:Key="BestBuyShape">
<Image Stretch="None"
ToolTipService.ToolTip="{Binding Name}"
Source="{Binding Logo, Source={StaticResource StoresDS}}"
m:MapLayer.MapPosition="{Binding Converter={StaticResource StoreToLocationConverter}}"
m:MapLayer.MapPositionMethod="BottomLeft"/>
</DataTemplate>
and then that template is used with a data source here:
<m:Map Grid.Row="1" Margin="4" Grid.Column="1" Mode="AerialWithLabels" x:Name="Map"
ve:Properties.CenterPoint="{Binding SelectedStore, Source={StaticResource ViewModel}, Converter={StaticResource StoreToLocationConverter}}">
<m:Map.Children>
<m:MapLayer x:Name="BestBuyLocations"
ve:Properties.ItemsSource="{Binding Items, Source={StaticResource StoresDS}}"
ve:Properties.ItemTemplate="{StaticResource BestBuyShape}"/>
</m:Map.Children>
</m:Map>
I’ve shared the source code for these useful properties on the MSDN Code Gallery so you can use them too. Tell me what you think and what you use them for. I will be releasing a Best Buy kit for Silverlight soon so you can the very cool service as well.
5/24/2009 - MSS - Updated URL to Stores Service Documentation.