Windows 8 Store Apps 開發實戰（11）：ListView 與 GridView 基礎應用 — 資料綁定、選取模式、點擊與滑動互動

前言

ListView（垂直列表）與 GridView（水平網格）是 WinRT 最核心的兩大集合控件，均繼承自 ListViewBase → Selector → ItemsControl。本文將並列示範兩者的基礎用法：資料綁定、項目模板、容器樣式、面板佈局、選取模式、點擊與滑動互動的組合邏輯。

一、共通資源定義

<Page.Resources>
    <DataTemplate x:Key="ItemTemplate">
        <StackPanel Orientation="Vertical">
            <TextBlock Text="{Binding Name}" FontSize="14.667" HorizontalAlignment="Left"/>
            <TextBlock Text="{Binding Age}" FontSize="14.667" HorizontalAlignment="Left"/>
        </StackPanel>
    </DataTemplate>

    <Style x:Key="ItemContainerStyle" TargetType="ListViewItem">  <!-- GridView 用 GridViewItem -->
        <Setter Property="Width" Value="292"/>
        <Setter Property="Height" Value="80"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Margin" Value="0"/>  <!-- 實際需 -4 才能無間距 -->
        <Setter Property="Background" Value="Blue"/>
    </Style>

    <!-- 僅 GridView 需要 ItemsPanel -->
    <ItemsPanelTemplate x:Key="ItemsPanel">
        <WrapGrid MaximumRowsOrColumns="3" Orientation="Vertical"
                VerticalChildrenAlignment="Top" HorizontalChildrenAlignment="Left"/>
    </ItemsPanelTemplate>
</Page.Resources>

二、ListView 完整範例

XAML

<Grid Background="Transparent">
    <Grid Margin="120 0 0 0">
        <TextBlock x:Name="lblMsg" FontSize="14.667"/>
        <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="0 30 0 0">
            <CheckBox x:Name="chkIsSwipeEnabled" Content="IsSwipeEnabled"/>
            <CheckBox x:Name="chkIsItemClickEnabled" Content="IsItemClickEnabled" Margin="10 0 0 0"/>
        </StackPanel>

        <ListView x:Name="listView"
                  Width="300" VerticalAlignment="Top" HorizontalAlignment="Left"
                  Margin="0 60 10 10"
                  BorderThickness="1" BorderBrush="Red" Background="LightBlue"
                  ItemTemplate="{StaticResource ItemTemplate}"
                  ItemContainerStyle="{StaticResource ItemContainerStyle}"
                  ScrollViewer.VerticalScrollBarVisibility="Auto"
                  ScrollViewer.HorizontalScrollBarVisibility="Auto"
                  SelectionMode="Single"
                  SelectionChanged="listView_SelectionChanged"
                  IsSwipeEnabled="{Binding IsChecked, ElementName=chkIsSwipeEnabled}"
                  IsItemClickEnabled="{Binding IsChecked, ElementName=chkIsItemClickEnabled}"
                  ItemClick="listView_ItemClick"/>
    </Grid>
</Grid>

後台邏輯

public sealed partial class ListViewDemo : Page
{
    public ListViewDemo()
    {
        this.InitializeComponent();
        listView.ItemsSource = TestData.GetEmployees(); // 綁定資料
    }

    private void listView_ItemClick(object sender, ItemClickEventArgs e)
    {
        lblMsg.Text = "被單擊的 employee 的 name 為：" + (e.ClickedItem as Employee).Name;
    }

    private void listView_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (e.AddedItems.Count > 0)
            lblMsg.Text = "此次操作被選中的 employee 的 name 為：" + (e.AddedItems[0] as Employee).Name;
        else
            lblMsg.Text = "此次操作沒有被選中的 employee";
    }
}

三、GridView 完整範例

XAML

<Grid Background="Transparent">
    <StackPanel Margin="120 0 0 0">
        <TextBlock x:Name="lblMsg" FontSize="14.667"/>
        <StackPanel Orientation="Horizontal" Margin="0 10 0 0">
            <CheckBox x:Name="chkIsSwipeEnabled" Content="IsSwipeEnabled"/>
            <CheckBox x:Name="chkIsItemClickEnabled" Content="IsItemClickEnabled" Margin="10 0 0 0"/>
        </StackPanel>

        <GridView x:Name="gridView"
                  VerticalAlignment="Top" Margin="0 10 10 0"
                  BorderThickness="1" BorderBrush="Red" Background="LightBlue"
                  ItemTemplate="{StaticResource ItemTemplate}"
                  ItemContainerStyle="{StaticResource ItemContainerStyle}"
                  ItemsPanel="{StaticResource ItemsPanel}"
                  ScrollViewer.VerticalScrollBarVisibility="Auto"
                  ScrollViewer.HorizontalScrollBarVisibility="Auto"
                  SelectionMode="Single"
                  SelectionChanged="gridView_SelectionChanged"
                  IsSwipeEnabled="{Binding IsChecked, ElementName=chkIsSwipeEnabled}"
                  IsItemClickEnabled="{Binding IsChecked, ElementName=chkIsItemClickEnabled}"
                  ItemClick="gridView_ItemClick"/>
    </StackPanel>
</Grid>

後台邏輯

public sealed partial class Demo : Page
{
    public Demo()
    {
        this.InitializeComponent();
        gridView.ItemsSource = TestData.GetEmployees();
    }

    private void gridView_ItemClick(object sender, ItemClickEventArgs e)
    {
        lblMsg.Text = "被單擊的 employee 的 name 為：" + (e.ClickedItem as Employee).Name;
    }

    private void gridView_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (e.AddedItems.Count > 0)
            lblMsg.Text = "此次操作被選中的 employee 的 name 為：" + (e.AddedItems[0] as Employee).Name;
        else
            lblMsg.Text = "此次操作沒有被選中的 employee";
    }
}

四、關鍵屬性與互動邏輯深度解析

四種組合行為對照表

常用方法

• SelectedItems：取得所有被選項目
• SelectAll()：全選
• ScrollIntoView(item, alignment)：捲動到指定項目，alignment 可為 Default（最近邊緣）或 Leading（前邊緣）

五、資料虛擬化與分頁載入提示

本範例一次性載入所有資料。大量資料時建議：

1. 使用 VirtualizingStackPanel（ListView 預設）或 WrapGrid（GridView 預設）實現 UI 虛擬化
2. 配合 ISupportIncrementalLoading 介面實現資料分頁載入（詳見本系列「資料綁定」章節）

六、小結

ListView 與 GridView 共享大部分 API，核心差異僅在預設 ItemsPanel（垂直 StackPanel vs 水平 WrapGrid）與滑動方向。掌握 IsItemClickEnabled、IsSwipeEnabled、SelectionMode 三者的組合邏輯，即可精準控制使用者互動體驗。

原始碼下載：https://files.cnblogs.com/webabcd/Windows8.rar