[Win8]Windows8開發筆記（九）：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{    /// <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的完整代碼如下：

<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{    /// <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();        }    }}