silverlight: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资讯搜索也有参考价值

　　解决方案:

　　效果展示图如下:

　　 Silverlight专题(14) - 基于Silverlight<img src='/icons/33436de.gif' />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#

1public Page
2{
3　　 InitializeComponent;
4　　 SetImagesStyle;
5　　 App.Current.Host.Content.Resized  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 = LiveSearchPortTypeClient;
18　　 SearchRequest liveSearchRequest = 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 = SourceType { SourceType.Image };
24　　 liveSearchRequest.Image = ImageRequest;
25　　 //最大只能到50
26　　 liveSearchRequest.Image.Count =40;
27　　 liveSearchRequest.Image.CountSpecied =true;
28　　 liveSearchClient.SearchAsync(liveSearchRequest);
29　　 liveSearchClient.SearchCompleted  EventHandler<SearchCompletedEventArgs>(liveSearchClient_SearchCompleted);
30}
31　
32void liveSearchClient_SearchCompleted(object sender, SearchCompletedEventArgs e)
33{
34　　 List<LiveImageInfo> m_liveSearchImages = List<LiveImageInfo>;
35　　 SearchResponse liveSearchResponse = e.Result;
36　　 ImageResponse imageResponse = liveSearchResponse.Image;
37　　  (imageResponse !=null)
38　　 {
39　　　　 this.ImagesCountCtl.Text = String.Format("共有{0}个搜索结果", imageResponse.Total);
40　　　　 foreach (ImageResult result in imageResponse.Results)
41　　　　 {
42　　　　　　  lastDotIndex = result.MediaUrl.LastIndexOf('.');
43　　　　　　  ext = result.MediaUrl.Sub(lastDotIndex +1);
44　　　　　　  (ext "jpg"|| ext "png"|| ext "jpeg")
45　　　　　　 {
46　　　　　　　　 LiveImageInfo liveImage = 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　　 
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　　  (currImageInfo!=null)
77　　　　 HtmlPage.Window.Navigate( Uri(currImageInfo.PageUrl, UriKind.Absolute),"_blank");
78}