Windows 8 風格應用開發入門：ListView 控件進階應用

ListView 是垂直列表呈現的核心控件，廣泛用於貼靠視圖、主從介面、分組資料展示。本文涵蓋靜態列表、主從聯動、多選模式、分組顯示等實戰模式。

ListView 核心屬性與事件

SelectionMode 選取模式詳解

• None：不可選取，純顯示用途
• Single：單選，適合主從介面左側選單
• Multiple：多選，按住 Ctrl/Shift 可連續選取
• Extended：進階多選，支援不連續範圍選取

五種實戰呈現模式

模式一：靜態唯讀列表

設定 SelectionMode="None"，僅供瀏覽。

<ListView x:Name="listView1" 
          SelectionMode="None"
          ItemTemplate="{StaticResource StoreFrontTitleTemplate}" />

<DataTemplate x:Key="StoreFrontTitleTemplate">
    <TextBlock Text="{Binding Name}" FontSize="18" Margin="10"/>
</DataTemplate>

模式二：主從介面

左側 ListView 單選，右側顯示詳細內容。關鍵在於右側容器的 DataContext 繫結至 ListView 的 SelectedItem。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="320"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    
    <ListView x:Name="masterList"
              ItemTemplate="{StaticResource MessageListImageTemplate}"
              ItemsPanel="{StaticResource MessageListItemsPanelTemplate}"
              SelectionMode="Single" />
    
    <ScrollViewer Grid.Column="1" 
                  DataContext="{Binding SelectedItem, ElementName=masterList}">
        <!-- 詳細內容樣板 -->
    </ScrollViewer>
</Grid>

模式三：混合選取模式

左側單選分類，右側多選項目。

<ListView x:Name="categoryList" SelectionMode="Single" ... />
<ListView x:Name="itemList" SelectionMode="Multiple" ... />

模式四：自訂標題

使用 HeaderTemplate 添加列表標題區塊。

<ListView.HeaderTemplate>
    <DataTemplate>
        <TextBlock Text="訊息列表" FontSize="24" FontWeight="Bold" Margin="10,0"/>
    </DataTemplate>
</ListView.HeaderTemplate>

模式五：資料分組顯示

配合 CollectionViewSource 與 GroupStyle 實現分組。

<ListView x:Name="groupedList"
          ItemsSource="{Binding Source={StaticResource cvsGroups}}>
    <ListView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}" FontSize="22" FontWeight="Bold" Margin="10"/>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
            <GroupStyle.Panel>
                <ItemsPanelTemplate>
                    <VariableSizedWrapGrid Orientation="Vertical"/>
                </ItemsPanelTemplate>
            </GroupStyle.Panel>
        </GroupStyle>
    </ListView.GroupStyle>
</ListView>

// C# 程式碼：建立分組資料來源
var cvs = new CollectionViewSource();
cvs.IsSourceGrouped = true;
cvs.Source = GetGroupedData(); // 回傳 IObservableVector<IGroupInfo>
this.Resources["cvsGroups"] = cvs;

貼靠視圖應用建議

ListView 是貼靠視圖（320px 寬度）的首選控件：

• 單欄垂直捲動符合窄版面操作習慣
• 項目高度自適應，支援虛擬化效能優化
• 選取模式可根據功能切換

下一章將介紹 GridView 的水平佈局與分組進階技巧。