[譯稿]Silverlight入門：第五部分——整合其它控制項

這是Silverlight入門系列的第五部分。點擊這裡可以查看本系列的目錄。你可以下載C#或Visual Basic版本的本應用程式範例的完整專案檔。

在之前的章節中，我們最佳化了資料繫結，並將資料儲存在了我們的隔離儲存區 (Isolated Storage)地區。現在讓我們整合一些其它的控制項使得使用者體驗更好一些。

自動完成輸入框

記得每次搜尋以後，我們都將搜尋條件儲存為曆史資料嗎？讓我們通過在他們輸入時提供搜尋曆史來讓他們使用更方便。我們準備用Silverlight工具包中的一個控制項——自動完成輸入框來做這件事。

要做到這點，我們需要添加一個到System.Windows.Controls.Input的程式集引用，然後在你的Search.xaml檔案中添加一個xmlns：

1xmlns: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控制項包和樣本程式中使用的所有控制項。

我們的應用程式已經可以工作得非常不錯了，但我們的使用者介面還可以更漂亮。在第六部分，讓我們學習怎樣在不影響功能的情況下最佳化模板。