Page tree
Skip to end of metadata
Go to start of metadata

快速入门可以帮助您顺利的创建与运行WPF及及Silverlight版版Maps,您将在Expression Blend中创建一个附有C1Maps控件的新项目,当控件被添加时,您就可以自定义它的外观并为它添加C1VectorLayerC1VectorPlacemark,以及创建一个数据源,此时您可以对C1VectoPlacemark属性绑定数据源。在快速入门的最后,您将拥有一个包含一系列地标标签的全功能地图控件。

第一步:创建一个附有C1 Maps控件的应用程序

在这一步中,您将使用C1Maps控件在Expression Blend中创建一个WPF及及Silverlight应用程序,您也可以设置控件的属性。
完成如下步骤:

  1. 在Expression Blend中,选择文件文件|新建工程新建工程。
  2. 在新建工程新建工程对话框中,于左侧面板中选择Silverlight项目类型,在右侧面板选择WPF应用程序应用程序+Website或者Silverlight应用程序应用程序+Website
  3. 输入您项目的名称名称和位置位置,在下拉框中选择语言语言并点击确定确定,此时Blend创建了一个新应用并在设计面板中显示MainPage.xaml文件。
  4. 通过完成以下步骤,为C1.WPF.MapsC1.Silverlight添加一个引用: a. 选择项目项目| 添加引用添加引用。
    1. 浏览并查找C1.WPF.Maps.dllC1.Silverlight.Maps.5.dllWPF版版Maps进行配置安装。

      注意:注意: 所有.dll文件默认安装在C:\Program Files\ComponentOne\WPF EditionC:\Program Files\ComponentOne\Silverlight Edition目录下。

    2. 选择C1.WPF.dll并点击打开打开,此时您的项目即添加了一个引用。
  5. 完成以下步骤为您的项目添加C1Maps控件:

a. 在菜单栏选择窗口窗口|资源资源,打开资源资源标签。 b. 资源资源标签下,在查找框中输入"C1Maps"。

    1. 此时出现C1Maps控件图标。
    2. 双击C1Maps图标将控件添加到您的项目中。
  1. 在对象和时间线对象和时间线面板中选择C1Maps,此时对属性属性面板中的属性设置如下:设置Name属性为"C1Maps1",使您的控件有唯一的标识来调用。

设置Width属性为"405"。设置Height属性为"472"。
设置C1Maps.Zoom属性为"2", 此时缩放比例是原始的2倍。
设置C1Maps.Center属性为"-65, -25",此时只有南美洲出现在地图上。
在这一步中,您创建了一个Blend工程并且添加了一个C1Maps控件,此外您还为C1Maps控件设置了属性。

第二步:绑定数据源

在这一步中您将创建一个类,类中包含NameLongLat两个属性并封装到数组集合,此外您还需要为控件添加一个包含C1VectorPlacemarkC1VectorLayer,此时Name将与C1VectorPlacemark的标签属性绑定,LongLat
C1VectorPlacemark的地理坐标属性绑定。
完成如下步骤:

  1. 打开MainPage.xaml代码页面 (根据您所选择项目的语言,可能是MainPage.xaml.cs或MainPage.xaml.vb)。
  2. 将下述的类添加到您的项目中,需要将它置于命名空间声明的下方。
  3. 这个类生成的对象包含两种属性:一个字符串类型的Name及一个Point类型的LongLat


Visual Basic

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; }
}


  1. InitializeComponent()方法下添加下述代码来创建包含NameLongLat属性的数组集合:

    Visual Basic

    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#

    <ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="8776d097-e2ca-4c82-88e7-0a56913478d8"><ac:plain-text-body><![CDATA[

    City[] cities = new City[]
    ]]></ac:plain-text-body></ac:structured-macro>
    { 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;

  2. 切换到XAML页面并修改<c1:C1Maps>标签,起始与终止标签如下所述:

    XAML

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

  3. Foreground="Aqua" 添加到<c1:C1Maps> 标签。
  4. 将下述XAML标签置于<c1:C1Maps></c1:C1Maps>标签之间:

    XAML

    <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"
    />
    此XAML创建了一个数据模板,一个C1VectorPlacemark及一
    C1VectorLayerC1VectorLayerItemsSource属性与完整的数据源绑定,当Laber属性被设置为Name属性的值时,C1VectorPlacemarkGeoPoint属性与LongLat属性值相绑定。当您运行项目时,LabelName属性将封装并创建一系列地图上的地理标记。
    在这一步中,您创建了一个数据源并将它与C1VectorPlacemark的属性相绑定,在下一步中,您将运行程序并预览其结果。

    第三步:运行项目

    在上一步中,您创建了一个附有C1Maps控件的Blend项目,生成了一个数据源,为C1Maps控件添加了一个C1VectorLayer和一个C1VectorPlacemark,及为C1VectorPlacemark属性绑定数据源。完成以下步骤:
  5. F5运行项目,可以看到C1Maps控件显示如下:


可以观察到有两个没有命名的点,一个在Buenos Aires附近,另一个在Georgetown附近。

  1. 双击Buenos Aires区域,重复两次此步骤,此时可以观察到一个名为Montevideo的标记会出现在地图上。


恭喜您!您已经完成了WPF及及Silverlight版版Maps的快速入门,我们建议您访问C1Maps控件基础控件基础和WPF及及Silverlight 版版Maps任务帮助任务帮助来熟悉更多的内容。

XAML快速参考

本主题主要提供了一个使用XAML以完成不同任务的快速概要,了解更多信息,请参阅WPF及及Silverlight版版Maps任务帮任务帮助助。
项目模板项目模板
下述例子说明了如何使用项目模板

XAML

<c1: x:Name="C1Maps1" FadeInTiles="False" Margin="0,0,235,8" TargetCenter="-65,-25"
Center="-58,-25" Zoom="2" Foreground="Aqua">
<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" /> </c1>

矢量层标记矢量层标记
下述例子说明了如何使用矢量层创建标记:

XAML

<c1:C1Maps>
<c1:C1VectorLayer>
<c1:C1VectorPlacemark LabelPosition="Left" GeoPoint="-80.107008,42.16389" StrokeThickness="2" Foreground="#FFEB1212" PinPoint="-80.010866,42.156831"
Label="Erie, PA"/>
</c1:C1VectorLayer>


矢量层矢量层折线折线
下述例子说明了如何使用矢量层创建一个折线(开线):

XAML

<c1:C1Maps>
<c1:C1VectorLayer Margin="2,0,-2,0">
<c1:C1VectorPolyline Points="-80.15,42.12 -123.08,39.09, -3.90,30.85"
StrokeThickness="3" Stroke="Red">
</c1:C1VectorPolyline>
</c1:C1VectorLayer>

</c1:C1Maps>
矢量层矢量层多边形多边形
下述例子说明了如何使用矢量层创建一个折线(用折线创建一个图形):

XAML

<c1:C1Maps>
<c1:C1VectorLayer Margin="2,0,-2,0">
<c1:C1VectorPolygon Points="-80.15,42.12 -123.08,39.09, -3.90,30.85"
StrokeThickness="3" Stroke="Red">
</c1:C1VectorPolygon>
</c1:C1VectorLayer>
</c1:C1Maps>

主题化主题化
下述例子说明了如何在C1Maps控件上应用一个主题:

XAML

<my:C1ThemeRainierOrange>
<c1:C1Maps Height="172" Width="288" Margin="200,0,34,0"/>
</my:C1ThemeRainierOrange>

  • No labels