[译稿]Silverlight入门：第五部分——整合其它控件

这是Silverlight入门系列的第五部分。点击这里可以查看本系列的目录。你可以下载C#或Visual Basic版本的本示例应用程序的完整项目文件。

在之前的章节中，我们优化了数据绑定，并将数据保存在了我们的独立存储区域。现在让我们整合一些其它的控件使得用户体验更好一些。

自动完成输入框

记得每次搜索以后，我们都将搜索条件保存为历史数据吗？让我们通过在他们输入时提供搜索历史来让他们使用更方便。我们准备用Silverlight工具包中的一个控件——自动完成输入框来做这件事。

要做到这点，我们需要添加一个到System.Windows.Controls.Input的程序集引用，然后在你的Search.xaml文件中添加一个xmlns：

1 xmlns:input="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input"

我们还要在这里将自动完成输入框的Name属性改为SearchTerm：

1 < input:AutoCompleteBox x:Name ="SearchTerm" FontSize ="14.667" Margin ="0,0,10,0" Width ="275"

2     IsTextCompletionEnabled ="True" />

现在我们需要为它提供数据，因此我们要在Helper.cs类中添加以下方法：

1   internal static string[] GetSearchTermHistory()

2   {

3       List < string > searchHistory = new List < string > ();

4

5       foreach (var item in IsolatedStorageSettings.ApplicationSettings.Keys)

6       {

7           searchHistory.Add(item.ToString());

8       }

9

10     return searchHistory.ToArray();

11 }

之后在Search.xaml.cs中的Loaded事件处理器中，我添加了Helper.GetSearchTermHistory()的调用：

1 void Search_Loaded( object sender, RoutedEventArgs e)

2 {

3     SearchResults.ItemsSource = pcv; // bind the DataGrid

4     _timer.Start(); // start the timer

5     SearchForTweetsEx(); // do the initial search

6     SearchTerm.ItemsSource = Helper.GetSearchTermHistory(); // populate autocomplete

7 }

这个效果就是当程序加载后，当用户输入搜索条件时为他们提供提示：

很有用吧！

添加历史视图

现在我们已经拥有了用户的搜索历史，所以我们可以在一个叫做History.xaml的新视图中提供一些数据。你应该已经在上一章节的View文件夹中创建过了，如果你没有，那么跟着我做（通过Silverlight的ItemTemplate）。我们可能要在这里显示一个简单的历史搜索条件列表。这可以通过在XAML文件中添加一个ListBox来很容易地做到：

1 < StackPanel >

2     < TextBlock x:Name ="HeaderText" Style ="{StaticResource HeaderTextStyle}"

3         Text ="Serach Term History" />

4     < ListBox x:Name ="SearchTermHistory" />

5 </ StackPanel >

之后使用Helper.cs中的方法，我们可以像在History.xaml.cs中一样将新数据绑定到ListBox上。

1 protected override void OnNavigatedTo(NavigationEventArgs e)

2 {

3     SearchTermHistory.ItemsSource = Helper.GetSearchTermHistory();

4 }

这样，我们就能通过方法的重用来完整地显示搜索历史。

添加一些导航功能

现在在应用程序中已经有了一对视图，该让导航框架起作用了。你可以直接通过按钮导航，也可以通过前进/后退浏览按钮完成相同的事情。

事实上，我们可以借此使得历史视图变得更好，因此我在ListBox中添加了一个事件处理器：

1 < ListBox x:Name ="SearchTermHistory" SelectionChanged ="SearchTermHistory_SelectionChanged" />

对应在History.xaml.cs中的方法看起来像这样：

1 private void SearchTermHistory_SelectionChanged( object sender, SelectionChangedEventArgs e)

2 {

3     this .NavigationService.Navigate( new Uri( string .Format( " /Search/{0} " ,

4         SearchTermHistory.SelectedItem.ToString()), UriKind.Relative));

5 }

注意到我使用的URI格式了吗？它将从/Search/{term}开始，所以我们要为应用程序的导航框架做相应的映射。让我们回到MainPage.xaml并在UriMapper下添加这行：

1 < uriMapper:UriMapping Uri ="/Search/{term}" MappedUri ="/Views/Search.xaml?term={term}" />

现在我们要让Search.xaml页面能够处理它，所要要在Search.xaml.cs中的OnNavigatedTo中添加这个方法：

1 protected override void OnNavigatedTo(NavigationEventArgs e)

2 {

3     if ( this .NavigationContext.QueryString.ContainsKey( " term " ))

4     {

5         SearchTerm.Text = this .NavigationContext.QueryString[ " term " ].ToString();

6         SearchForTweetsEx();

7     }

8 }

现在当用户转到历史视图并选择一个项目后，程序将会自动执行搜索！

总结

结合其它控件与第三方的控件将帮助你保证甚至提高终端用户的用户体验。有大量的第三方控件厂商提供强大的控件包，你可以从我的Silverlight控件中获得他们的名单。你还一定要看看微软的Silverlight控件包和示例程序中使用的所有控件。

我们的应用程序已经可以工作得非常不错了，但我们的用户界面还可以更漂亮。在第六部分，让我们学习怎样在不影响功能的情况下优化模板。