博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Silverlight入门:第五部分 - 整合其它控件
阅读量:5857 次
发布时间:2019-06-19

本文共 3142 字,大约阅读时间需要 10 分钟。

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

自动完成输入框

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

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

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

我们还要在这里将自动完成输入框的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控件包和示例程序中使用 的所有控件。

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

转载地址:http://naojx.baihongyu.com/

你可能感兴趣的文章
nagios的web管理控制台-nagiosQL的安装和配置
查看>>
oracle数据库之sql语句使用
查看>>
ORA-01950: 对表空间 'USERS' 无权限
查看>>
Android笔记:Wake Lock
查看>>
js网页禁止复制-禁止另存为-禁止选择-禁止鼠标右键代码
查看>>
Java:简单的设置自己的Exception错误提示
查看>>
Java学习路线
查看>>
android 获取网络数据,回传到本地用TextView显示乱码问题解决方法
查看>>
我的友情链接
查看>>
centos7安装JDK1.8的两种方式
查看>>
myBatis之cache标签使用详解
查看>>
红黑树(Red-Black Trees)(2)
查看>>
如何在本地搭建Docker-Registry
查看>>
python实现队列
查看>>
ORACLE RAC运行在300G内存以上需要考虑的东西
查看>>
用PHP编写一个APP的API
查看>>
OAuth HTTP认证 bash版本
查看>>
Spring笔记——13.Spring的AOP
查看>>
Elasticsearch 错误小结
查看>>
关于linux环境变量$PATH的细节
查看>>