Back to Devexpress

Colorizers

wpf-15046-controls-and-libraries-map-control-vector-data-colorizers.md

latest10.5 KB
Original Source

Colorizers

  • Apr 16, 2025
  • 5 minutes to read

This document introduces the Map Colorizer , lists colorizer types, and explains how to create a colorizer and customize its settings in a map control.

The document consists of the following sections.

Overview

The Colorizer is used to automatically choose colors for map shapes based on shape data. This feature can be applied to the following MapShape class descendants that utilize the MapShapeBase.Fill property:

For example, you can use the map colorizer to create GDP, population or political maps.

Before using this feature, you will need to perform the following steps.

1) Specify the map control’s vector data.

For this, assign a MapDataAdapterBase class descendant object to the VectorLayer.Data property.

For example, let us use the ShapefileDataAdapter and specify a path to the Shapefile at design time. To do this, do the following.

  • Click the MapControl’s smart tag to invoke its Tasks list.
  • In the Tasks list, click the Load Shapes from Shapefile link.

This automatically generates the following XAML:

xaml
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map" 
        x:Class="WpfApplication3.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Grid>

        <dxm:MapControl>
            <dxm:VectorLayer>
                <dxm:ShapeFileDataAdapter FileUri="INSERT_FILE_URI"/>
            </dxm:VectorLayer>
        </dxm:MapControl>

    </Grid>
</Window>

2) Choose which colorizer type should be used in your application.

Currently, the following colorizer types are supported:

Note

Shapes that have been obtained from a KML file can only be colored by the Graph Colorizer.

To add the colorizer to the map control, assign one of the MapColorizer class descendants to the VectorLayer.Colorizer property of the appropriate vector layer.

After you select a colorizer type, you can customize the map colorizer settings. The sections below describe how this can be done.

Choropleth Colorizer

To customize the choropleth colorizer, perform the following steps:

The following XAML shows how this can be done.

xaml
<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map"
        x:Class="WpfApplication1.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <dxm:MapControl>
            <dxm:MapControl.Colorizer>
                <dxm:ChoroplethColorizer 
                    RangeStops="0 3000 10000 18000 28000 44000 82000 185000 1000000 2500000 15000000">
                </dxm:ChoroplethColorizer>
            </dxm:MapControl.Colorizer>
        </dxm:MapControl>
    </Grid>
</Window>
xaml
<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map"
        x:Class="WpfApplication1.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <dxm:MapControl>
            <dxm:MapControl.Colorizer>
                <dxm:ChoroplethColorizer 
                    RangeStops="0 3000 10000 18000 28000 44000 82000 185000 1000000 2500000 15000000">
                    <dxm:ChoroplethColorizer.RangeDistribution>
                        <dxm:ExponentialRangeDistribution/>
                    </dxm:ChoroplethColorizer.RangeDistribution>
                    <dxm:ChoroplethColorizer.Colors>
                        <Color>#5F8B95</Color>
                        <Color>#799689</Color>
                        <Color>#A2A875</Color>
                        <Color>#CEBB5F</Color>
                        <Color>#F2CB4E</Color>
                        <Color>#F1C149</Color>
                        <Color>#E5A84D</Color>
                        <Color>#D6864E</Color>
                        <Color>#C56450</Color>
                        <Color>#BA4D51</Color>
                    </dxm:ChoroplethColorizer.Colors>
                    <dxm:ChoroplethColorizer.ValueProvider>
                        <dxm:ShapeAttributeValueProvider AttributeName="GDP_MD_EST" />
                    </dxm:ChoroplethColorizer.ValueProvider>
                </dxm:ChoroplethColorizer>
            </dxm:MapControl.Colorizer>
            <dxm:MapControl.Layers>
                <dxm:VectorLayer>
                    <dxm:VectorLayer.ShapeLoader>
                        <dxm:ShapefileLoader FileUri="/WpfApplication1;component/Data/Countries.shp"/>
                    </dxm:VectorLayer.ShapeLoader>
                </dxm:VectorLayer>
            </dxm:MapControl.Layers>
        </dxm:MapControl>
    </Grid>
</Window>

Note that when the map control obtains data from a Shapefile, the vector item attributes are generated automatically. Thus, you can select which attribute should be used in your application. If an application uses manually generated map items, specify that the attributes of these items use the choropleth colorizer.

The image below shows the choropleth colorizer with a color scale legend that colors map contours based on GDP data from the Shapefile.

Example

To learn more about how to colorize map contours loaded from a Shapefile, see the following example.

Graph Colorizer

To colorize map contours, specify a set of colors via the MapColorizer.Colors property.

As a result, the map contours may appear as follows:

Example

This example shows how to use the graph colorizer.

Key-Color Colorizer

To colorize Map shapes using a key-color colorizer, do the following.

As a result, the map shapes appear as follows.

To learn more about how to colorize map items using a key-color colorizer, refer to How to: Colorize Map Items Using the Key Color Colorizer.

See Also

Providing Data

WPF Map Control: Examples