ListView的使用和数据绑定

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

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

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即可。完整的代码如下：

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
{
    ///
    /// 可用于自身或导航至 Frame 内部的空白页。
    ///
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        ///
        /// 在此页将要在 Frame 中显示时进行调用。
        ///
        /// 描述如何访问此页的事件数据。Parameter
        /// 属性通常用于配置页。
        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的完整代码如下：

<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中如下修改：

<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"：可以多选模式

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

拖一个按钮来做实验：

<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>

双击按钮添加监听：

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，按下回车。

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

private void Item_Click(object sender, ItemClickEventArgs e)
{

}

e.ClickedItem为点击的选项。

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

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

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

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

实现INotifyCollectionChanged接口即可。

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

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

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
{
    ///
    /// 可用于自身或导航至 Frame 内部的空白页。
    ///
    public sealed partial class MainPage : Page
    {
        ObservableCollection<string> myList = new ObservableCollection<string>();


        public MainPage()
        {
            this.InitializeComponent();
        }

        ///
        /// 在此页将要在 Frame 中显示时进行调用。
        ///
        /// 描述如何访问此页的事件数据。Parameter
        /// 属性通常用于配置页。
        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();
        }
    }
}