MapTips Online

This sample demonstrates enabling MapTips on a GraphicsLayer using the GraphicsLayer's MapTip property. The sample XAML shows that the MapTip property can contain any valid XAML elements. Also shown is how attributes can be bound to text using a DictionaryConverter.

XAML

<UserControl x:Class="ArcGISWPFSDK.MapTip"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:esri="http://schemas.esri.com/arcgis/client/2009">
    <Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <esri:SimpleFillSymbol x:Key="DefaultFillSymbol"  Fill="#01FFFFFF" BorderBrush="#88000000" BorderThickness="2" />
            <esri:SimpleMarkerSymbol x:Key="DefaultMarkerSymbol" Color="Red" Size="6" Style="Circle" />
            <LinearGradientBrush x:Key="PanelGradient" EndPoint="0.5,1" StartPoint="0.5,0">
                <LinearGradientBrush.RelativeTransform>
                    <TransformGroup>
                        <ScaleTransform CenterY="0.5" CenterX="0.5"/>
                        <SkewTransform CenterY="0.5" CenterX="0.5"/>
                        <RotateTransform Angle="176" CenterY="0.5" CenterX="0.5"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </LinearGradientBrush.RelativeTransform>
                <GradientStop Color="#FF145787" Offset="0.16"/>
                <GradientStop Color="#FF3D7FAC" Offset="0.502"/>
                <GradientStop Color="#FF88C5EF" Offset="0.984"/>
            </LinearGradientBrush>
        </Grid.Resources>
        <esri:Map x:Name="MyMap" Extent="-15000000,2000000,-7000000,8000000" WrapAround="True">
            <esri:ArcGISTiledMapServiceLayer ID="BaseMapLayer"
                        Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer" />
            <esri:GraphicsLayer ID="StatesGraphicsLayer">
                <esri:GraphicsLayer.MapTip>
                    <Border esri:GraphicsLayer.MapTipHideDelay="00:00:01.5" CornerRadius="10" BorderBrush="Black" Margin="0,0,15,15" BorderThickness="2" Background="{StaticResource PanelGradient}">
                        <StackPanel Orientation="Vertical" Margin="18,15,18,15">
                            <StackPanel Orientation="Horizontal" Margin="0,0,0,2">
                                <TextBlock Text="State Name: " FontWeight="Bold" Foreground="White" />
                                <TextBlock Text="{Binding [STATE_NAME]}" Foreground="White"/>
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="Population 2007: " FontWeight="Bold" Foreground="White" />
                                <TextBlock Text="{Binding [POP2007]}" Foreground="White"/>
                            </StackPanel>
                        </StackPanel>
                    </Border>
                </esri:GraphicsLayer.MapTip>
            </esri:GraphicsLayer>
            <esri:GraphicsLayer ID="CitiesGraphicsLayer" Initialized="CitiesGraphicsLayer_Initialized">
                <esri:GraphicsLayer.MapTip>
                    <Border BorderBrush="Black" CornerRadius="10" BorderThickness="2" Margin="0,0,15,15" Background="{StaticResource PanelGradient}">
                        <StackPanel Orientation="Vertical" Margin="18,15,18,15">
                            <StackPanel Orientation="Horizontal" Margin="0,0,0,2">
                                <TextBlock Text="City Name: " FontWeight="Bold" Foreground="White"/>
                                <TextBlock Text="{Binding [CITY_NAME]}" Foreground="White" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="Population: " FontWeight="Bold" Foreground="White" />
                                <TextBlock Text="{Binding [POP1990]}" Foreground="White" />
                            </StackPanel>
                        </StackPanel>
                    </Border>
                </esri:GraphicsLayer.MapTip>
            </esri:GraphicsLayer>
        </esri:Map>
        <Grid HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,10,10,0" >
            <Rectangle Fill="{StaticResource PanelGradient}" Stroke="Gray"  RadiusX="10" RadiusY="10">
                <Rectangle.Effect>
                    <DropShadowEffect/>
                </Rectangle.Effect>
            </Rectangle>
            <Rectangle Fill="WhiteSmoke" Stroke="DarkGray" RadiusX="5" RadiusY="5" Margin="10,10,10,10" />
            <TextBlock Text="Hover over a state or city to see the GraphicsLayer MapTip." TextAlignment="Center" Margin="25,25,25,25" Foreground="Black" />
        </Grid>
    </Grid>
</UserControl>

C#

using System;
using System.Windows.Controls;
using ESRI.ArcGIS.Client.Tasks;

namespace ArcGISWPFSDK
{
    public partial class MapTip : UserControl
    {
        public MapTip()
        {
            InitializeComponent();

            MyMap.PropertyChanged += MyMap_PropertyChanged;
        }

