How to: Implement a Custom Map Tooltip Shape

  • 3 minutes to read

This example demonstrates how to configure a custom form of a map tooltip shape.

To do this, assign a DataTemplate object to the MapControl.ToolTipTemplate property.

<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="700" Width="700">
    <Window.Resources>
        <local:MapItemPopulationAttributeToStringTypeConverter x:Key="mapItemPopulationAttributeConverter"/>
        <local:MapItemGdpAttributeToStringTypeConverter x:Key="mapItemGdpAttributeConverter"/>
        <DataTemplate x:Key="tooltipContentTemplate">
            <Border BorderThickness="1" CornerRadius="10" Opacity="1.0" Background="#FF2C2B2B" >
                <Border.Effect>
                    <DropShadowEffect BlurRadius="10" ShadowDepth="10" Opacity="0.5"/>
                </Border.Effect>
                <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}M}"
                           Foreground="Gray" FontSize="12"/>
                </StackPanel>
            </Border>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <Border>
            <dxm:MapControl ToolTipEnabled="True" 
                            ZoomLevel="2" 
                            ToolTipTemplate="{Binding Source={StaticResource tooltipContentTemplate}}">
                <dxm:VectorLayer ToolTipPattern="{}{NAME}">
                    <dxm:ShapefileDataAdapter FileUri="/ShowToolTips;component/Data/Shapefiles/Countries.shp"/>
                </dxm:VectorLayer>
            </dxm:MapControl>
        </Border>
    </Grid>
</Window>