Silverlight专题（14） - 基于Silverlight的Live Search图片搜索

前言：

最近几天微软Live Search公布了重新架构了的Live Search API（版本为2.0 Beta）

该API律属于微软的最新Live Search Service项目 – Silk Road（丝绸之路）

那么如何在Silverlight中调用Live Search Service呢来进行网页，图片，资讯等的搜索呢？

本篇将带大家走进Silverlight+Live Image Search的美妙世界

再阅读本篇文章之前请先阅读上篇文章：Silverlight专题（12） - 基于Silverlight的Live Search网页搜索

另外Silverlight专题（13） - 基于Silverlight的Live Search资讯搜索也有参考价值

解决方案：

效果展示图如下：

UI层如下：

1 <Grid x:Name="LayoutRoot" Background="#808080">
2     <Grid.RowDefinitions>
3         <RowDefinition Height="Auto"/>
4         <RowDefinition Height="Auto"/>
5         <RowDefinition/>
6     </Grid.RowDefinitions>
7     <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,20">
8         <local:WatermarkedTextBox Width="400" x:Name="QueryCtl" Watermark="Please Enter Your Query Keywords" VerticalContentAlignment="Center"/>
9         <Button x:Name="SearchBtnCtl" Margin="4,0" Width="120" Content="Search" Template="{StaticResource DefaultBtnTemplate}" Click="SearchBtnCtl_Click"/>
10     </StackPanel>
11     
12     <TextBlock x:Name="ImagesCountCtl" Grid.Row="1" HorizontalAlignment="Center" Width="720" Foreground="White"/>
13     
14     <ListBox Grid.Row="2" VerticalAlignment="Top" x:Name="ImageListCtl" Width="740" BorderThickness="0" Background="#808080" SelectionChanged="ImageListCtl_SelectionChanged">
15         <ListBox.ItemTemplate>
16             <DataTemplate>
17                 <Border Background="White" CornerRadius="5" BorderThickness="5">
18                     <StackPanel Width="160">
19                         <TextBlock Text="{Binding Title}" HorizontalAlignment="Center"/>
20                         <Image Height="120" Margin="8,10" Source="{Binding ThumbnailUrl}"/>
21                     </StackPanel>
22                 </Border>
23             </DataTemplate>
24         </ListBox.ItemTemplate>
25         <ListBox.ItemsPanel>
26             <ItemsPanelTemplate>
27                 <toolkit:WrapPanel Width="720"/>
28             </ItemsPanelTemplate>
29         </ListBox.ItemsPanel>
30     </ListBox>
31 </Grid>

这里大家可能不理解的应该是25~29行

ListBox的ItemsPanel是用来定义ListBox的ListBoxItem应该如何放置的

p默认情况下，是以垂直的方式排列，大家如果看过前面两篇文件就应该有这种感觉

难道ListBoxItem只能垂直排列吗？

不能一行容纳几个Item吗？

而ItemsPanel这个属性就可以帮你的忙

这里我使用了Silverlight Toolkit中的WrapPanel

WrapPanel的特点是如果发现一行已经不能容纳所有Items的话

会自动换行，于是就可以在ListBox中实现一行有多个Items的功能了

底层代码如下：

