ArcGIS API for WPF - Adding MapTips

By adding MapTips to your ArcGIS API for WPF applications, you can display information about graphic features when you hover the pointer over them. With the ArcGIS API for WPF, you can easily data-bind MapTips so that the information displayed is always based on the attributes of the current graphic.

The XAML view of the main Grid in an application with MapTips enabled on a feature layer (which is a type of graphics layer) is shown below. The application displays states with a population density of more than 150 people per square mile. For each state, a MapTip showing the state's name and population density is displayed. This topic explains how the MapTips shown here are specified. It is assumed that you are familiar with how to create maps, feature layers, and symbols.

Note:

No managed .NET code (that is, code-behind) is required other than what is automatically generated when you create a WPF project.

<Grid x:Name="LayoutRoot" Background="White" >
  <Grid.Resources>
    <esri:SimpleFillSymbol x:Key="MyFillSymbol" Fill="#66FF0000" BorderBrush="Red" BorderThickness="2" />
    <esri:SimpleRenderer x:Key="MySimpleRenderer" Symbol="{StaticResource MyFillSymbol}" />
  </Grid.Resources>

  <esri:Map x:Name="MyMap" Extent="-130,10,-70,60" >
    <esri:Map.Layers>
      <esri:ArcGISTiledMapServiceLayer ID="StreetMapLayer"
        Url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/>
      <esri:FeatureLayer ID="MyFeatureLayer"
        Url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5" 
        Where="POP07_SQMI > 150" Renderer="{StaticResource MySimpleRenderer}" >
        <esri:FeatureLayer.OutFields>
          <sys:String>STATE_NAME</sys:String>
          <sys:String>POP07_SQMI</sys:String>
        </esri:FeatureLayer.OutFields>
        <esri:FeatureLayer.MapTip>
          <Grid Background="LightYellow">
            <StackPanel Margin="5">
              <TextBlock Text="{Binding [STATE_NAME]}" FontWeight="Bold" />
              <StackPanel Orientation="Horizontal">
                <TextBlock Text="Population Density (2007): " />
                <TextBlock Text="{Binding [POP07_SQMI]}" />
              </StackPanel>
            </StackPanel>
            <Border BorderBrush="Black" BorderThickness="1" />
          </Grid>
        </esri:FeatureLayer.MapTip>
      </esri:FeatureLayer>
    </esri:Map.Layers>
  </esri:Map>
</Grid>

Note:

The code in this topic requires two XML namespace declarations: one mapping the esri to the ArcGIS schema for WPF, and one mapping sys to the System namespace in the mscorlib assembly.

xmlns:esri="http://schemas.esri.com/arcgis/client/2009"
xmlns:sys="clr-namespace:System;assembly=mscorlib"

The following steps show how to specify the MapTips in this application. It is assumed that the map, base layer, feature layer, and the symbol used by the feature layer have already been defined.

Note:

MapTips can be specified on a graphics layer in the same way. A feature layer is used for illustration because it can be populated with feature graphics without using managed .NET code.

In the FeatureLayer element, add an element for the layer's MapTip property. The MapTip's definition is placed in this element.

<esri:FeatureLayer ID="MyFeatureLayer"
  Url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5" 
  Where="POP07_SQMI > 150" Renderer="{StaticResource MySimpleRenderer}" >
  <esri:FeatureLayer.OutFields>
    <sys:String>STATE_NAME</sys:String>
    <sys:String>POP07_SQMI</sys:String>
  </esri:FeatureLayer.OutFields>
  <esri:FeatureLayer.MapTip>
  </esri:FeatureLayer.MapTip>
</esri:FeatureLayer>

In the MapTip element, define the container (that is, background) for the MapTip's content. In the following code, a StackPanel and Border inside a Grid are used. This results in a rectangle with a border and margin around the MapTip's content. The background color is specified on the Grid, the margin is specified on the StackPanel, and the border color is specified on the Border. With the container elements configured this way, the MapTip automatically resizes to fit its contents.

<esri:FeatureLayer ID="MyFeatureLayer"
  Url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5" 
  Where="POP07_SQMI > 150" Renderer="{StaticResource MySimpleRenderer}" >
  <esri:FeatureLayer.OutFields>
    <sys:String>STATE_NAME</sys:String>
    <sys:String>POP07_SQMI</sys:String>
  </esri:FeatureLayer.OutFields>
  <esri:FeatureLayer.MapTip>
    <Grid Background="LightYellow">
      <StackPanel Margin="5">
      </StackPanel>
      <Border BorderBrush="Black" BorderThickness="1" />
    </Grid>
  </esri:FeatureLayer.MapTip>
</esri:FeatureLayer>

In the MapTip's StackPanel, add TextBlock to hold the state name.

