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

核心提示： 这里大家可能不理解的应该是25~29行ListBox的ItemsPanel是用来定义ListBox的ListBoxItem应该如何放置的p默认情况下，是以垂直的方式排列，Silverlight专题（14） - 基于Silverlight的Live Search图片搜索(2)，大家如果看过前

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

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

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

难道ListBoxItem只能垂直排列吗？

不能一行容纳几个Item吗？

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

这里我使用了Silverlight Toolkit中的WrapPanel

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

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

底层代码如下：

Code C#

1public Page()
2{
3　　 InitializeComponent();
4　　 SetImagesStyle();
5　　 App.Current.Host.Content.Resized +=new EventHandler(Content_Resized);
6}
7　
8void Content_Resized(object sender, EventArgs e)
9{
10　　 SetImagesStyle();
11}
12　
13privatevoid 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　
32void 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　
68privatevoid SetImagesStyle()
69{
70　　 this.ImageListCtl.Height =0.95* App.Current.Host.Content.ActualHeight -100;
71}
72　
73privatevoid 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}