本文中我們將展示如何在SharePoint 2010中集成Silverlight應用。例子中會用到Bing Map 控件。完成后的效果圖如下：

開發環境

本例中，我們使用到的開發環境包括：

1、Visual Studio 2010

2、SharePoint Server 2010

3、 Silverlight 4 Tools for Visual Studio 2010

4、Bing Maps Silverlight Control SDK

開發前，你需要確保已安裝“Bing Maps Silverlight Control SDK”。另外還需要在https://www.bingmapsportal.com/?注冊一個賬號。注冊好后，通過提供下列信息來獲取一個key。這個key在調用Bing Maps控件時會用到。

注意：Bing Maps Silverlight Control SDK里有詳細的開發文檔。如果你對此控件的使用遇到什么疑惑，可以參考這個幫助文檔。

現在，我們就可以開始開發了。 我將整個應用分成了3大塊兒，以便理解。

1、創建一個Silverlight Bing Map Control應用程序

2、創建一個SharePoint應用程序并集成該Silverlight應用

3、宿主Silverlight WebPart到SharePoint站點

創建一個Silverlight Bing Map Control應用程序

若要新建一個Silverlight應用程序，先打開Visual Studio 2010，新建項目并選擇"Silverlight Application"項目模板。 給我們的應用程序起一個名字“SilverlightBingMapControl”，點擊“OK”。

會彈出對話框請求自動創建一個ASP.NET web應用程序以便宿主我們的silverlight應用。?

直接點“OK”。

接下來需要添加對“Silverlight Bing Map Control”API的引用。右擊我們的silverlight應用程序項目，選擇“Add Reference”并瀏覽到前面安裝控件的位置，選中“Microsoft.Maps.MapControl.Common.dll”和“Microsoft.Maps.MapControl.dll”。?

接下來還要引用“Bing Map Web Service”。以便使Bing地圖控件發揮實際作用。

右擊我們的silverlight應用程序項目，選擇“Add Service Reference”。然后在地址欄輸入http://dev.virtualearth.net/webservices/v1/geocodeservice/geocodeservice.svc并點擊Go。在Namespace文本框中輸入GeocodeService，點"OK"。

?下圖為我們當前的Silverlight應用程序。

現在，我們來設計一個簡單的XAML文件來宿主Silverlight Map Control。下面的代碼中，我添加了一個搜索文本框，一個搜索按鈕以及一個Silverlight Bing Map 控件。

<UserControl?x:Class="SilverlightBingMapControl.MainPage"
????xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
????xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
????xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
????xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
????mc:Ignorable="d"
????d:DesignHeight="300"?d:DesignWidth="400"?xmlns:my="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"?xmlns:my1="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl.Common">
????<Grid?x:Name="LayoutRoot"?Background="White">
????????<Grid.RowDefinitions>
????????????<RowDefinition?Height="Auto"?/>
????????????<RowDefinition?Height="*"/>
????????</Grid.RowDefinitions>
????????<StackPanel??Orientation="Horizontal"?Grid.Row="0">
????????????<TextBox?Width="300"?Name="txtLocation"??MinWidth="150"?Background="#555555"?Foreground="YellowGreen"?/>
????????????<Button?Content="Search"?Name="Search"?MinWidth="100"?MinHeight="30"?Background="Black"?Click="Search_Click"?/>
????????</StackPanel>
????????<my:Map???Grid.Row="1"?CredentialsProvider="Your?Key"?Name="BingMap"?/>
????</Grid>
</UserControl>

將其中的CredentialsProvider替換成你在上面獲得的key。這時，在設計視圖中就可以看到我們的地圖控件了。?

現在可以測試一下你的應用程序了，直接運行即可。相應的宿主silverlight的ASP.NET 應用程序會自動啟動并在網頁中顯示出Silverlight 地圖控件。

現在實際上就可以整合到SharePoint里了。不過為了使其變得更有趣些，我們將通過代碼調用Bing Map Web Service定位到地圖上某個地理位置。

這里的代碼基本都來源于Bing SDK 。通過Bing Maps Geocode Service我們可以獲取到用戶指定的地理位置所對應的坐標。

