ListView的使用和数据绑定

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

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

[csharp]
view plaincopy

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

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



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

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

[csharp]
view plaincopy

using System;  
using System.Collections.Generic;  
using System.IO;  
using System.Linq;  
using Windows.Foundation;  
using Windows.Foundation.Collections;  
using Windows.UI.Xaml;  
using Windows.UI.Xaml.Controls;  
using Windows.UI.Xaml.Controls.Primitives;  
using Windows.UI.Xaml.Data;  
using Windows.UI.Xaml.Input;  
using Windows.UI.Xaml.Media;  
using Windows.UI.Xaml.Navigation;  
  
// “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkId=234238 上有介绍  
  
namespace TestList  
{  
    /// <summary>  
    /// 可用于自身或导航至 Frame 内部的空白页。  
    /// </summary>  
    public sealed partial class MainPage : Page  
    {  
        public MainPage()  
        {  
            this.InitializeComponent();  
        }  
  
        /// <summary>  
        /// 在此页将要在 Frame 中显示时进行调用。  
        /// </summary>  
        /// <param name="e">描述如何访问此页的事件数据。Parameter  
        /// 属性通常用于配置页。</param>  
        protected override void OnNavigatedTo(NavigationEventArgs e)  
        {  
            if (e.NavigationMode == NavigationMode.New)  
            {  
                List<string>myList = new List<string>();  
                myList.Add("Why Test 1");  
                myList.Add("Why Test 2");  
                myList.Add("Why Test 3");  
                myList.Add("Why Test 4");  
  
                list1.ItemsSource = myList;  
            }  
        }  
    }  
}  

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

[html]
view plaincopy

<Page  
    x:Class="TestList.MainPage"  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    xmlns:local="using:TestList"  
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
    mc:Ignorable="d">  
  
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">  
        <ListView x:Name="list1" HorizontalAlignment="Center" Height="600" VerticalAlignment="Center" Width="500"/>  
    </Grid>  
</Page>  

运行效果如图所示：



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

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

在xaml中如下修改：

[html]
view plaincopy

<Page  
    x:Class="TestList.MainPage"  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    xmlns:local="using:TestList"  
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
    mc:Ignorable="d">  
  
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">  
        <ListView x:Name="list1" HorizontalAlignment="Center" Height="600" VerticalAlignment="Center" Width="500">  
            <ListView.ItemTemplate>  
                <DataTemplate>  
                    <StackPanel Orientation="Horizontal">  
                        <TextBox Text="{Binding}"/>  
                        <Button Content="{Binding}"/>  
                    </StackPanel>  
                </DataTemplate>  
            </ListView.ItemTemplate>  
        </ListView>  
    </Grid>  
</Page>  

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



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

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

1.选定模式：SelectionMode

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

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

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

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

拖一个按钮来做实验：

[html]
view plaincopy

<Page  
    x:Class="TestList.MainPage"  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    xmlns:local="using:TestList"  
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
    mc:Ignorable="d">  
  
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">  
        <ListView x:Name="list1" SelectionMode="Multiple"  
                  HorizontalAlignment="Center" Height="150" VerticalAlignment="Center" Width="500">  
            <ListView.ItemTemplate>  
                <DataTemplate>  
                    <StackPanel Orientation="Horizontal">  
                        <TextBox Text="{Binding}"/>  
                        <Button Content="{Binding}"/>  
                    </StackPanel>  
                </DataTemplate>  
            </ListView.ItemTemplate>  
        </ListView>  
        <Button Content="获得选中的对象" HorizontalAlignment="Center" Margin="0,200,0,0" VerticalAlignment="Center"/>  
    </Grid>  
</Page>  

双击按钮添加监听：

[csharp]
view plaincopy

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

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



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

2.选中事件：ItemClick

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

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

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

[csharp]
view plaincopy

private void Item_Click(object sender, ItemClickEventArgs e)  
{  
  
}  

e.ClickedItem为点击的选项。

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

[csharp]
view plaincopy

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

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

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

实现INotifyCollectionChanged接口即可。

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

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

[csharp]
view plaincopy

using System;  
using System.Collections.Generic;  
using System.Collections.ObjectModel;  
using System.Collections.Specialized;  
using System.IO;  
using System.Linq;  
using Windows.Foundation;  
using Windows.Foundation.Collections;  
using Windows.UI.Popups;  
using Windows.UI.Xaml;  
using Windows.UI.Xaml.Controls;  
using Windows.UI.Xaml.Controls.Primitives;  
using Windows.UI.Xaml.Data;  
using Windows.UI.Xaml.Input;  
using Windows.UI.Xaml.Media;  
using Windows.UI.Xaml.Navigation;  
  
// “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkId=234238 上有介绍  
  
namespace TestList  
{  
    /// <summary>  
    /// 可用于自身或导航至 Frame 内部的空白页。  
    /// </summary>  
    public sealed partial class MainPage : Page  
    {  
        ObservableCollection<string> myList = new ObservableCollection<string>();  
  
  
        public MainPage()  
        {  
            this.InitializeComponent();  
        }  
  
        /// <summary>  
        /// 在此页将要在 Frame 中显示时进行调用。  
        /// </summary>  
        /// <param name="e">描述如何访问此页的事件数据。Parameter  
        /// 属性通常用于配置页。</param>  
        protected override void OnNavigatedTo(NavigationEventArgs e)  
        {  
            if (e.NavigationMode == NavigationMode.New)  
            {  
                myList.Add("Why Test 1");  
                myList.Add("Why Test 2");  
                myList.Add("Why Test 3");  
                myList.Add("Why Test 4");  
  
                list1.ItemsSource = myList;  
            }  
        }  
  
        private void Button_Click_1(object sender, RoutedEventArgs e)  
        {  
            //选中的单个项目：list1.SelectedItem  
            //选中的多个项目：list1.SelectedItems  
            myList.Add(DateTime.Now.ToString());  
          
        }  
  
        private void Item_Click(object sender, ItemClickEventArgs e)  
        {  
            MessageDialog msg = new MessageDialog(e.ClickedItem.ToString());  
            msg.ShowAsync();  
        }  
    }  
}