Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Styling Shapes in Geographic Series

Purpose

This topic provides information on how to style shapes of geographic series in the XamGeographicMap™ control.

Required background

The following table lists the topics required as a prerequisite to understanding this topic.

Topic Purpose

This topic provides resources with information about maps, shape files, and geo-spatial related material. Use these resources to learn about and obtain geo-spatial shape files as well as tools for their editing.

This topic provides information on how to bind shape files with geo-spatial data to the control.

This topic provides information about supported types of geographic series in the XamGeographicMap control.

In this topic

This topic contains the following sections:

Introduction

In the XamGeographicMap control, shapes are visual elements that represent polygons or polylines in a geographic context. These shapes are defined by a data column mapped to the ShapeMemberPath property of geographic series.

The following types of geographic series support shapes:

The following table summarized properties for styling shape elements in geographic series:

Property Description

Specifies a brush for rendering fill of shape elements.

Specifies a brush for rendering stroke of shape elements.

Specifies a style for rendering shape elements.

Specifies a style selector that randomly or conditionally selects a style for rendering shape elements

Examples

The following table lists the code examples included in this topic.

Example Description

Applying a Style to Shapes of Geographic Series

Demonstrates how to apply a style to shapes elements using the ShapeStyle property of geographic series.

Applying a Style Selector to Shapes of Geographic Series

Demonstrates how to apply a style selector with conditional rules for rendering shape elements using the ShapeStyleSelector property of geographic series.

Code Example: Applying a Style to Shapes of Geographic Series

The TargetType property of a Style applied to the ShapeStyle[ShapeStyle] property must match the type of shape elements used by geographic series.

The following table maps the types geographic series to expected types of shape elements:

Geographic Series Target Type

Path

Path

ShapeControl

The following is a preview of the XamGeographicMap with a style applied to shape elements of geographic series.

GeographicMap Styling Shapes in Geographic Series 1.png

In XAML:

<ig:XamGeographicMap x:Name="GeoMap">
    <ig:XamGeographicMap.Series>
        <ig:GeographicShapeSeries x:Name="geoSeries" >
           <ig:GeographicShapeSeries.ShapeStyle>
                 <Style TargetType="Path">
                       <Setter Property="Fill" Value="#E2444748" />
                       <Setter Property="Stroke" Value="#B1B0B7BA" />
                       <Setter Property="StrokeThickness" Value="1" />
                 </Style>
           </ig:GeographicShapeSeries.ShapeStyle>
        </ig:GeographicShapeSeries>
    </ig:XamGeographicMap.Series>
</ig:XamGeographicMap>

In Visual Basic:

Dim style = New Style(GetType(Path))
style.Setters.Add(new Setter(Path.FillProperty, "#E2444748"))
style.Setters.Add(new Setter(Path.StrokeProperty, "#B1B0B7BA"))
style.Setters.Add(new Setter(Path.StrokeThicknessProperty, 1))

Dim geoSeries = New GeographicShapeSeries()
geoSeries.ShapeStyle = style
Me.GeoMap.Series.Add(geoSeries)

In C#:

var style = new Style(typeof(Path));
style.Setters.Add(new Setter(Path.FillProperty, "#E2444748"));
style.Setters.Add(new Setter(Path.StrokeProperty, "#B1B0B7BA"));
style.Setters.Add(new Setter(Path.StrokeThicknessProperty, 1));

var geoSeries = new GeographicShapeSeries();
geoSeries.ShapeStyle = style;
this.GeoMap.Series.Add(geoSeries);

Code Example: Applying a Style Selector to Shapes of Geographic Series

The following table summarizes types of style selector that can be applied to the ShapeStyleSelector property of a geographic series.

Geographic Series Target Type

Provides rendering fill of shape elements using a collection of brushes set to the Brushes property.

Provides a random rendering of shape elements using a collection of Style objects set to the Styles property.

Provides conditional rendering of shape elements using a collection of ConditionalStyleRule objects set to the Rules property.

The following is a preview of the XamGeographicMap with conditional styling of shape elements of geographic series.

GeographicMap Styling Shapes in Geographic Series 2.png

The following code applies the ConditionalStyleSelector with conditional rules for rendering shape elements based on values of data items bound to the ItemsSource property of the GeographicShapeSeries.

In XAML:

