Version

Binding the XamShapeChart to ShapeFile Data

This topic explains, with code examples, how to bind the XamShapeChart control to shape file data.

Required Background

Topic Purpose

Getting Started with XamShapeChart

This topic explains how to bind data to the XamShapeChart control.

Overview

The XamShapeChart control has the ability to bind and display shape files. You can do this by utilizing a ShapefileConverter as the ItemsSource and setting the XamShapeChart's ChartType property to Polygon. This is useful if you want to use the XamShapeChart control to visualize different shape data. For example, if you wanted to map out the body of an airplane or an airplane seating chart, the XamShapeChart can help you to achieve this, as shown by the code examples below.

The XamShapeChart also has the ability to bind to multiple shape files at the same time. This is particularly useful if you need to layer multiple shapes over one another. You can do this by using a List<ShapefileConverter> as the ItemsSource for the XamShapeChart.

It is important to note that you will need both a .shp and a .dbf file in order to use this, as you will need to provide a path to the DatabaseSource and ShapefileSource properties for your ShapefileConverter element(s). You will also need to ensure that the BuildAction of your .shp and .dbf files is set to Resource.

Binding the XamShapeChart to a Shape File

The following code example shows how to bind a single shape file to the XamShapeChart.

In XAML:

<Grid x:Name="layoutRoot">

    <ig:XamShapeChart x:Name="shapeChart" ChartType="Polygon">
        <ig:XamShapeChart.ItemsSource>
            <ig:ShapefileConverter DatabaseSource="/ShapeFiles/AirplaneBody.dbf"
                                   ShapefileSource="/ShapeFiles/AirplaneBody.shp"/>
        </ig:XamShapeChart.ItemsSource>
    </ig:XamShapeChart>

</Grid>

In C#:

var shapeChart = new XamShapeChart();
shapeChart.ChartType = ShapeChartType.Polygon;

var shape = new ShapefileConverter();
shape.DatabaseSource = new Uri("/ShapeFiles/AirplaneBody.dbf", UriKind.RelativeOrAbsolute);
shape.ShapefileSource = new Uri("/ShapeFiles/AirplaneBody.shp", UriKind.RelativeOrAbsolute);

shapeChart.ItemsSource = shape;

layoutRoot.Children.Add(shapeChart);

In VB:

Dim shapeChart = New XamShapeChart()
shapeChart.ChartType = ShapeChartType.Polygon

Dim shape = New ShapefileConverter()
shape.DatabaseSource = New Uri("/ShapeFiles/AirplaneBody.dbf", UriKind.RelativeOrAbsolute)
shape.ShapefileSource = New Uri("/ShapeFiles/AirplaneBody.shp", UriKind.RelativeOrAbsolute)

shapeChart.ItemsSource = shape

layoutRoot.Children.Add(shapeChart)

The above code can result in a {ShapeFileName} that looks like the following:

shapechart_shapefile_single.png

Binding the XamShapeChart to Multiple Shape Files

The following code example shows how to bind multiple shape files to the XamShapeChart. It also uses the following collection in order to do so:

In C#:

public class ShapeFileCollection : List<ShapefileConverter>
{
}

In XAML:

<Grid x:Name="layoutRoot">
    <ig:XamShapeChart x:Name="shapeChart" ChartType="Polygon">
        <ig:XamShapeChart.ItemsSource>
            <local:ShapeFileCollection>
                <ig:ShapefileConverter DatabaseSource="ShapeFiles/AirplaneBody.dbf" ShapefileSource="ShapeFiles/AirplaneBody.shp" />
                <ig:ShapefileConverter DatabaseSource="ShapeFiles/AirplaneSeats.dbf" ShapefileSource="ShapeFiles/AirplaneSeats.shp"/>
            </local:ShapeFileCollection>
        </ig:XamShapeChart.ItemsSource>
    </ig:XamShapeChart>
</Grid>

In C#:

var shapeChart = new XamShapeChart();
shapeChart.ChartType = ShapeChartType.Polygon;

var data = new ShapeFileCollection();

var shape1 = new ShapefileConverter();
shape1.DatabaseSource = new Uri("/ShapeFiles/AirplaneBody.dbf", UriKind.RelativeOrAbsolute);
shape1.ShapefileSource = new Uri("/ShapeFiles/AirplaneBody.shp", UriKind.RelativeOrAbsolute);

var shape2 = new ShapefileConverter();
shape2.DatabaseSource = new Uri("/ShapeFiles/AirplaneSeats.dbf", UriKind.RelativeOrAbsolute);
shape2.ShapefileSource = new Uri("/ShapeFiles/AirplaneSeats.shp", UriKind.RelativeOrAbsolute);

data.Add(shape1);
data.Add(shape2);

shapeChart.ItemsSource = data;

layoutRoot.Children.Add(shapeChart);

In VB:

Dim shapeChart = New XamShapeChart()
shapeChart.ChartType = ShapeChartType.Polygon

Dim data = New ShapeFileCollection()

Dim shape1 = New ShapefileConverter()
shape1.DatabaseSource = New Uri("/ShapeFiles/AirplaneBody.dbf", UriKind.RelativeOrAbsolute)
shape1.ShapefileSource = New Uri("/ShapeFiles/AirplaneBody.shp", UriKind.RelativeOrAbsolute)

Dim shape2 = New ShapefileConverter()
shape2.DatabaseSource = New Uri("/ShapeFiles/AirplaneSeats.dbf", UriKind.RelativeOrAbsolute)
shape2.ShapefileSource = New Uri("/ShapeFiles/AirplaneSeats.shp", UriKind.RelativeOrAbsolute)

data.Add(shape1)
data.Add(shape2)

shapeChart.ItemsSource = data

layoutRoot.Children.Add(shapeChart)

The above code can result in a XamShapeChart that looks like the following:

shapechart_shapefile_multi.png