概述

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 ：數據與通信之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。你可以從這里下載本文示例代碼。

NET技術：一步一步學Silverlight ：綜合實例之Live Search，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。