ListView的使用和数据绑定

下面介绍一下ListView的相关使用，新建一个叫做TestList的项目。

在主页面的后台代码中加入一堆数据：

[csharp] view plain copy

1. protected override void OnNavigatedTo(NavigationEventArgs e)  
2.        {  
3.            if (e.NavigationMode == NavigationMode.New)  
4.            {  
5.                List<string>myList = new List<string>;  
6.                myList.Add("Why Test 1");  
7.                myList.Add("Why Test 2");  
8.                myList.Add("Why Test 3");  
9.                myList.Add("Why Test 4");  
10.            }  
11.        }  

然后在xaml页面拖拽一个Listview到页面上，并且命名为list1。

接下来就是把ListView的数据源绑定到后台定义的集合中。

只需要设置ListView的ItemsSource即可。完整的代码如下：

[csharp] view plain copy

1. using System;  
2. using System.Collections.Generic;  
3. using System.IO;  
4. using System.Linq;  
5. using Windows.Foundation;  
6. using Windows.Foundation.Collections;  
7. using Windows.UI.Xaml;  
8. using Windows.UI.Xaml.Controls;  
9. using Windows.UI.Xaml.Controls.Primitives;  
10. using Windows.UI.Xaml.Data;  
11. using Windows.UI.Xaml.Input;  
12. using Windows.UI.Xaml.Media;  
13. using Windows.UI.Xaml.Navigation;  
14.   
15. // “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkId=234238 上有介绍  
16.   
17. namespace TestList  
18. {  
19.     /// <summary>  
20.     /// 可用于自身或导航至 Frame 内部的空白页。  
21.     /// </summary>  
22.     public sealed partial class MainPage : Page  
23.     {  
24.         public MainPage()  
25.         {  
26.             this.InitializeComponent();  
27.         }  
28.   
29.         /// <summary>  
30.         /// 在此页将要在 Frame 中显示时进行调用。  
31.         /// </summary>  
32.         /// <param name="e">描述如何访问此页的事件数据。Parameter  
33.         /// 属性通常用于配置页。</param>  
34.         protected override void OnNavigatedTo(NavigationEventArgs e)  
35.         {  
36.             if (e.NavigationMode == NavigationMode.New)  
37.             {  
38.                 List<string>myList = new List<string>();  
39.                 myList.Add("Why Test 1");  
40.                 myList.Add("Why Test 2");  
41.                 myList.Add("Why Test 3");  
42.                 myList.Add("Why Test 4");  
43.   
44.                 list1.ItemsSource = myList;  
45.             }  
46.         }  
47.     }  
48. }  

对应的xaml的完整代码如下：

[html] view plain copy

1. <Page  
2.     x:Class="TestList.MainPage"  
3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
5.     xmlns:local="using:TestList"  
6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
8.     mc:Ignorable="d">  
9.   
10.     <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">  
11.         <ListView x:Name="list1" HorizontalAlignment="Center" Height="600" VerticalAlignment="Center" Width="500"/>  
12.     </Grid>  
13. </Page>  

运行效果如图所示：

ItemsSource为界面上显示的数据集合。

但是这样简单的显示一般很难满足需求，我们需要自定义复杂的ListView才行。

在xaml中如下修改：

[html] view plain copy

1. <Page  
2.     x:Class="TestList.MainPage"  
3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
5.     xmlns:local="using:TestList"  
6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
8.     mc:Ignorable="d">  
9.   
10.     <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">  
11.         <ListView x:Name="list1" HorizontalAlignment="Center" Height="600" VerticalAlignment="Center" Width="500">  
12.             <ListView.ItemTemplate>  
13.                 <DataTemplate>  
14.                     <StackPanel Orientation="Horizontal">  
15.                         <TextBox Text="{Binding}"/>  
16.                         <Button Content="{Binding}"/>  
17.                     </StackPanel>  
18.                 </DataTemplate>  
19.             </ListView.ItemTemplate>  
20.         </ListView>  
21.     </Grid>  
22. </Page>  

这样再运行的时候就可以显示多个控件了：

注释：直接Text="{Binding}"就是说数值直接等于上下文。

接下来看看ListView的其他用法。

1.选定模式：SelectionMode

SelectionMode="None"：列表中的各项无法被选择

SelectionMode="Single"：只能单项被选择

SelectionMode="Multiple"：可以多选模式

那么如何获得选中的对象呢？

拖一个按钮来做实验：

[html] view plain copy

