This topic provides information on how to use the GeographicShapeControlSeries element in the XamGeographicMap™ control.
The following table lists the topics required as a prerequisite to understanding this topic.
This topic contains the following sections:
In the control, the GeographicShapeControlSeries is a visual map element that renders shapes of geo-spatial data using the ShapeControl template in a geographic context. This costs some performance in rendering the geo-spatial series, but adds certain features unique to the Control elements, such as the VisualStateManager.
This type of geographic series is often used to render shapes of countries or regions defined by geographic locations. The GeographicShapeControlSeries works a lot like the GeographicPolylineSeries except that it renders geo-spatial data with polygons instead of polylines.
The following is a preview of the XamGeographicMap control with GeographicShapeControlSeries that provides custom hover over visual states for shapes representing countries of the world.
Similar to other types of geographic series in the XamGeographicMap control, the GeographicShapeControlSeries has the ItemsSource property for the purpose of data binding. This property can be bound to an object that implements an IEnumerable interface. In addition, each item in this object must have one data column that stores geographic locations (longitude and latitude) of a shape using the IEnumerable< Point> or IEnumerable< IEnumerable< Point>> structure. The latter is the standard data structure used by shape files and the ShapefileConverter class. This data column is then mapped to the ShapeMemberPath property. The GeographicShapeControlSeries uses points of this mapped data column to plot polygons in the XamGeographicMap control.
The following table summarizes properties of GeographicShapeControlSeries used for data binding.
The following code shows how to bind the GeographicShapeControlSeries to shapes of countries in the world loaded from a shape file using the ShapefileConverter.
In 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>In Visual Basic:
' create and set data binding to the GeographicShapeControlSeries
Dim geoSeries = New GeographicShapeControlSeries()
geoSeries.ItemsSource = shapefileConverter
geoSeries.ShapeMemberPath = "Points"
' add the GeographicShapeControlSeries to the the xamGeographicMap
Me.GeoMap.Series.Add(geoSeries)In C#:
// create and set data binding to the GeographicShapeControlSeries
var geoSeries = new GeographicShapeControlSeries();
geoSeries.ItemsSource = shapefileConverter;
geoSeries.ShapeMemberPath = "Points";
// add the GeographicShapeControlSeries to the the xamGeographicMap
this.GeoMap.Series.Add(geoSeries);By default, the GeographicShapeControlSeries provides a visual state that temporarily increases thickness of a shape whenever the mouse cursor hover over it. You can change this behavior and add other visual state to animate the shape elements. You accomplish this by creating a style for ShapeControl with the desired visual states in VisualStateGroups of VisualStateManager and then setting this style to the GeographicShapeControlSeries' ShapeStyle property.
The following code shows how to provide a style with a visual state that changes the color of shapes whenever the mouse cursor hovers over them.
In 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>The following topics provide additional information related to this topic.