1 public Page()
2 {
3     InitializeComponent();
4     SetImagesStyle();
5     App.Current.Host.Content.Resized += new EventHandler(Content_Resized);
6 }
7 
8 void Content_Resized(object sender, EventArgs e)
9 {
10     SetImagesStyle();
11 }
12 
13 private void SearchBtnCtl_Click(object sender, RoutedEventArgs e)
14 {
15     this.SearchBtnCtl.Content = "Searching";
16     this.SearchBtnCtl.IsEnabled = false;
17     LiveSearchPortTypeClient liveSearchClient = new LiveSearchPortTypeClient();
18     SearchRequest liveSearchRequest = new SearchRequest();
19     liveSearchRequest.Query = this.QueryCtl.Text.Trim();
20     liveSearchRequest.Version = "2.0";
21     liveSearchRequest.AppId = "44980C5CFA65792B3CDFF33A5CBF2CFAD17E3349";
22     liveSearchRequest.Market = "zh-cn";
23     liveSearchRequest.Sources = new SourceType[] { SourceType.Image };
24     liveSearchRequest.Image = new ImageRequest();
25     //最大只能到50
26     liveSearchRequest.Image.Count = 40;
27     liveSearchRequest.Image.CountSpecified = true;
28     liveSearchClient.SearchAsync(liveSearchRequest);
29     liveSearchClient.SearchCompleted += new EventHandler<SearchCompletedEventArgs>(liveSearchClient_SearchCompleted);
30 }
31 
32 void liveSearchClient_SearchCompleted(object sender, SearchCompletedEventArgs e)
33 {
34     List<LiveImageInfo> m_liveSearchImages = new List<LiveImageInfo>();
35     SearchResponse liveSearchResponse = e.Result;
36     ImageResponse imageResponse = liveSearchResponse.Image;
37     if (imageResponse != null)
38     {
39         this.ImagesCountCtl.Text = String.Format("共有{0}个搜索结果", imageResponse.Total);
40         foreach (ImageResult result in imageResponse.Results)
41         {
42             int lastDotIndex = result.MediaUrl.LastIndexOf('.');
43             string ext = result.MediaUrl.Substring(lastDotIndex + 1);
44             if (ext == "jpg" || ext == "png" || ext == "jpeg")
45             {
46                 LiveImageInfo liveImage = new LiveImageInfo();
47                 liveImage.Title = result.Title;
48                 liveImage.PageUrl = result.Url;
49                 liveImage.MediaUrl = result.MediaUrl;
50                 liveImage.ThumbnailUrl = result.Thumbnail.Url;
51                 liveImage.DisplayUrl = result.DisplayUrl;
52                 m_liveSearchImages.Add(liveImage);
53             }
54         }
55 
56         this.ImageListCtl.ItemsSource = m_liveSearchImages;
57     }
58 
59     else
60     {
61         this.ImagesCountCtl.Text = String.Format("共有{0}个搜索结果", 0);
62         this.ImageListCtl.ItemsSource = null;
63     }
64     this.SearchBtnCtl.IsEnabled = true;
65     this.SearchBtnCtl.Content = "Search";
66 }
67 
68 private void SetImagesStyle()
69 {
70     this.ImageListCtl.Height = 0.95 * App.Current.Host.Content.ActualHeight - 100;
71 }
72 
73 private void ImageListCtl_SelectionChanged(object sender, SelectionChangedEventArgs e)
74 {
75     LiveImageInfo currImageInfo = (sender as ListBox).SelectedItem as LiveImageInfo;
76     if (currImageInfo!=null)
77         HtmlPage.Window.Navigate(new Uri(currImageInfo.PageUrl, UriKind.Absolute),"_blank");
78 }

大家请注意下底层代码的第26行

Live Image Search一次性最多只能取50张图片（这是考虑了服务器负担作出的限定）

77行的HtmlPage.Window.Navigate(new Uri(currImageInfo.PageUrl, UriKind.Absolute),"_blank");

用来打开一个新的网页窗口并跳转到图片所在的网页

结果展示：

展示程序如下：

代码下载：

总结：

Silverlight专题（12） - 基于Silverlight的Live Search网页搜索

Silverlight专题（13） - 基于Silverlight的Live Search资讯搜索

Silverlight专题（14） - 基于Silverlight的Live Search图片搜索

三篇文章抛砖引玉，粗略的介绍了下如果利用Silverlight的网络通信来利用Live Search的资源

其中简单的介绍了Live Search的最新的2.0 Beta版的API

指出了当前API错误的地方并做了修正

此外利用数据绑定方便的展示获取得到结果