Skip to main content

How to: Show Tooltips for Map Shapes

  • 4 minutes to read

This example illustrates how to display tooltips for shapes loaded from Shapefiles (Countries.dbf, Countries.shp).

Note that a tooltip displays information (a country name, population) for each map shape from Shapefiles.

To see information (a country name, population) obtained from a Shapefile on a toolltip, specify NAME and POP_EST attributes in the VectorLayerBase.ToolTipPattern property.

Then, enable map tooltips by setting the MapControl.ToolTipEnabled property to true.

<Window x:Class="ShowToolTips.MainWindow"
        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"
        xmlns:local="clr-namespace:ShowToolTips"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:MapItemPopulationAttributeToStringTypeConverter x:Key="mapItemPopulationAttributeConverter"/>
        <local:MapItemGdpAttributeToStringTypeConverter x:Key="mapItemGdpAttributeConverter"/>
        <DataTemplate x:Key="tooltipContentTemplate">
            <StackPanel Orientation="Vertical" Margin="8">
                <TextBlock Text="{Binding ToolTipText}"
                           Foreground="White" FontSize="24"/>
                <TextBlock Text="{Binding Item, Converter={StaticResource mapItemGdpAttributeConverter}, StringFormat=GDP: {0:C0}M}"
                           Foreground="Gray" FontSize="12"/>
                <TextBlock Text="{Binding Item, Converter={StaticResource mapItemPopulationAttributeConverter}, StringFormat=Population: {0}}"
                           Foreground="Gray" FontSize="12"/>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>

    <Grid>
        <dxm:MapControl ToolTipEnabled="True">
            <dxm:VectorLayer  ToolTipPattern="{}{NAME}" 
                              ToolTipContentTemplate="{Binding Source={StaticResource tooltipContentTemplate}}">
                <dxm:ShapefileDataAdapter FileUri="/ShowToolTips;component/Data/Shapefiles/Countries.shp"/>
            </dxm:VectorLayer>
        </dxm:MapControl>
    </Grid>
</Window>
See Also