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:
1. Open the MainPage.xaml code page (this will be either MainPage.xaml.csor 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.
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#
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:
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#
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:
<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:
<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 C1VectorLayers 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.