項目のレイヤー

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

XAML	コードのコピー
<c1:C1Maps> <c1:C1Maps.Layers> <c1:C1MapItemsLayer> <Ellipse Width="20" Height="20" Fill="Red" c1maps:C1MapCanvas.LatLong="-79.9247, 40.4587" c1maps: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" c1maps:C1MapCanvas.LatLong="-79.9247, 40.4587" c1maps: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; } }

サンプルコードは次のとおりです。

C#	コードのコピー
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 に設定します。 <DataTemplate x:Name="itemTemplate"> <StackPanel Orientation="Horizontal" c1maps:C1MapCanvas.LatLong="{Binding LatLong}" c1maps:C1MapCanvas.Pinpoint="5, 5"> <Ellipse Fill="Red" Width="10" Height="10" /> <TextBlock Text="{Binding Name}" Foreground="White" /> </StackPanel> </DataTemplate>

コードのコピー

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 に設定します。

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

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

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

XAML

コードのコピー

<DataTemplate x:Key="itemTemplate">
    <StackPanel Orientation="Horizontal" c1maps:C1MapCanvas.LatLong="{Binding LatLong}" c1maps: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 を作成するだけです。