<esri:FeatureLayer ID="MyFeatureLayer"
  Url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5" 
  Where="POP07_SQMI > 150" Renderer="{StaticResource MySimpleRenderer}" >
  <esri:FeatureLayer.OutFields>
    <sys:String>STATE_NAME</sys:String>
    <sys:String>POP07_SQMI</sys:String>
  </esri:FeatureLayer.OutFields>
  <esri:FeatureLayer.MapTip>
    <Grid Background="LightYellow">
      <StackPanel Margin="5">
        <TextBlock FontWeight="Bold" />
      </StackPanel>
      <Border BorderBrush="Black" BorderThickness="1" />
    </Grid>
  </esri:FeatureLayer.MapTip>
</esri:FeatureLayer>

To display the name of a state in the MapTip when you hover the pointer over the state, you need to bind the text of the state name TextBlock to the STATE_NAME field. This field is already specified as one of the Feature layer's OutFields, so you know it will be available for binding. In the MapTip element, the DataContext (to which the data binding will try to attach) is the Attributes property of the Graphic that the pointer is hovered over. This property is a Dictionary, where each item's Key is a field name and the Value is that field's value for the current Graphic. In the state name TextBlock, specify the Text property. Bind the Text property to the STATE_NAME field.

<esri:FeatureLayer ID="MyFeatureLayer"
  Url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5" 
  Where="POP07_SQMI > 150" Renderer="{StaticResource MySimpleRenderer}" >
  <esri:FeatureLayer.OutFields>
    <sys:String>STATE_NAME</sys:String>
    <sys:String>POP07_SQMI</sys:String>
  </esri:FeatureLayer.OutFields>
  <esri:FeatureLayer.MapTip>
    <Grid Background="LightYellow">
      <StackPanel Margin="5">
        <TextBlock Text="{Binding [STATE_NAME]}" FontWeight="Bold" />
      </StackPanel>
      <Border BorderBrush="Black" BorderThickness="1" />
    </Grid>
  </esri:FeatureLayer.MapTip>
</esri:FeatureLayer>

Add a StackPanel to hold a label and value for the population density. Specify the orientation as Horizontal so the value appears next to the label.

<esri:FeatureLayer ID="MyFeatureLayer"
  Url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5" 
  Where="POP07_SQMI > 150" Renderer="{StaticResource MySimpleRenderer}" >
  <esri:FeatureLayer.OutFields>
    <sys:String>STATE_NAME</sys:String>
    <sys:String>POP07_SQMI</sys:String>
  </esri:FeatureLayer.OutFields>
  <esri:FeatureLayer.MapTip>
    <Grid Background="LightYellow">
      <StackPanel Margin="5">
        <TextBlock Text="{Binding [STATE_NAME]}" FontWeight="Bold" />
        <StackPanel Orientation="Horizontal">
        </StackPanel>
      </StackPanel>
      <Border BorderBrush="Black" BorderThickness="1" />
    </Grid>
  </esri:FeatureLayer.MapTip>
</esri:FeatureLayer>

In the StackPanel, add a TextBlock for the population density label.

<esri:FeatureLayer ID="MyFeatureLayer"
  Url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5" 
  Where="POP07_SQMI > 150" Renderer="{StaticResource MySimpleRenderer}" >
  <esri:FeatureLayer.OutFields>
    <sys:String>STATE_NAME</sys:String>
    <sys:String>POP07_SQMI</sys:String>
  </esri:FeatureLayer.OutFields>
  <esri:FeatureLayer.MapTip>
    <Grid Background="LightYellow">
      <StackPanel Margin="5">
        <TextBlock Text="{Binding [STATE_NAME]}" FontWeight="Bold" />
        <StackPanel Orientation="Horizontal">
          <TextBlock Text="Population Density (2007): " />
        </StackPanel>
      </StackPanel>
      <Border BorderBrush="Black" BorderThickness="1" />
    </Grid>
  </esri:FeatureLayer.MapTip>
</esri:FeatureLayer>

Add a TextBlock for the population density value. Bind the text to the POP07_SQMI field.

<esri:FeatureLayer ID="MyFeatureLayer"
  Url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5" 
  Where="POP07_SQMI > 150" Renderer="{StaticResource MySimpleRenderer}" >
  <esri:FeatureLayer.OutFields>
    <sys:String>STATE_NAME</sys:String>
    <sys:String>POP07_SQMI</sys:String>
  </esri:FeatureLayer.OutFields>
  <esri:FeatureLayer.MapTip>
    <Grid Background="LightYellow">
      <StackPanel Margin="5">
        <TextBlock Text="{Binding [STATE_NAME]}" FontWeight="Bold" />
        <StackPanel Orientation="Horizontal">
          <TextBlock Text="Population Density (2007): " />
          <TextBlock Text="{Binding [POP07_SQMI]}" />
        </StackPanel>
      </StackPanel>
      <Border BorderBrush="Black" BorderThickness="1" />
    </Grid>
  </esri:FeatureLayer.MapTip>
</esri:FeatureLayer>

1/23/2012