Step 2 of 3: Binding to a Data Source

In this step, you will create a class with two properties, Name and LatLong, and populate them with an array collection. In addition, you will add a C1VectorLayer containing a C1VectorPlacemark to the control. You will then bind the Name property to the C1VectorPlacemark's Label property and the LatLong property to the C1VectorPlacemark's GeoPoint property.

Complete the following steps:

Open the MainPage.xaml code page (this will be either MainPage.xaml.cs or MainPage.xaml.vb depending on which language you've chosen for your project).
Add the following class to your project, placing it beneath the namespace declaration:

This class creates a class with two properties: a string property named Name and a Point property named LongLat.

Visual Basic	Copy Code
Public Class City Private _LongLat As Point Public Property LongLat() As Point Get Return _LongLat End Get Set(ByVal value As Point) _LongLat = value End Set End Property Private _Name As String Public Property Name() As String Get Return _Name End Get Set(ByVal value As String) _Name = value End Set End Property Public Sub New(ByVal location As Point, ByVal cityName As String) Me.LongLat = location Me.Name = cityName End Sub End Class

Visual Basic

Copy Code

Public Class City
Private _LongLat As Point
    Public Property LongLat() As Point
        Get
            Return _LongLat
        End Get
        Set(ByVal value As Point)
            _LongLat = value
        End Set
    End Property 
Private _Name As String
    Public Property Name() As String
        Get
            Return _Name
        End Get
        Set(ByVal value As String)
            _Name = value
        End Set
    End Property
    Public Sub New(ByVal location As Point, ByVal cityName As String)
        Me.LongLat = location
        Me.Name = cityName
    End Sub
End Class

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

Add the following code beneath the InitializeComponent() method to create the array collection that will populate the Name property and the LongLat property:

Note: In the C1Maps control, geographic coordinates are specified using longitude and latitude. Longitude is the X value, and latitude is the Y value. The coordinates are not marked with N, S, E, or W to designate the hemisphere.

Positive X and Y values mark the Northern and Eastern Hemispheres. Negative X and Y values mark the Southern and Western hemispheres.

Visual Basic	Copy Code
Dim cities() As City = New City() { New City(New Point(-58.40, -34.36), "Buenos Aires"), New City(New Point(-47.92, -15.78), "Brasilia"), New City(New Point(-70.39, -33.26), "Santiago"), New City(New Point(-78.35, -0.15), "Quito"), New City(New Point(-66.55, 10.30), "Caracas"), New City(New Point(-77.03, -12.03), "Lima"), New City(New Point(-57.40, -25.16), "Asuncion"), New City(New Point(-74.05, 4.36), "Bogota"), New City(New Point(-68.09, -16.30), "La Paz"), New City(New Point(-58.10, 6.48), "Georgetown"), New City(New Point(-55.10, 5.50), "Paramaribo"), New City(New Point(-56.11, -34.53),"Montevideo") } C1Maps.DataContext = cities

Visual Basic

Copy Code

Dim cities() As City =
New City() {
New City(New Point(-58.40, -34.36),  "Buenos Aires"),
New City(New Point(-47.92, -15.78), "Brasilia"),
New City(New Point(-70.39, -33.26), "Santiago"),
New City(New Point(-78.35, -0.15), "Quito"),
New City(New Point(-66.55, 10.30), "Caracas"),
New City(New Point(-77.03, -12.03), "Lima"),
New City(New Point(-57.40, -25.16), "Asuncion"),
New City(New Point(-74.05, 4.36), "Bogota"),
New City(New Point(-68.09, -16.30), "La Paz"),
New City(New Point(-58.10, 6.48), "Georgetown"),
New City(New Point(-55.10, 5.50), "Paramaribo"),
New City(New Point(-56.11, -34.53),"Montevideo")
}
C1Maps.DataContext = cities

C#	Copy Code
City[] cities = new City[] { new City(){ LongLat= new Point(-58.40, -34.36), Name="Buenos Aires"}, new City(){ LongLat= new Point(-47.92, -15.78), Name="Brasilia"}, new City(){ LongLat= new Point(-70.39, -33.26), Name="Santiago"}, new City(){ LongLat= new Point(-78.35, -0.15), Name="Quito"}, new City(){ LongLat= new Point(-66.55, 10.30), Name="Caracas"}, new City(){ LongLat= new Point(-56.11, -34.53), Name="Montevideo"}, new City(){ LongLat= new Point(-77.03, -12.03), Name="Lima"}, new City(){ LongLat= new Point(-57.40, -25.16), Name="Asuncion"}, new City(){ LongLat= new Point(-74.05, 4.36), Name="Bogota"}, new City(){ LongLat= new Point(-68.09, -16.30), Name="La Paz"}, new City(){ LongLat= new Point(-58.10, 6.48), Name="Georgetown"}, new City(){ LongLat= new Point(-55.10, 5.50), Name="Paramaribo"}, }; C1Maps.DataContext = cities;

Copy Code

City[] cities = new City[]
{
   new City(){ LongLat= new Point(-58.40, -34.36), Name="Buenos Aires"},
   new City(){ LongLat= new Point(-47.92, -15.78), Name="Brasilia"},
   new City(){ LongLat= new Point(-70.39, -33.26), Name="Santiago"},
   new City(){ LongLat= new Point(-78.35, -0.15), Name="Quito"},
   new City(){ LongLat= new Point(-66.55, 10.30), Name="Caracas"},
   new City(){ LongLat= new Point(-56.11, -34.53), Name="Montevideo"},
   new City(){ LongLat= new Point(-77.03, -12.03), Name="Lima"},
   new City(){ LongLat= new Point(-57.40, -25.16), Name="Asuncion"},
   new City(){ LongLat= new Point(-74.05, 4.36), Name="Bogota"},
   new City(){ LongLat= new Point(-68.09, -16.30), Name="La Paz"},
   new City(){ LongLat= new Point(-58.10, 6.48), Name="Georgetown"},
   new City(){ LongLat= new Point(-55.10, 5.50), Name="Paramaribo"},
};
C1Maps.DataContext = cities;

Switch to XAML view and place the following XAML markup between the <c1:C1Maps> and </c1:C1Maps> tags:

Markup	Copy Code
<c1:C1Maps.Resources> <!--Item template --> <DataTemplate x:Key="templPts"> <c1:C1VectorPlacemark GeoPoint="{Binding Path=LongLat}" Fill="Aqua" Stroke="Aqua" 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}" Width="403" />

Markup

Copy Code

<c1:C1Maps.Resources>
  <!--Item template -->
     <DataTemplate x:Key="templPts">
       <c1:C1VectorPlacemark
         GeoPoint="{Binding Path=LongLat}" Fill="Aqua" Stroke="Aqua"
         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}" Width="403" />

This XAML markup creates a data template, a C1VectorPlacemark, and a C1VectorLayer. The C1VectorLayer's ItemsSource property is bound to the entire data source, and the C1VectorPlacemark's GeoPoint property is bound to the value of the LongLat property while its Label property is set to the value of the Name property. When you run the project, the Label and Name properties will be populated by the data source to create a series of labeled placemarks on the map.

In this step, you created a data source and bound it to the properties of the C1VectorPlacemark. In the next step, you'll run the program and view the results of the quick start project.