Data Binding | ComponentOne Maps for WPF and Silverlight

Data Binding

In This Topic

C1VectorLayer has two properties to support data binding:

ItemsSource – specifies a collection of source objects.
ItemTemplate – specifies the appearance of each object on the layer. The Item template must define the class, which is inherited from C1VectorItemBase.

Data Binding Example

Suppose you have a collection of City objects:

C#	Copy Code
public class City { public Point LongLat { get; set; } public string Name { get; set; } }

The template defines how to create C1VectorPlacemark from the City class.

XAML	Copy Code
<c1:C1Maps x:Name="maps" Foreground="LightGreen"> <c1:C1Maps.Resources> <!-- Item template --> <DataTemplate x:Key="templPts"> <c1:C1VectorPlacemark GeoPoint="{Binding Path=LongLat}" Fill="LightGreen" Stroke="DarkGreen" Label="{Binding Path=Name}" LabelPosition="Top" > <c1:C1VectorPlacemark.Geometry> <EllipseGeometry RadiusX="2" RadiusY="2" /> </c1:C1VectorPlacemark.Geometry> </c1:C1VectorPlacemark> </DataTemplate> </c1:C1Maps.Resources> <c1:C1VectorLayer ItemsSource="{Binding}" ItemTemplate="{StaticResource templPts}" /> </c1:C1Maps>

XAML

Copy Code

<c1:C1Maps x:Name="maps" Foreground="LightGreen">
  <c1:C1Maps.Resources>
  <!-- Item template -->
     <DataTemplate x:Key="templPts">
       <c1:C1VectorPlacemark
         GeoPoint="{Binding Path=LongLat}" Fill="LightGreen" Stroke="DarkGreen"
         Label="{Binding Path=Name}" LabelPosition="Top" >
         <c1:C1VectorPlacemark.Geometry>
           <EllipseGeometry RadiusX="2" RadiusY="2" />
         </c1:C1VectorPlacemark.Geometry>
       </c1:C1VectorPlacemark>
     </DataTemplate>
  </c1:C1Maps.Resources>
  <c1:C1VectorLayer ItemsSource="{Binding}"
  ItemTemplate="{StaticResource templPts}" />
</c1:C1Maps>

Finally, you need to use some real collection as a data source.

C#	Copy Code
City[] cities = new City[] { new City(){ LongLat= new Point(30.32,59.93), Name="Saint Petersburg"}, new City(){ LongLat= new Point(24.94,60.17), Name="Helsinki"}, new City(){ LongLat= new Point(18.07,59.33), Name="Stockholm"}, new City(){ LongLat= new Point(10.75,59.91), Name="Oslo"}, new City(){ LongLat= new Point(12.58,55.67), Name="Copenhagen"} }; maps.DataContext = cities;

Copy Code

City[] cities = new City[]
{
    new City(){ LongLat= new Point(30.32,59.93), Name="Saint Petersburg"},
    new City(){ LongLat= new Point(24.94,60.17), Name="Helsinki"},
    new City(){ LongLat= new Point(18.07,59.33), Name="Stockholm"},
    new City(){ LongLat= new Point(10.75,59.91), Name="Oslo"},
    new City(){ LongLat= new Point(12.58,55.67), Name="Copenhagen"}
};

maps.DataContext = cities;