Lesson 4 - Binding a Map Control to an XML File
- 5 minutes to read
This tutorial describes how to bind a MapControl to a data source and adjust map data bindings.
The map control can visualize data from various data sources (a database, a list of records, etc.). In this example, you will use an external XML file.
The XML data source contains information about wrecked ships, including ship coordinates.
To bind the map control to an XML data source, follow the instructions below.
- Step 1. Prerequisite
- Step 2. Add an XML File to an Application
- Step 3. Implement Data Loading from XML
- Step 4. Specify the DataSource and Main Mappings
- Step 5. Specify an Image for Generated Vector Items
- Step 6. Show Bound Data on a ToolTip
- Step 7. Map Customization
- Result
#Step 1. Prerequisite
In this tutorial, the application, containing the map control that was created in Lesson 1 - Connect to Bing Maps of the current Getting Started tutorial, is used. If you do not have this application, start with Lesson 1.
#Step 2. Add an XML File to an Application
In this step, the Ships XML data file will be added to the application. The XML file contains data about wrecked ships. The map control will use this as the data source.
To add an XML data file to the project, do the following:
Right-click the project in the Solution Explorer window and choose Add | Existing Item... from the context menu.
This invokes the Add Existing Item dialog.
In the Add Existing Item dialog, locate the following file.
C:\Users\Public\Documents\DevExpress Demos 14.2\Components\Data\Ships.xml
Then click Add to close the dialog.
Add the XML file to the Silverlight application resource.
To do this, click the XML file in the Solution Explorer window. Then in the Properties window, set the Build Action property to Resource.
Now, the Ships.xml file is added to the application resource.
#Step 3. Implement Data Loading from XML
In this step, a class to store information about shipwreck and a method to load collection of this class from an XML file will be implemented. To do this, do the following.
Add the following ShipInfo class to your project.
Add the LoadDataFromXML method to the MainPage class. This method will parse the XML file and create a ShipInfo collection.
#Step 4. Specify the DataSource and Main Mappings
To bind the map control to XML data, execute the following actions.
Add a VectorLayer to the Map control’s MapControl.Layers collection.
Assign the data source to the vector layer's VectorLayer.ItemsSource property, as shown in the XAML below.
<!-- --> <dxm:VectorLayer ItemsSource="{Binding Ships}"/> <!-- -->In order for data binding to work, you will need to bind to the VectorLayer object's properties.
To specify the bound data source's data field from which the vector element obtains the values of its coordinates on a map, do the following.
Set the VectorLayer.LatitudeDataMember property to "Location.Latitude", and VectorLayer.LongitudeDataMember property to "Location.Longitude".
The XAML for the VectorLayer object may look like the following.
<!-- --> <dxm:VectorLayer ItemsSource="{Binding Ships}" LatitudeDataMember="Location.Latitude" LongitudeDataMember="Location.Longitude"/> <!-- -->
#Step 5. Specify an Image for Generated Vector Items
Next, you will need to add an image that will be displayed at the location of each shipwreck.
For this, right-click the image below, specify its name as Ship, and save it to the disk in the application's folder.
Include the Ship image in the project by following the steps below.
- Click Show All Files in the Solution Explorer.
Right-click Ship.png and select the Include In Project item in the invoked context menu.
To display images for generated vector items, do the following.
- Create a System.Windows.DataTemplate object containing the Ship image.
- Add this data template to a Grid resource and apply it to a vector layer from the VectorLayer.ItemTemplate property.
The XAML below shows how this can be done.
<!-- -->
<UserControl.Resources>
<ResourceDictionary>
<DataTemplate x:Key="shipTemplate">
<Image Source="Ship.png" Width="40" Height="40">
<Image.RenderTransform>
<TranslateTransform X="-20" Y="-20"/>
</Image.RenderTransform>
</Image>
</DataTemplate>
</ResourceDictionary>
</UserControl.Resources>
<Grid x:Name="infoGrid" Background="White">
<dxm:MapControl CenterPoint="55,25" ZoomLevel="3">
<dxm:MapControl.Layers>
<!-- -->
<dxm:VectorLayer ItemsSource="{Binding Ships}"
LatitudeDataMember="Location.Latitude"
LongitudeDataMember="Location.Longitude"
ItemTemplate="{StaticResource shipTemplate}"/>
</dxm:MapControl.Layers>
</dxm:MapControl>
</Grid>
<!-- -->
#Step 6. Show Bound Data on a ToolTip
To show other bound data values on a tooltip, do the following.
- Create a System.Windows.DataTemplate object with 3 TextBlocks added to the StackPanel.
- Add this data template to a Grid resource.
- Specify bindings to the "Name", "Year" and "Description" data source fields using the Text property of each TextBlock object.
- Apply the data template to a vector layer from the VectorLayerBase.ToolTipContentTemplate property.
- Enable map tooltips by setting the MapControl.ToolTipEnabled property to true.
After performing these steps, you can see the following changes in XAML.
<!-- -->
<UserControl.Resources>
<ResourceDictionary>
<!-- -->
<DataTemplate x:Key="toolTipTemplate">
<StackPanel Margin="12" Orientation="Vertical" MaxWidth="250">
<TextBlock Text="{Binding Item.Name}" Foreground="White" FontSize="16"/>
<TextBlock Text="{Binding Item.Year}" Foreground="White" FontSize="16"/>
<TextBlock Text="{Binding Item.Description}" Foreground="LightGray" FontSize="12" TextWrapping="Wrap"/>
</StackPanel>
</DataTemplate>
</ResourceDictionary>
</UserControl.Resources>
<Grid x:Name="infoGrid" Background="White">
<dxm:MapControl ToolTipEnabled="True" CenterPoint="55,25" ZoomLevel="3">
<dxm:MapControl.Layers>
<!-- -->
<dxm:VectorLayer ItemsSource="{Binding Ships}"
LatitudeDataMember="Location.Latitude"
LongitudeDataMember="Location.Longitude"
ItemTemplate="{StaticResource shipTemplate}"
ToolTipContentTemplate="{StaticResource toolTipTemplate}"/>
</dxm:MapControl.Layers>
</dxm:MapControl>
</Grid>
<!-- -->
#Step 7. Map Customization
To see the locations of the generated wrecked ship images on a map, limit the map's view region as follows:
- Modify the map's initial view by setting the MapControl.CenterPoint property value to -37, 145;
- Change the current map zoom level by setting the MapControl.ZoomLevel property to 5.
#Result
The final XAML should appear as follows.
Run the application to see the result.
