使用silverlight制作热点地图

梦里梦外; 2022-01-21 05:39 472阅读 0赞

参考文档：[http://www.codeproject.com/Articles/49381/Silverlight-Creating-an-Image-Map-with-Hotspots][http_www.codeproject.com_Articles_49381_Silverlight-Creating-an-Image-Map-with-Hotspots]

目前网络上关于热点地图的实现大多数都是通过flash实现的，在这里我记录下通过silverlight实现的方法。

**需求：**

1.  MainPage加载时展示世界地图，鼠标移动大洲区域变色突出显示。
2.  显示鼠标停留大洲所拥有的旅行线路条数，点击国家button进入相应搜索结果页。
3.  点击大洲进入相应大洲的界面，该页面与MainPage类似，鼠标移入时显示结果略有不同，为该国家所拥有的线路名称与天数，即价格等。点击链接进入相应产品页。

截图如下：

![2012080615591748.png][]

(MainPage)

![2012080616033855.png][]

（大洲页，显示产品相关信息）

** 开发工具：**

visual studio 2010、Microsoft expression design4 (主要拿来切图用，即用钢笔工具描出国家或者大洲的边界，工具生成的代码可以直接用在xaml文件中，具体用法见此处[http://www.codeproject.com/Articles/49381/Silverlight-Creating-an-Image-Map-with-Hotspots][http_www.codeproject.com_Articles_49381_Silverlight-Creating-an-Image-Map-with-Hotspots]写的很详细)

**关键部分代码：**

实现鼠标移动时目标区域变色功能

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>void</code> 
      <code> addMapEvents() </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>foreach</code> 
      <code>(Canvas c</code> 
      <code>in</code> 
      <code>(</code> 
      <code>this</code> 
      <code>.FindName(</code> 
      <code>"map__matsuri"</code> 
      <code>)</code> 
      <code>as</code> 
      <code>Canvas).Children)</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(!</code> 
      <code>string</code> 
      <code>.IsNullOrEmpty(c.Name))</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{&nbsp;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>c.MouseMove+=</code> 
      <code>new</code> 
      <code>MouseEventHandler(on_mouseMove);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>c.MouseLeftButtonUp +=</code> 
      <code>new</code> 
      <code>MouseButtonEventHandler(c_MouseLeftButtonUp);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

绑定鼠标移动的事件（如需在页面加载后就有此功能需将addMapEvents方法添加到页面的构造函数当中）

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>void</code> 
      <code> on_mouseMove(</code> 
      <code>object</code> 
      <code> sender, MouseEventArgs e) </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>Canvas c = sender</code> 
      <code>as</code> 
      <code>Canvas; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ResetLastSelected();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(!</code> 
      <code>string</code> 
      <code>.IsNullOrEmpty(c.Name))</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(c.Name != lastSelected)</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>HideMenu();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>lastSelected = c.Name;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>SetupLinks();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>SetCanvasColor(c, Colors.Blue, 2, Colors.Black);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(!</code> 
      <code>string</code> 
      <code>.IsNullOrEmpty(c.Name))</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>PopulateContextMenu(c.Name);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>PositionContextMenu(e.GetPosition(contextMenu.Parent</code> 
      <code>as</code> 
      <code>UIElement),</code> 
      <code>true</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

鼠标移动，区域变色的具体实现。SetCanvasColor(c, Colors.Blue, 2, Colors.Black); 其中在世界地图这个层面这里的canvas即为每个大洲。看到这里应该就比较清楚了，这种实现方式就是把一个世界地图用expression design描出每一个大洲的边界(每一个大洲即为一个canvas)然后在鼠标移动的时候判断是在哪一个canvas上，并着色。

显示线路信息的解决办法

在这里分为两方面：

1.  silverlight读取数据库信息。
2.  弹出/关闭菜单的动画效果。

关于silverlight读取数据库信息，开始我习惯性的找system.data，突然发现没有了（一番搜索之后才意识到silverlight是客户端程序不能直接访问数据库，一般都是采用webservice或是ria等访问的在本程序中我采用的是webservice这里没有太多可说的，需要注意的就是当修改了webservice服务中的方法后，silverlight端需要重新引用才能生效，否则会出现找不到新添加方法的情况。）

弹出/关闭菜单的动画效果代码如下，

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>&lt;Storyboard x:Name=</code> 
      <code>"HidePopup"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;DoubleAnimationUsingKeyFrames BeginTime=</code> 
      <code>"0"</code> 
      <code>Duration=</code> 
      <code>"0"</code> 
      <code>Storyboard.TargetName=</code> 
      <code>"GridMenu"</code> 
      <code>Storyboard.TargetProperty=</code> 
      <code>"(UIElement.Opacity)"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;DiscreteDoubleKeyFrame KeyTime=</code> 
      <code>"0"</code> 
      <code>Value=</code> 
      <code>"0"</code> 
      <code>/&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;/DoubleAnimationUsingKeyFrames&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;/Storyboard&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;Storyboard x:Name=</code> 
      <code>"ShowPopup"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;DoubleAnimationUsingKeyFrames BeginTime=</code> 
      <code>"0"</code> 
      <code>Storyboard.TargetName=</code> 
      <code>"GridMenu"</code> 
      <code>Storyboard.TargetProperty=</code> 
      <code>"(UIElement.Opacity)"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;SplineDoubleKeyFrame KeyTime=</code> 
      <code>"0"</code> 
      <code>Value=</code> 
      <code>"0"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;SplineDoubleKeyFrame KeyTime=</code> 
      <code>"00:00:00.25"</code> 
      <code>Value=</code> 
      <code>"1"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;/DoubleAnimationUsingKeyFrames&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;/Storyboard&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

同样的需要在后台绑定鼠标左键点击事件：LayoutRoot.MouseLeftButtonUp += new MouseButtonEventHandler(LayoutRoot\_MouseLeftButtonUp);

然后显示的数据从数据库中读取，对button或者HyperlinkButton进行赋值即可。

原文地址：http://www.cnblogs.com/falcon-fei/archive/2012/08/06/2453531.html

# Silverlight - Creating an Image Map with Hotspots #

# Introduction  Recently, I was working on a Silverlight application, and one of the pages had a graphic. One of the requirements was that the graphic should contain clickable regions (hotspots) and display a dynamic navigation menu when the end users click on it. An image that contains one or more hotspots or clickable areas is called an image map. I have put together a simple tutorial on how to get this done.  Getting Started  An image map can be created by using Microsoft Expression Design or Expression Blend.  If you do not have Microsoft Expression Design, you can download a trial version from [here][].  If you do not have Microsoft Expression Blend, you can download a trial version from [here][].  Microsoft Expression Designer  Prepare your favorite image. In this tutorial, I use a map graphic to demonstrate that we can create hotspots in different shapes with Microsoft Expression Designer/ Blend. I have downloaded a random map from [here][here 1]. Follow the steps from below.  Open Microsoft Expression Design 3.  Go to File, New, fill up all the information, and click on the OK button.  Go to View, check Snap to Points and Snap to Pixels.  File, Import Image, and browse for your image and click the Open button.  Double click on Layer1 and rename it to MainImage.  At this point, you should see something like below:  Figure 1  ![Main Image][]  Add a new layer at the top of the MainImage layer, highlight it, and select the Pen tool and draw a hotspot around Russia.  Figure 2  <table style="margin:0px; padding:0px; border-width:1px 0px 0px 1px; border-top-style:solid; border-left-style:solid; border-top-color:rgb(204,204,204); border-left-color:rgb(204,204,204); border-collapse:collapse">   <tbody style="margin:0px; padding:0px; border:0px">    <tr style="margin:0px; padding:0px; border:0px; font-size:14px; color:rgb(17,17,17)">     <td colspan="2" style="margin:0px; padding:5px; border-width:0px 1px 1px 0px; border-right-style:solid; border-bottom-style:solid; border-right-color:rgb(204,204,204); border-bottom-color:rgb(204,204,204); font-family:'Segoe UI',Arial,sans-serif; font-size:14px"> <p><img width="209" height="55" title="New layer" alt="New layer" src="http://www.codeproject.com/KB/silverlight/Silverlight_Image_Map/NewLayer.gif" style="margin:0px; padding:0px; border:0px; overflow:auto; max-width:100%; height:auto"></p> </td>    </tr>    <tr style="margin:0px; padding:0px; border:0px; font-size:14px; color:rgb(17,17,17)">     <td style="margin:0px; padding:5px; border-width:0px 1px 1px 0px; border-right-style:solid; border-bottom-style:solid; border-right-color:rgb(204,204,204); border-bottom-color:rgb(204,204,204); font-family:'Segoe UI',Arial,sans-serif; font-size:14px"> <p><img width="74" height="176" title="Pen Tool" alt="Pen Tool" src="http://www.codeproject.com/KB/silverlight/Silverlight_Image_Map/PenTool.gif" style="margin:0px; padding:0px; border:0px; overflow:auto; max-width:100%; height:auto"></p> </td>     <td style="margin:0px; padding:5px; border-width:0px 1px 1px 0px; border-right-style:solid; border-bottom-style:solid; border-right-color:rgb(204,204,204); border-bottom-color:rgb(204,204,204); font-family:'Segoe UI',Arial,sans-serif; font-size:14px"> <p><img width="502" height="232" title="Russia" alt="Russia" src="http://www.codeproject.com/KB/silverlight/Silverlight_Image_Map/Russia.gif" style="margin:0px; padding:0px; border:0px; overflow:auto; max-width:100%; height:auto"></p> </td>    </tr>   </tbody>  </table>  Double click Layer 2 and name it Russia or something meaningful so we can utilize it in the Silverlight application. Highlight the points and click on the Properties tab. See below:  Figure 3  ![Add property][]  Pick a color you like and set its opacity to 40%.  Figure 4  ![Set opacity][]  After you have finished drawing the hotspots, click on File, Export, and copy the setting from below.  Figure 5  ![Export][]  Putting everything together  Open Visual Studio 2008, go to File, New, Project, and choose the Silverlight Application template. If you don't have the Silverlight Controls Toolkit, you can download it from [here][here 2]. Make sure you have added the reference for`System.Windows.Controls.Toolkit`. Open MainPage.xaml and drag a `Viewbox` control on to the page. This control will stretch the map image inside it proportionally when we resize the browser. Then, copy the content inMapsHotSpot.xaml into the `Viewbox` content in MainPage.xaml. See below.  Listing 1  ![minus.gif][]  Collapse  |  [Copy Code][]  <UserControl x:Class="MapsHotspotDemo.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:controlsToolkit= "clr-namespace:System.Windows.Controls; assembly=System.Windows.Controls.Toolkit" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <Grid x:Name="LayoutRoot"> <controlsToolkit:Viewbox x:Name="MapsViewbox" > * <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="MapsHotSpot" Width="800" Height="600" Clip="F1 M 0,0L 800,0L 800,600L 0,600L 0,0" UseLayoutRounding="False"> ... </Canvas> * </controlsToolkit:Viewbox> </Grid> </UserControl>  Expression Blend  If you choose to do it by using Expression Blend, here are the steps to follow:  Open Microsoft Expression Blend.  Click on File, select New Project, and follow the setup from below.  Figure 6  ![Blend New Project][]  Add a `Viewbox` into the `LayoutRoot` and name it `MapsViewbox`, then add a `Canvas` inside the `Viewbox` and name it`MapsHotspot`. After that, add a `Canvas` to `MapsHotspot` and an `Image` control to the `Canvas`. From the `Image`control properties, specify the image source and setup the appropriate width and height of the image. Then, create another `Canvas` and name it Russia or something meaningful or unique. Make sure that the width and height of the newly created `Canvas` match the image in order to draw points on it. Click on the Pen tool and draw points or vertices around Russia. Pick a brush color and set its opacity to certain percentages. Repeat the same procedure for the rest of the countries.  Figure 7  ![Blend Hot Spot][]  Tooltips  Remember that we named each layer at the beginning. The layers and points are translated into `Canvas` and `Path`objects, respectively, when we export them into XAML. We can provide each layer with a unique name, or include a `tag`attribute to it and use it to pull the country information from a database or resource dictionaries. For simplification sake, we will have a method to loop through each child element in the `MapsHotSpot`, grab the name, and set it to the tooltip content. Attach a `MouseMove` event to each layer to highlight the country on mouse hover. Also, attach a`MouseLeftButtonUp` event to pop up a menu when the left mouse button is released. See Listing 2.  Listing 2  ![minus.gif][]  Collapse  |  [Copy Code][]  foreach (Canvas c in (this.FindName("MapsHotSpot") as Canvas).Children) \{ if (!string.IsNullOrEmpty(c.Name)) \{ c.Cursor = Cursors.Hand; ToolTip toolTip = new ToolTip \{ Content = c.Name \}; c.SetValue(ToolTipService.ToolTipProperty, toolTip); c.MouseMove += new MouseEventHandler(c\_MouseMove); c.MouseLeftButtonUp += new MouseButtonEventHandler(c\_MouseLeftButtonUp); \} \}  Displayed below is the implementation of the `c_MouseMove` method. This method will highlights the `Canvas`/ country and clears the previous selection, if there is any, during the mouse hover event.  Listing 3  ![minus.gif][]  Collapse  |  [Copy Code][]  void c\_MouseMove(object sender, MouseEventArgs e) \{ Canvas c = sender as Canvas; ResetLastSelected(); if (!string.IsNullOrEmpty(c.Name)) \{ lastSelected = c.Name; SetCanvasColor(c, Color.FromArgb(255, 92, 112, 171), 2, Colors.Green); \} \}  View in browser, you should see something like below. If you resize the browser, you will still see the full map. Place the mouse over the map image to see the tooltip and the highlighted region.  Figure 8  ![Preview][]  We will build a simple menu with several links in it. First, add a simple class to hold the link properties. See below for an example.  Listing 4  ![minus.gif][]  Collapse  |  [Copy Code][]  public class Links \{ public string Title \{ get; set; \} public string URL \{ get; set; \} public Links(string t, string u) \{ Title = t; URL = u; \} \}  After that, create a global `List (T)` class to hold the link objects, and populate the link class with the below data on page load.  Listing 5  ![minus.gif][]  Collapse  |  [Copy Code][]  private List<Links> \_links = new List<Links>(); void SetupLinks() \{ \_links.Add(new Links("About the people", "http://www.countryreports.org/\{0\}.aspx")); \_links.Add(new Links("Economy", "http://www.economicexpert.com/a/\{0\}.htm")); \_links.Add(new Links("Global Statistics", "http://www.geohive.com/cntry/\{0\}.aspx")); \_links.Add(new Links("Population", "http://www.geohive.com/charts/population1.aspx")); \_links.Add(new Links("Wiki", "http://en.wikipedia.org/wiki/\{0\}")); \}  Below is the implementation of the `c_MouseLeftButtonUp` method. This method will bring up the popup menu by calling the `PopulateContextMenu` method in response to the mouse left button click event. The`PopulateContextMenu` takes a country name as an argument, loops through the list of link objects, and concatenates the country name to it. The purpose of the `PositionContextMenu` method is to set the popup menu position. I also added animation to fade in and fade out the popup menu, please refer to MainPage.xaml.  Listing 6  ![minus.gif][]  Collapse  |  [Copy Code][]  void c\_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) \{ Canvas c = sender as Canvas; if (!string.IsNullOrEmpty(c.Name)) \{ PopulateContextMenu(c.Name); PositionContextMenu(e.GetPosition( contextMenu.Parent as UIElement), true); e.Handled = true; \} \} void PositionContextMenu(Point p, bool useTransition) \{ if (useTransition) contextMenu.IsOpen = false; contextMenu.HorizontalOffset = p.X; contextMenu.VerticalOffset = p.Y; contextMenu.IsOpen = true; \} void PopulateContextMenu(string country) \{ contextListBox.Items.Clear(); foreach (Links l in \_links) \{ HyperlinkButton hlb = new HyperlinkButton(); hlb.Content = l.Title; hlb.NavigateUri = new Uri(string.Format(l.URL, country)); hlb.TargetName = "\_blank"; contextListBox.Items.Add(hlb); \} \}  At this point, you should see something like below:  Figure 9  ![Mouse click][]  The final piece is to hide the popup menu and clear the highlighted country once we click on the non- clickable area of the map image. In order to achieve that, we can attach a `MouseLeftButtonUp` event to the layout grid on page load. See below.  Listing 7  ![minus.gif][]  Collapse  |  [Copy Code][]  LayoutRoot.MouseLeftButtonUp += new MouseButtonEventHandler(LayoutRoot\_MouseLeftButtonUp); void LayoutRoot\_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) \{ ResetLastSelected(); HideMenu(); \} void HideMenu() \{ HidePopup.Begin(); contextMenu.HorizontalOffset = -50.0; \}  Points of Interest  Initially, I was planning to use the right mouse button click event class that I found from [here][here 3] to trigger the popup menu, but I decided to leave it out after reading an article from [here][here 4] about its disadvantages.  I found this [article][] useful although it was written in VB.NET and I can't get it to compile, but I'm able to utilize the logic embedded in it.  Conclusion  If you find any bugs or disagree with the contents, please drop me a line and I'll work with you to correct it. I would suggest downloading the demo and exploring it in order to grasp the full concept of it because I might have left out some useful information. I hope someone will find this article useful on how to create image hotspots or map on images.  Resources  [Adding right click to Silverlight][here 3]  [Limitations of Windowless mode for Silverlight][here 4]  [Silverlight - World Map][article] #

## License ##

This article, along with any associated source code and files, is licensed under [The Code Project Open License (CPOL)][The Code Project Open License _CPOL]

[http_www.codeproject.com_Articles_49381_Silverlight-Creating-an-Image-Map-with-Hotspots]: http://www.codeproject.com/Articles/49381/Silverlight-Creating-an-Image-Map-with-Hotspots
[2012080615591748.png]: /images/20220121/51cb3303b636448dabd836b879fc66db.png
[2012080616033855.png]: /images/20220121/5d1a17f6b450446588f3915062882e4f.png
[Link 1]: http://www.cnblogs.com/falcon-fei/archive/2012/08/06/2453531.html#
[here]: http://www.microsoft.com/expression/products/Design_Overview.aspx
[here 1]: http://www.eduplace.com/ss/maps/
[Main Image]: http://www.codeproject.com/KB/silverlight/Silverlight_Image_Map/MainImage.gif
[Add property]: http://www.codeproject.com/KB/silverlight/Silverlight_Image_Map/AddProperty.gif
[Set opacity]: http://www.codeproject.com/KB/silverlight/Silverlight_Image_Map/SetOpacity.jpg
[Export]: http://www.codeproject.com/KB/silverlight/Silverlight_Image_Map/export.gif
[here 2]: http://silverlight.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=36060
[minus.gif]: /images/20220121/2f228f922dc042dda0a784f6bae3e8a7.png
[Copy Code]: http://www.codeproject.com/Articles/49381/Silverlight-Creating-an-Image-Map-with-Hotspots#
[Blend New Project]: http://www.codeproject.com/KB/silverlight/Silverlight_Image_Map/Blend-new-project.gif
[Blend Hot Spot]: http://www.codeproject.com/KB/silverlight/Silverlight_Image_Map/BlendHotspot.gif
[Preview]: http://www.codeproject.com/KB/silverlight/Silverlight_Image_Map/preview1.gif
[Mouse click]: http://www.codeproject.com/KB/silverlight/Silverlight_Image_Map/Mouse_click_map.gif
[here 3]: http://www.sharpgis.net/post/2009/05/09/Adding-rightclick-to-Silverlight.aspx
[here 4]: http://blogs.msdn.com/silverlight_sdk/archive/2008/11/12/limitations-of-windowless-mode-for-silverlight.aspx
[article]: http://silverlight2.blogspot.com/2007/12/silverlight-world-map.html
[The Code Project Open License _CPOL]: http://www.codeproject.com/info/cpol10.aspx