ComponentOne Maps for WPF and Silverlight
Maps for WPF and Silverlight Quick Start / Step 2 of 3: Binding to a Data Source
In This Topic
    Step 2 of 3: Binding to a Data Source
    In This Topic

    In this step, you will create a class with two properties, Name and LongLat, 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 LongLat property to the C1VectorPlacemark''s GeoPoint property.

    Complete the following steps:

    1. 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).
    2. Add the following class to your project, placing it beneath the namespace declaration:
    3. 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

       

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

       

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

      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;

       

    5. Switch to XAML view and change the <c1:C1Maps> markup so that it has a beginning and a closing tag so that it looks as follows:

      XAML
      Copy Code 
      <c1:C1Maps x:Name="C1Maps1" FadeInTiles="False" Margin="0,0,235,8" TargetCenter="-65,-25" Center="-58,-25" Zoom="2">
</c1>
             

       

    6. Add Foreground="Aqua" to the <c1:C1Maps> tag.
    7. Place the following XAML markup between the <c1:C1Maps> and </c1:C1Maps> tags:

      XAML
      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}" HorizontalAlignment="Right" Width="403" />

      This XAML 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.

    See Also
    Step 3 of 3: Running the Project