private?void?Geocode(string?strAddress,?int?waypointIndex)
{
????GeocodeService.GeocodeServiceClient?geocodeService?=?new?GeocodeService.GeocodeServiceClient("BasicHttpBinding_IGeocodeService");
????geocodeService.GeocodeCompleted?+=?new?EventHandler<GeocodeService.GeocodeCompletedEventArgs>(geocodeService_GeocodeCompleted);
????GeocodeService.GeocodeRequest?geocodeRequest?=?new?GeocodeService.GeocodeRequest();
????geocodeRequest.Credentials?=?new?Credentials();
????geocodeRequest.Credentials.ApplicationId?=?((ApplicationIdCredentialsProvider)BingMap.CredentialsProvider).ApplicationId;
????geocodeRequest.Query?=?strAddress;
????geocodeService.GeocodeAsync(geocodeRequest,?waypointIndex);
}

當Bing Maps Web服務的geocode請求得到返回值時會調用GeocodeComplated。

private?void?geocodeService_GeocodeCompleted(object?sender,?GeocodeService.GeocodeCompletedEventArgs?e)
{
????GeocodeResult?result?=?null;
????if?(e.Result.Results.Count?>?0)
????{
????????result?=?e.Result.Results[0];
????????if?(result?!=?null)
????????{
????????????this.ShowMarker(result);
????????}
????}
}

Showmaker()方法會在該地理位置上標上一個橙色的圓點。

private?void?ShowMarker(GeocodeResult?result)
{
????MapLayer?myLayer?=?new?MapLayer();
????BingMap.Children.Add(myLayer);
????Ellipse?point?=?new?Ellipse();
????point.Width?=?15;
????point.Height?=?15;
????point.Fill?=?new?SolidColorBrush(Colors.Orange);
????point.Opacity?=?0.65;
????GeocodeLocation?gloc?=?result.Locations[0];
????Location?location?=?new?Location(gloc.Latitude,?gloc.Longitude);
????MapLayer.SetPosition(point,?location);
????MapLayer.SetPositionOrigin(point,?PositionOrigin.Center);
????myLayer.Children.Add(point);
}

最后，在搜索按鈕點擊事件上調用Geocode()。

private?void?Search_Click(object?sender,?RoutedEventArgs?e)
{
????Geocode(txtLocation.Text,?0);
}

完成后再次運行應用程序。數據一個有效的數據并點擊搜索。你將看到在指定的地理位置出現一個橙色的小點。

創建一個SharePoint應用程序并集成該Silverlight應用

這一步非常簡單但很重要。首先在同一解決方案下創建一個SharePoint 2010項目，選擇模板“Empty SharePoint Project”。

為項目命名后點OK。然后出現下面的窗口：

詢問調試網站的URL和信任級別。保持默認，直接點OK。

我們需要添加一個SharePoint 模塊(Module)。一個模塊可以包含若干文件。這些文件會隨著SharePoint應用程序一同被部署。若要添加一個模塊，右擊SharePoint項目并點擊“Add New Item”。選中Module。

為該模塊命名，并點擊“Add”。然后右擊該模塊并選擇“Properties”。

在屬性面板中選擇Project Output Reference，做如下的設置：

這里要注意，我們需要將Deployment Type設置為“ElementFile”，而Project name應為我們上面的Silverlight應用程序的項目名稱。點擊OK。打開該SharePoint模塊下的“Element.XML”文件。記下Silverlight的 “.xap”文件的路徑。我們需要在添加Silverlight WebPart時填寫該url。

?

現在，我們已經完成了SharePoint項目開發。編譯并部署該項目。只需在該SharePoint項目上右擊并選擇Deploy即可。

宿主Silverlight WebPart到SharePoint站點

添加Silverlight WebPart的過程和其他一般的webpart類似。打開SharePoint頁面的編輯模式，點擊“插入”標簽，選擇“Web部件”。在類別中選擇“媒體和內容”分類，然后點擊“Silverlight Web部件”。點添加。

會彈出一個AJAX對話框，要求輸入Silverlight Application Package(xap)文件的url。將前面我們在SharePoint模塊的Element文件中記下的url貼進去。

點確定后，我們在SharePoint里看到了相同的Silverlight地圖控件。?像其他webpart一樣，你可以修改其寬度和高度。

保存并瀏覽頁面。完成了。

希望對你有幫助！

?

參考資料

Bing Maps Silverlight Control Integration with SharePoint 2010 - Integration of Silverlight 4 with SharePoint 2010?

總結

以上是生活随笔為你收集整理的SharePoint2010整合Silverlight 4应用——Bing地图控件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。