        void MyMap_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            if (e.PropertyName == "SpatialReference")
            {
                StatesGraphicsLayerLoad();
                CitiesGraphicsLayerLoad();
                MyMap.PropertyChanged -= MyMap_PropertyChanged;
            }

        }
        void StatesGraphicsLayerLoad()
        {
            ESRI.ArcGIS.Client.Tasks.Query query = new ESRI.ArcGIS.Client.Tasks.Query()
            {
                Geometry = new ESRI.ArcGIS.Client.Geometry.Envelope(-180, 0, 0, 90),
                ReturnGeometry = true,
                OutSpatialReference = MyMap.SpatialReference
            };
            query.OutFields.Add("*");

            QueryTask queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5");
            queryTask.ExecuteCompleted += StatesGraphicsLayerQueryTask_ExecuteCompleted;
            queryTask.ExecuteAsync(query);
        }

        private void CitiesGraphicsLayerLoad()
        {
            ESRI.ArcGIS.Client.Tasks.Query query = new ESRI.ArcGIS.Client.Tasks.Query()
            {
                Geometry = new ESRI.ArcGIS.Client.Geometry.Envelope(-180, 0, 0, 90),
                ReturnGeometry = true,
                OutSpatialReference = MyMap.SpatialReference
            };
            query.OutFields.Add("*");
            query.Where = "POP1990 > 100000";
            QueryTask queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0");
            queryTask.ExecuteCompleted += CitiesGraphicsLayerQueryTask_ExecuteCompleted;
            queryTask.ExecuteAsync(query);
        }
        void StatesGraphicsLayer_Initialized(object sender, EventArgs args)
        {
            ESRI.ArcGIS.Client.Tasks.Query query = new ESRI.ArcGIS.Client.Tasks.Query()
            {
                Geometry = new ESRI.ArcGIS.Client.Geometry.Envelope(-180, 0, 0, 90)
            };
            query.OutFields.Add("*");

            QueryTask queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5");
            queryTask.ExecuteCompleted += StatesGraphicsLayerQueryTask_ExecuteCompleted;
            queryTask.ExecuteAsync(query);
        }

        void StatesGraphicsLayerQueryTask_ExecuteCompleted(object sender, ESRI.ArcGIS.Client.Tasks.QueryEventArgs queryArgs)
        {
            if (queryArgs.FeatureSet == null)
                return;

            FeatureSet resultFeatureSet = queryArgs.FeatureSet;
            ESRI.ArcGIS.Client.GraphicsLayer graphicsLayer =
            MyMap.Layers["StatesGraphicsLayer"] as ESRI.ArcGIS.Client.GraphicsLayer;

            if (resultFeatureSet != null && resultFeatureSet.Features.Count > 0)
            {
                foreach (ESRI.ArcGIS.Client.Graphic graphicFeature in resultFeatureSet.Features)
                {
                    graphicFeature.Symbol = LayoutRoot.Resources["DefaultFillSymbol"] as ESRI.ArcGIS.Client.Symbols.Symbol;
                    graphicsLayer.Graphics.Add(graphicFeature);
                }
            }
        }

        private void CitiesGraphicsLayer_Initialized(object sender, EventArgs e)
        {
            ESRI.ArcGIS.Client.Tasks.Query query = new ESRI.ArcGIS.Client.Tasks.Query()
            {
                Geometry = new ESRI.ArcGIS.Client.Geometry.Envelope(-180, 0, 0, 90)
            };
            query.OutFields.Add("*");
            query.Where = "POP1990 > 100000";
            QueryTask queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0");
            queryTask.ExecuteCompleted += CitiesGraphicsLayerQueryTask_ExecuteCompleted;
            queryTask.ExecuteAsync(query);
        }

        void CitiesGraphicsLayerQueryTask_ExecuteCompleted(object sender, QueryEventArgs queryArgs)
        {
            if (queryArgs.FeatureSet == null)
                return;

            FeatureSet resultFeatureSet = queryArgs.FeatureSet;
            ESRI.ArcGIS.Client.GraphicsLayer graphicsLayer =
            MyMap.Layers["CitiesGraphicsLayer"] as ESRI.ArcGIS.Client.GraphicsLayer;

            if (resultFeatureSet != null && resultFeatureSet.Features.Count > 0)
            {
                foreach (ESRI.ArcGIS.Client.Graphic graphicFeature in resultFeatureSet.Features)
                {
                    graphicFeature.Symbol = LayoutRoot.Resources["DefaultMarkerSymbol"] as ESRI.ArcGIS.Client.Symbols.Symbol;
                    graphicsLayer.Graphics.Add(graphicFeature);
                }
            }
        }
    }
}

VB.NET

Imports System.Windows.Controls
Imports ESRI.ArcGIS.Client.Tasks