<ig:XamGeographicMap x:Name="GeoMap">
    <ig:XamGeographicMap.Resources>
        <Style TargetType="Path" x:Key="shapeAsiaStyle">
            <Setter Property="Fill" Value="#FF5F3E9D" />
            <Setter Property="Stroke" Value="White" />
        </Style>
        <Style TargetType="Path" x:Key="shapeEuropeStyle">
            <Setter Property="Fill" Value="#FFBF3D3D" />
            <Setter Property="Stroke" Value="White" />
        </Style>
        <Style TargetType="Path" x:Key="shapeAfricaStyle">
            <Setter Property="Fill" Value="#FF3B7F2A" />
            <Setter Property="Stroke" Value="White" />
        </Style>
        <Style TargetType="Path" x:Key="shapeNorthAmericaStyle">
            <Setter Property="Fill" Value="#FF3D5DAF" />
            <Setter Property="Stroke" Value="White" />
        </Style>
        <Style TargetType="Path" x:Key="shapeLatinAmericaStyle">
            <Setter Property="Fill" Value="#FF5B5D61" />
            <Setter Property="Stroke" Value="White" />
        </Style>
        <Style TargetType="Path" x:Key="shapeAustraliaStyle">
            <Setter Property="Fill" Value="#FFC6B046" />
            <Setter Property="Stroke" Value="White" />
        </Style>
     </ig:XamGeographicMap.Resources>
    <ig:XamGeographicMap.Series>
        <ig:GeographicShapeSeries
            ItemsSource="{StaticResource shapeFileSource}"
            ShapeMemberPath="Points">
            <ig:GeographicShapeSeries.ShapeStyleSelector>
               <ig:ConditionalStyleSelector>
                    <ig:ConditionalStyleSelector.Rules>
                        <ig:EqualToConditionalStyleRule ValueMemberPath="Fields[REGION]" ComparisonValue="Asia" StyleToApply="{StaticResource shapeAsiaStyle}" />
                        <ig:EqualToConditionalStyleRule ValueMemberPath="Fields[REGION]" ComparisonValue="Europe" StyleToApply="{StaticResource shapeEuropeStyle}" />
                        <ig:EqualToConditionalStyleRule ValueMemberPath="Fields[REGION]" ComparisonValue="Africa" StyleToApply="{StaticResource shapeAfricaStyle}" />
                        <ig:EqualToConditionalStyleRule ValueMemberPath="Fields[REGION]" ComparisonValue="North America" StyleToApply="{StaticResource shapeNorthAmericaStyle}" />
                        <ig:EqualToConditionalStyleRule ValueMemberPath="Fields[REGION]" ComparisonValue="Latin America" StyleToApply="{StaticResource shapeLatinAmericaStyle}" />
                        <ig:EqualToConditionalStyleRule ValueMemberPath="Fields[REGION]" ComparisonValue="Australia" StyleToApply="{StaticResource shapeAustraliaStyle}" />
                    </ig:ConditionalStyleSelector.Rules>
                </ig:ConditionalStyleSelector>
            </ig:GeographicShapeSeries.ShapeStyleSelector>
        </ig:GeographicShapeSeries>
    </ig:XamGeographicMap.Series>
</ig:XamGeographicMap>

In Visual Basic:

Dim shapeAsiaStyle = New Style(typeof(Path))
style.Setters.Add(New Setter(Path.FillProperty, "#FF5F3E9D"))
style.Setters.Add(New Setter(Path.StrokeProperty, "White"))
Dim shapeEuropeStyle = New Style(typeof(Path))
style.Setters.Add(New Setter(Path.FillProperty, "#FFBF3D3D"))
style.Setters.Add(New Setter(Path.StrokeProperty, "White"))
Dim shapeAfricaStyle = New Style(typeof(Path))
style.Setters.Add(New Setter(Path.FillProperty, "#FF3B7F2A"))
style.Setters.Add(New Setter(Path.StrokeProperty, "White"))
Dim shapeNorthAmericaStyle = New Style(typeof(Path))
style.Setters.Add(New Setter(Path.FillProperty, "#FF3D5DAF"))
style.Setters.Add(New Setter(Path.StrokeProperty, "White"))
Dim shapeLatinAmericaStyle = New Style(typeof(Path))
style.Setters.Add(New Setter(Path.FillProperty, "#FFC6B046"))
style.Setters.Add(New Setter(Path.StrokeProperty, "White"))
Dim shapeAustraliaStyle = New Style(typeof(Path))
style.Setters.Add(New Setter(Path.FillProperty, "#FFC6B046"))
style.Setters.Add(New Setter(Path.StrokeProperty, "White"))

