前言:
最近几天微软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
相关资源:各显卡算力对照表!