このトピックでは、 XamGeographicMap™ コントロールで GeographicShapeControlSeries 要素を使用する方法を提供します。
以下の表は、このトピックを理解するための前提条件として必要なトピックを示しています。
XamGeographicMap コントロールでは、 GeographicShapeControlSeries は、地理的コンテキストで ShapeControl テンプレートを使用して地理的データの図形を描画する視覚地図要素です。これは、地理的シリーズを描画する時にある程度パフォーマンスを犠牲にしますが、 VisualStateManager など Control 要素に一意の特定の機能を追加します。
地理的シリーズのこのタイプは、地理的位置で定義される国々または領域の図形を描画するためにしばしば使用されます。 GeographicShapeControlSeries は、ポリラインの代わりに多角形で描画されることを除いて、 GeographicPolylineSeries とほどんど同様に機能します。
以下は、世界の国々を表す図形の表示状態の上のカスタム ホバーを提供する GeographicShapeControlSeries を使用した XamGeographicMap コントロールのプレビューです。
XamGeographicMap コントロールの地理的シリーズの他のタイプと同様、 GeographicShapeControlSeries には、データ バインディングのための ItemsSource プロパティがあります。このプロパティは、 IEnumerable インターフェイスを実装するオブジェクトにバインドできます。さらに、このオブジェクトの各項目には、 IEnumerable< Point> または IEnumerable< IEnumerable< Point>> 構造を使用して図形の地理的位置（経度と緯度）を保存するデータ列が 1 つ必要です。後者は、シェイプ ファイルおよび ShapefileConverter クラスで使用される標準的なデータ構造です。このデータ列は、 ShapeMemberPath プロパティにマップされます。 GeographicShapeControlSeries は、XamGeographicMap コントロールで多角形をプロットするために、このマップされたデータ列のポイントを使用します。
以下のコードは、 ShapefileConverter を使用してシェイプ ファイルからロードした世界の国々の図形に GeographicShapeControlSeries をバインドする方法を示します。
XAML の場合:
<ig:ShapefileConverter x:Key="shapefileConverter"
ShapefileSource="ShapeFiles/world_countries.shp"
DatabaseSource="ShapeFiles/world_countries.dbf" >
</ig:ShapefileConverter>
<ig:XamGeographicMap x:Name="GeoMap">
<ig:XamGeographicMap.Series>
<ig:GeographicShapeControlSeries ItemsSource="{StaticResource shapefileConverter}"
ShapeMemberPath="Points">
</ig:GeographicShapeControlSeries>
</ig:XamGeographicMap.Series>
</ig:XamGeographicMap>Visual Basic の場合:
' GeographicShapeControlSeries を作成して、データ バインディングを設定する
Dim geoSeries = New GeographicShapeControlSeries()
geoSeries. ItemsSource = shapefileConverter
geoSeries.ShapeMemberPath = "Points"
' GeographicShapeControlSeries を XamGeographicMap に追加する
Me.GeoMap.Series.Add(geoSeries)C# の場合:
// GeographicShapeControlSeries を作成して、データ バインディングを設定する
var geoSeries = new GeographicShapeControlSeries();
geoSeries. ItemsSource = shapefileConverter;
geoSeries.ShapeMemberPath = "Points";
// GeographicShapeControlSeries を XamGeographicMap に追加する
this.GeoMap.Series.Add(geoSeries);デフォルトで、 GeographicShapeControlSeries は、マウス カーソルをホバーする時必ず図形を一時的に厚くする表示状態を提供します。この動作を変更して図形要素をアニメーション化するためにその他の表示状態を追加できます。 VisualStateManager の VisualStateGroups 内の希望の表示状態で ShapeControl のスタイルを作成し、次にこのスタイルを GeographicShapeControlSeries の ShapeStyle プロパティに設定することによって達成できます。
以下のコードは、マウス カーソルをホバーした時に必ず図形の色を変更する表示状態をスタイルに提供する方法を示します。
XAML の場合:
<ig:GeographicShapeControlSeries>
<ig:GeographicShapeControlSeries.ShapeStyle>
<Style TargetType="ig:ShapeControl" x:Key="ShapeControlStyle" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ig:ShapeControl">
<ContentControl>
<ContentControl.Resources>
<LinearGradientBrush x:Key="HighlightFillBrush" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFF5716A" />
<GradientStop Color="#FFB13626" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="NormalFillBrush" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF3bb7eb"/>
<GradientStop Color="#FF2788B1" Offset="1"/>
</LinearGradientBrush>
</ContentControl.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="RootElement"
Storyboard.TargetProperty="StrokeThickness"
AutoReverse="True" By="3" Duration="0:00:00.25" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootElement"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{StaticResource HighlightFillBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Path x:Name="RootElement" Fill="{StaticResource NormalFillBrush}"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="{TemplateBinding BorderThickness}" />
</ContentControl>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ig:GeographicShapeControlSeries.ShapeStyle>
</ig:GeographicShapeControlSeries>このトピックについては、以下のトピックも参照してください。