Namespace ArcGISWPFSDK
    Partial Public Class MapTip
        Inherits UserControl
        Public Sub New()
            InitializeComponent()

            AddHandler MyMap.PropertyChanged, AddressOf MyMap_PropertyChanged
        End Sub

        Private Sub MyMap_PropertyChanged(sender As Object, e As System.ComponentModel.PropertyChangedEventArgs)
            If e.PropertyName = "SpatialReference" Then
                StatesGraphicsLayerLoad()
                CitiesGraphicsLayerLoad()
                RemoveHandler MyMap.PropertyChanged, AddressOf MyMap_PropertyChanged
            End If

        End Sub
        Private Sub StatesGraphicsLayerLoad()
            Dim query As New ESRI.ArcGIS.Client.Tasks.Query() With { _
             .Geometry = New ESRI.ArcGIS.Client.Geometry.Envelope(-180, 0, 0, 90), _
             .ReturnGeometry = True, _
             .OutSpatialReference = MyMap.SpatialReference _
            }
            query.OutFields.Add("*")

            Dim queryTask As New QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5")
            AddHandler queryTask.ExecuteCompleted, AddressOf StatesGraphicsLayerQueryTask_ExecuteCompleted
            queryTask.ExecuteAsync(query)
        End Sub

        Private Sub CitiesGraphicsLayerLoad()
            Dim query As New ESRI.ArcGIS.Client.Tasks.Query() With { _
             .Geometry = New ESRI.ArcGIS.Client.Geometry.Envelope(-180, 0, 0, 90), _
             .ReturnGeometry = True, _
             .OutSpatialReference = MyMap.SpatialReference _
            }
            query.OutFields.Add("*")
            query.Where = "POP1990 > 100000"
            Dim queryTask As New QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0")
            AddHandler queryTask.ExecuteCompleted, AddressOf CitiesGraphicsLayerQueryTask_ExecuteCompleted
            queryTask.ExecuteAsync(query)
        End Sub
        Private Sub StatesGraphicsLayer_Initialized(sender As Object, args As EventArgs)
            Dim query As New ESRI.ArcGIS.Client.Tasks.Query() With { _
             .Geometry = New ESRI.ArcGIS.Client.Geometry.Envelope(-180, 0, 0, 90) _
            }
            query.OutFields.Add("*")

            Dim queryTask As New QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5")
            AddHandler queryTask.ExecuteCompleted, AddressOf StatesGraphicsLayerQueryTask_ExecuteCompleted
            queryTask.ExecuteAsync(query)
        End Sub

        Private Sub StatesGraphicsLayerQueryTask_ExecuteCompleted(sender As Object, queryArgs As ESRI.ArcGIS.Client.Tasks.QueryEventArgs)
            If queryArgs.FeatureSet Is Nothing Then
                Return
            End If

            Dim resultFeatureSet As FeatureSet = queryArgs.FeatureSet
            Dim graphicsLayer As ESRI.ArcGIS.Client.GraphicsLayer = TryCast(MyMap.Layers("StatesGraphicsLayer"), ESRI.ArcGIS.Client.GraphicsLayer)

            If resultFeatureSet IsNot Nothing AndAlso resultFeatureSet.Features.Count > 0 Then
                For Each graphicFeature As ESRI.ArcGIS.Client.Graphic In resultFeatureSet.Features
                    graphicFeature.Symbol = TryCast(LayoutRoot.Resources("DefaultFillSymbol"), ESRI.ArcGIS.Client.Symbols.Symbol)
                    graphicsLayer.Graphics.Add(graphicFeature)
                Next
            End If
        End Sub

        Private Sub CitiesGraphicsLayer_Initialized(sender As Object, e As EventArgs)
            Dim query As New ESRI.ArcGIS.Client.Tasks.Query() With { _
             .Geometry = New ESRI.ArcGIS.Client.Geometry.Envelope(-180, 0, 0, 90) _
            }
            query.OutFields.Add("*")
            query.Where = "POP1990 > 100000"
            Dim queryTask As New QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0")
            AddHandler queryTask.ExecuteCompleted, AddressOf CitiesGraphicsLayerQueryTask_ExecuteCompleted
            queryTask.ExecuteAsync(query)
        End Sub

        Private Sub CitiesGraphicsLayerQueryTask_ExecuteCompleted(sender As Object, queryArgs As QueryEventArgs)
            If queryArgs.FeatureSet Is Nothing Then
                Return
            End If

            Dim resultFeatureSet As FeatureSet = queryArgs.FeatureSet
            Dim graphicsLayer As ESRI.ArcGIS.Client.GraphicsLayer = TryCast(MyMap.Layers("CitiesGraphicsLayer"), ESRI.ArcGIS.Client.GraphicsLayer)

            If resultFeatureSet IsNot Nothing AndAlso resultFeatureSet.Features.Count > 0 Then
                For Each graphicFeature As ESRI.ArcGIS.Client.Graphic In resultFeatureSet.Features
                    graphicFeature.Symbol = TryCast(LayoutRoot.Resources("DefaultMarkerSymbol"), ESRI.ArcGIS.Client.Symbols.Symbol)
                    graphicsLayer.Graphics.Add(graphicFeature)
                Next
            End If
        End Sub
    End Class
End Namespace