項目のレイヤー

C1MapItemsLayer は、マップ上に項目を表示する最も簡単な方法です。これは ItemsControl を継承するため、UIElement オブジェクトまたは汎用データオブジェクトの追加を直接サポートします。また、それらのオブジェクトをビジュアル項目に変換するために、DataTemplate が使用されます。 C1MapItemsLayer に追加される要素は、C1MapCanvas.LatLong 添付プロパティを使って配置されます。サンプルを紹介します。

XAML マークアップ	コードのコピー
<C1:C1Maps> <C1:C1Maps.Layers> <C1:C1MapItemsLayer> <Ellipse Width="20" Height="20" Fill="Red" C1:C1MapCanvas.LatLong="-79.9247, 40.4587" C1:C1MapCanvas.Pinpoint="10, 10"/> </C1:C1MapItemsLayer> </C1:C1Maps.Layers> </C1:C1Maps>

XAML マークアップ

コードのコピー

<C1:C1Maps>
         <C1:C1Maps.Layers>
            <C1:C1MapItemsLayer>
            <Ellipse Width="20" Height="20" Fill="Red"
            C1:C1MapCanvas.LatLong="-79.9247,
                40.4587"
         C1:C1MapCanvas.Pinpoint="10,
     10"/>
   </C1:C1MapItemsLayer>
 </C1:C1Maps.Layers>
</C1:C1Maps>

これは、XAML で C1Maps コントロールを作成し、その Layers コレクションに C1MapItemsLayer を追加します。Layers コレクションにはレイヤをいくつでも追加でき、それらのレイヤは重ねて表示されます。

この項目レイヤには、１つの項目として、緯度/経度（40.4587, -79.9247）の位置に楕円を追加しています。これらの数値は、XAML では逆になっていることに注意してください。これは、LatLong 値が、経度に対応する X 値と緯度に対応する Y 値から成る Point 構造体で表されるためです（これは、マップと X/Y 軸の通常の配置に一致しています）。

この例では、C1MapCanvas.Pinpoint 添付プロパティが使用されていることもわかります。このプロパティは、要素上のどのポイントを LatLong プロパティで設定された地理座標に置くかを設定します。この例では、楕円の中央が LatLong 位置に来るように、Pinpoint が（10, 10）に設定されています。

２番目の例を紹介します。今回は、コードで C1Maps コントロールを作成し、そのコントロールにデータを設定します。次のクラスを使用します。

C#	コードのコピー
public class Place { public string Name { get; set; } public Point LatLong { get; set; } } サンプルコードは次のとおりです。 var map = new C1Maps(); var itemsLayer = new C1MapItemsLayer { ItemsSource = new[] { new Place { Name = "ComponentOne", LatLong = new Point(-79.92476, 40.45873), }, new Place { Name = "Greenwich Park", LatLong = new Point( 0.00057, 51.47617), }, }, ItemTemplate = itemTemplate }; map.Layers.Add(itemsLayer);

コードのコピー

public class Place
        {
            public string Name { get; set; }
            public Point LatLong { get; set; }
        }

           サンプルコードは次のとおりです。
        
var map = new C1Maps();
var itemsLayer = new C1MapItemsLayer
{
    ItemsSource = new[]
    {
        new Place { 
            Name = "ComponentOne", 
            LatLong = new Point(-79.92476,  40.45873), },
        new Place { 
            Name = "Greenwich Park",
            LatLong = new Point(  0.00057,  51.47617), },
    },
    ItemTemplate = itemTemplate
};
map.Layers.Add(itemsLayer);

ItemsSource に Place クラスのインスタンスを格納し、ItemTemplate を Page のリソースで定義された次の DataTemplate に設定します。

XAML マークアップ	コードのコピー
<DataTemplate x:Name="itemTemplate"> <StackPanel Orientation="Horizontal" C1:C1MapCanvas.LatLong="{Binding LatLong}" C1:C1MapCanvas.Pinpoint="5, 5"> <Ellipse Fill="Red" Width="10" Height="10" /> <TextBlock Text="{Binding Name}" Foreground="White" /> </StackPanel> </DataTemplate>

XAML マークアップ

コードのコピー

<DataTemplate x:Name="itemTemplate">
       <StackPanel Orientation="Horizontal"
          C1:C1MapCanvas.LatLong="{Binding LatLong}"
          C1:C1MapCanvas.Pinpoint="5, 5">
       <Ellipse Fill="Red" Width="10" Height="10" />
    <TextBlock Text="{Binding Name}" Foreground="White" />
  </StackPanel>
</DataTemplate>

この DataTemplate は、C1MapCanvas.LatLong を項目で定義された LatLong にバインドし、TextBlock に Place の Name を表示します。

ItemTemplate と ItemsSource を使用すると、データベースから簡単にデータをロードできます。データオブジェクトのコレクションを返す Web サービスを設定し、コレクションを ItemsSource として設定し、適切な値をバインドする DataTemplate を作成するだけです。