Silverlight专题(14) - 基于Silverlight的Live Search图片搜索

it2022-05-05  107

前言:

最近几天微软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层如下:

UI XAML 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的功能了

底层代码如下:

Code C# 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错误的地方并做了修正

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

转载于:https://www.cnblogs.com/ibillguo/archive/2008/11/19/1336714.html

相关资源:各显卡算力对照表!

最新回复(0)