Dim selector = New ConditionalStyleSelector()
selector.Rules.Add(New EqualToConditionalStyleRule { ValueMemberPath = "Fields[REGION]", ComparisonValue = "Asia", StyleToApply = shapeAsiaStyle } )
selector.Rules.Add(New EqualToConditionalStyleRule { ValueMemberPath = "Fields[REGION]", ComparisonValue = "Europe", StyleToApply = shapeEuropeStyle });
selector.Rules.Add(New EqualToConditionalStyleRule { ValueMemberPath = "Fields[REGION]", ComparisonValue = "Africa", StyleToApply = shapeAfricaStyle })
selector.Rules.Add(New EqualToConditionalStyleRule { ValueMemberPath = "Fields[REGION]", ComparisonValue = "North America", StyleToApply = shapeNorthAmericaStyle })
selector.Rules.Add(New EqualToConditionalStyleRule { ValueMemberPath = "Fields[REGION]", ComparisonValue = "Latin America", StyleToApply = shapeLatinAmericaStyle })
selector.Rules.Add(New EqualToConditionalStyleRule { ValueMemberPath = "Fields[REGION]", ComparisonValue = "Australia", StyleToApply = shapeAustraliaStyle })

var geoSeries = New GeographicShapeSeries()
geoSeries.StyleSelector = selector
GeoMap.Series.Add(geoSeries)

In C#:

var shapeAsiaStyle = new Style(typeof(Path));
style.Setters.Add(new Setter(Path.FillProperty, "#FF5F3E9D"));
style.Setters.Add(new Setter(Path.StrokeProperty, "White"));
var shapeEuropeStyle = new Style(typeof(Path));
style.Setters.Add(new Setter(Path.FillProperty, "#FFBF3D3D"));
style.Setters.Add(new Setter(Path.StrokeProperty, "White"));
var shapeAfricaStyle = new Style(typeof(Path));
style.Setters.Add(new Setter(Path.FillProperty, "#FF3B7F2A"));
style.Setters.Add(new Setter(Path.StrokeProperty, "White"));
var shapeNorthAmericaStyle = new Style(typeof(Path));
style.Setters.Add(new Setter(Path.FillProperty, "#FF3D5DAF"));
style.Setters.Add(new Setter(Path.StrokeProperty, "White"));
var shapeLatinAmericaStyle = new Style(typeof(Path));
style.Setters.Add(new Setter(Path.FillProperty, "#FFC6B046"));
style.Setters.Add(new Setter(Path.StrokeProperty, "White"));
var shapeAustraliaStyle = new Style(typeof(Path));
style.Setters.Add(new Setter(Path.FillProperty, "#FFC6B046"));
style.Setters.Add(new Setter(Path.StrokeProperty, "White"));

var selector = new ConditionalStyleSelector();
selector.Rules.Add(new EqualToConditionalStyleRule { ValueMemberPath = "Fields[REGION]", ComparisonValue = "Asia", StyleToApply = shapeAsiaStyle } );
selector.Rules.Add(new EqualToConditionalStyleRule { ValueMemberPath = "Fields[REGION]", ComparisonValue = "Europe", StyleToApply = shapeEuropeStyle });
selector.Rules.Add(new EqualToConditionalStyleRule { ValueMemberPath = "Fields[REGION]", ComparisonValue = "Africa", StyleToApply = shapeAfricaStyle });
selector.Rules.Add(new EqualToConditionalStyleRule { ValueMemberPath = "Fields[REGION]", ComparisonValue = "North America", StyleToApply = shapeNorthAmericaStyle });
selector.Rules.Add(new EqualToConditionalStyleRule { ValueMemberPath = "Fields[REGION]", ComparisonValue = "Latin America", StyleToApply = shapeLatinAmericaStyle });
selector.Rules.Add(new EqualToConditionalStyleRule { ValueMemberPath = "Fields[REGION]", ComparisonValue = "Australia", StyleToApply = shapeAustraliaStyle });

var geoSeries = new GeographicShapeSeries();
geoSeries.StyleSelector = selector;
GeoMap.Series.Add(geoSeries);

Related Content

The following topics provide additional information related to this topic.

Topic Purpose

This topic provides resources with information about maps, shape files, and geo-spatial related material. Use these resources to learn about and obtain geo-spatial shape files as well as tools for their editing.

This topic provides information on how to bind shape files with geo-spatial data to the XamGeographicMap control.

This topic provides information about supported types of geographic series in the XamGeographicMap control.