1. <Page  
2.     x:Class="TestList.MainPage"  
3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
5.     xmlns:local="using:TestList"  
6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
8.     mc:Ignorable="d">  
9.   
10.     <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">  
11.         <ListView x:Name="list1" SelectionMode="Multiple"  
12.                   HorizontalAlignment="Center" Height="150" VerticalAlignment="Center" Width="500">  
13.             <ListView.ItemTemplate>  
14.                 <DataTemplate>  
15.                     <StackPanel Orientation="Horizontal">  
16.                         <TextBox Text="{Binding}"/>  
17.                         <Button Content="{Binding}"/>  
18.                     </StackPanel>  
19.                 </DataTemplate>  
20.             </ListView.ItemTemplate>  
21.         </ListView>  
22.         <Button Content="获得选中的对象" HorizontalAlignment="Center" Margin="0,200,0,0" VerticalAlignment="Center"/>  
23.     </Grid>  
24. </Page>  

双击按钮添加监听：

[csharp] view plain copy

1. private void Button_Click_1(object sender, RoutedEventArgs e)  
2.       {  
3.           //选中的单个项目：list1.SelectedItem  
4.           //选中的多个项目：list1.SelectedItems  
5.           Button button = (Button)sender;  
6.           button.Content = list1.SelectedItem;  
7.       }  

此时再运行，选中某项之后点击按钮便会发现按钮的内容发生了改变：

其中返回的SelectedItem为选中项的数据上下文。

2.选中事件：ItemClick

在使用这个事件之前需要启用ItemClick，开启方式： IsItemClickEnabled="True"。

接下来在控件的属性窗口可以找到有一个事件（小闪电图标），将其命名：Item_Click，按下回车。

自动跳转到了后台的代码页面，并且创建了相应的相应方法：

[csharp] view plain copy

1. private void Item_Click(object sender, ItemClickEventArgs e)  
2. {  
3.   
4. }  

e.ClickedItem为点击的选项。

可以用下面的代码来做一段测试：

[csharp] view plain copy

1. private void Item_Click(object sender, ItemClickEventArgs e)  
2. {  
3.     MessageDialog msg = new MessageDialog(e.ClickedItem.ToString());  
4.     msg.ShowAsync();  
5. }  

此时再点击就会出现选中的对应的数据了。

那么如何做到动态加载数据呢？比如从网上加载信息，加载多少显示多少是怎么实现的呢？

实现INotifyCollectionChanged接口即可。

当然win8中有自带的集合类：ObservableCollection，实现了INotifyCollectionChanged接口，其他操作基本和List一样。

使用的方法很简单，将原来的代码稍作修改即可：

[csharp] view plain copy

1. using System;  
2. using System.Collections.Generic;  
3. using System.Collections.ObjectModel;  
4. using System.Collections.Specialized;  
5. using System.IO;  
6. using System.Linq;  
7. using Windows.Foundation;  
8. using Windows.Foundation.Collections;  
9. using Windows.UI.Popups;  
10. using Windows.UI.Xaml;  
11. using Windows.UI.Xaml.Controls;  
12. using Windows.UI.Xaml.Controls.Primitives;  
13. using Windows.UI.Xaml.Data;  
14. using Windows.UI.Xaml.Input;  
15. using Windows.UI.Xaml.Media;  
16. using Windows.UI.Xaml.Navigation;  
17.   
18. // “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkId=234238 上有介绍  
19.   
20. namespace TestList  
21. {  
22.     /// <summary>  
23.     /// 可用于自身或导航至 Frame 内部的空白页。  
24.     /// </summary>  
25.     public sealed partial class MainPage : Page  
26.     {  
27.         ObservableCollection<string> myList = new ObservableCollection<string>();  
28.   
29.   
30.         public MainPage()  
31.         {  
32.             this.InitializeComponent();  
33.         }  
34.   
35.         /// <summary>  
36.         /// 在此页将要在 Frame 中显示时进行调用。  
37.         /// </summary>  
38.         /// <param name="e">描述如何访问此页的事件数据。Parameter  
39.         /// 属性通常用于配置页。</param>  
40.         protected override void OnNavigatedTo(NavigationEventArgs e)  
41.         {  
42.             if (e.NavigationMode == NavigationMode.New)  
43.             {  
44.                 myList.Add("Why Test 1");  
45.                 myList.Add("Why Test 2");  
46.                 myList.Add("Why Test 3");  
47.                 myList.Add("Why Test 4");  
48.   
49.                 list1.ItemsSource = myList;  
50.             }  
51.         }  
52.   
53.         private void Button_Click_1(object sender, RoutedEventArgs e)  
54.         {  
55.             //选中的单个项目：list1.SelectedItem  
56.             //选中的多个项目：list1.SelectedItems  
57.             myList.Add(DateTime.Now.ToString());  
58.           
59.         }  
60.   
61.         private void Item_Click(object sender, ItemClickEventArgs e)  
62.         {  
63.             MessageDialog msg = new MessageDialog(e.ClickedItem.ToString());  
64.             msg.ShowAsync();  
65.         }  
66.     }  
67. }