概述

Silverlight 2 Beta 1版本發布了，無論從Runtime還是Tools都給我們帶來了很多的驚喜，如支持框架語言Visual Basic, Visual C#, IronRuby, Ironpython，對JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步學Silverlight 2系列》文章將從Silverlight 2基礎知識、數據與通信、自定義控件、動畫、圖形圖像等幾個方面帶您快速進入Silverlight 2開發。

本節將綜合前面幾篇介紹與瀏覽器交互部分內容，做一個綜合示例——Live Search

準備知識

在本示例中，我們將通過調用Live Search API，在Silverlight中動態創建DOM結構，將搜索的結果展現出來。在使用Live Search API之前，需要先去Live Search Developer Center申請一個應用程序ID。

申請完成后應用程序ID大約在10分鐘左右生效。關于Live Search API的有關詳細信息，請大家參考這里。

編寫ASMX

直接調用API，返回的信息可能有很多，為了簡單起見，我們對返回的結果做一些處理，編寫一個SearchResultItem類：

public class SearchResultItem {public string Title { get; set; }public string Url { get; set; }public string Description { get; set; } }

添加對Live Search API的Service引用，地址為：http://soap.search.live.com/webservices.asmx?wsdl。

在ASMX中對返回的結果進行一些處理，Silverlight程序最后將直接調用ASMX。在調用Live Search時需要指定應用程序ID以及本地化的信息等，查詢的參數將在Silverlight程序中調用時傳入。

[WebMethod] public SearchResultItem[] DoSearch(string query) {MSNSearchPortTypeClient s = new MSNSearchPortTypeClient();SearchRequest searchRequest = new SearchRequest();int arraySize = 1;SourceRequest[] sr = new SourceRequest[arraySize];sr[0] = new SourceRequest();sr[0].Source = SourceType.Web;searchRequest.Query = query;searchRequest.Requests = sr;searchRequest.AppID = "C0680205851CCC0E38946DB8FF74156C1C826A86";searchRequest.CultureInfo = "zh-CN";SearchResponse searchResponse;searchResponse = s.Search(searchRequest);List<SearchResultItem> lists = new List<SearchResultItem>();foreach (SourceResponse sourceResponse in searchResponse.Responses){Result[] sourceResults = sourceResponse.Results;foreach (Result sourceResult in sourceResults){SearchResultItem item = new SearchResultItem();if ((sourceResult.Title != null) && (sourceResult.Title != String.Empty))item.Title = sourceResult.Title;if ((sourceResult.Description != null) && (sourceResult.Description != String.Empty))item.Description = sourceResult.Description;if ((sourceResult.Url != null) && (sourceResult.Url != String.Empty))item.Url = sourceResult.Url;lists.Add(item);}}return lists.ToArray(); }

測試一下我們的服務是否正常：

?

修改測試頁

在測試ASPX中，修改Silverlight插件的樣式控制，并添加一個div用來顯示搜索的結果：

<div style="height:100%;"><asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/TerryLee.SilverlightGoogleSearch.xap"Version="2.0" Width="857" Height="140" /><div id="result"></div> </div>

定義幾個簡單的樣式：

<style type="text/css">#result{margin-left:20px;}.urlstyle{color:#59990E;}.itemstyle{border-bottom:dotted 1px #59990E;margin-bottom:20px;} </style>

實現Silverlight程序

編寫一個簡單的Silverlight界面，使其看起來如圖所示：

XAML聲明如下：

<Grid x:Name="LayoutRoot" Background="White"><Grid.RowDefinitions><RowDefinition Height="55"></RowDefinition><RowDefinition Height="50"></RowDefinition><RowDefinition Height="35"></RowDefinition></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="*"></ColumnDefinition></Grid.ColumnDefinitions><Image Source="LiveSearch.png" Grid.Column="0"></Image><StackPanel Grid.Row="1" Orientation="Horizontal"><TextBox x:Name="txtQuery" Width="400" Height="35"Margin="50 0 0 0" BorderBrush="#3F7801"></TextBox><Button x:Name="btnSearch" Width="120" Height="35"Background="#62A21D" Margin="20 0 0 0"Content="Search" FontSize="16" Click="btnSearch_Click"></Button></StackPanel><TextBlock Grid.Row="2" Text="網頁搜索結果" Foreground="#59990E"FontSize="16" Margin="20 0 0 0"></TextBlock> </Grid>

在Silverlight項目中添加對于ASMX的引用，并編寫“Search”按鈕的實現，對于如何調用ASMX，可以參考一步一步學Silverlight 2系列（15）：數據與通信之ASMX。動態創建DOM結構，并將結果顯示出來：

private void btnSearch_Click(object sender, RoutedEventArgs e) {LiveSearchWebServiceSoapClient client = new LiveSearchWebServiceSoapClient();client.DoSearchCompleted += new EventHandler<DoSearchCompletedEventArgs>(client_DoSearchCompleted);client.DoSearchAsync(this.txtQuery.Text); }void client_DoSearchCompleted(object sender, DoSearchCompletedEventArgs e) {if (e.Error == null){SearchResultItem[] results = e.Result as SearchResultItem[];HtmlElement result = HtmlPage.Document.GetElementById("result");foreach (SearchResultItem item in results){HtmlElement itemElement = HtmlPage.Document.CreateElement("div");itemElement.CssClass = "itemstyle";HtmlElement titleElement = HtmlPage.Document.CreateElement("a");titleElement.SetAttribute("href",item.Url);titleElement.SetAttribute("innerText",item.Title);HtmlElement descriptElement = HtmlPage.Document.CreateElement("div");descriptElement.SetAttribute("innerText",item.Description);HtmlElement urlElement = HtmlPage.Document.CreateElement("span");urlElement.SetAttribute("innerText",item.Url);urlElement.CssClass = "urlstyle";itemElement.AppendChild(titleElement);itemElement.AppendChild(descriptElement);itemElement.AppendChild(urlElement);result.AppendChild(itemElement);}} }

運行看一下效果，查詢博客園：

結束語

本文綜合了前面關于瀏覽器集成以及數據與通信部分的內容，開發了一個綜合的示例——Live Search。你可以從這里下載本文示例代碼。

作者：TerryLee
出處：http://terrylee.cnblogs.com?
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。 分類:?[03]??銀光點亮世界

轉載于:https://www.cnblogs.com/meimao5211/p/3427976.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的一步一步学Silverlight 2系列（25）：综合实例之Live Search的全部內容，希望文章能夠幫你解決所遇到的問題。

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