Windows 8 應用開發：進階資料繫結 - ListView、GridView、分組與語意縮放

前言

繼基礎繫結後，本文深入探討 Windows 8 中最常用的集合控制項：ListView 與 GridView，以及進階的分組顯示與 SemanticZoom 語意縮放功能。

ListView 與 GridView 比較

ListView 完整實作

自訂 ItemTemplate

<Page.Resources>
    <DataTemplate x:Key="ContactTemplate">
        <Grid Margin="10">
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Thumbnail}" Height="60" Width="60" Margin="0,0,10,0"/>
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{Binding Email}" Style="{StaticResource ContactEmailStyle}"/>
                    <TextBlock Text="{Binding Author}" Style="{StaticResource ContactAuthorStyle}"/>
                </StackPanel>
            </StackPanel>
        </Grid>
    </DataTemplate>
    
    <Style x:Key="ContactEmailStyle" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="Segoe UI Light"/>
        <Setter Property="FontSize" Value="18"/>
    </Style>
    <Style x:Key="ContactAuthorStyle" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="Segoe UI Light"/>
        <Setter Property="FontSize" Value="14"/>
    </Style>
</Page.Resources>

<ListView x:Name="lvMainListView"
          ItemTemplate="{StaticResource ContactTemplate}"
          SelectionMode="Single"
          SelectionChanged="lvMainListView_SelectionChanged_1" />

後端程式碼

private ObservableCollection Contacts = new ObservableCollection();

private void LoadContacts()
{
    Contacts.Add(new Contact 
    { 
        Email = "qq34506@hotmail.com", 
        Author = "Kevin Fan", 
        Thumbnail = new BitmapImage(new Uri("ms-appx:///Assets/60Mail01.png")) 
    });
    // ...更多聯絡人
    lvMainListView.ItemsSource = Contacts;
}

GridView 完整實作

自訂 ItemsPanel - WrapGrid 配置

<Page.Resources>
    <ItemsPanelTemplate x:Key="GridViewItemsPanel">
        <WrapGrid MaximumRowsOrColumns="2" />
    </ItemsPanelTemplate>
</Page.Resources>

<GridView x:Name="gvMainGridView"
          ItemTemplate="{StaticResource ContactTemplate}"
          ItemsPanel="{StaticResource GridViewItemsPanel}"
          SelectionMode="Single"
          SelectionChanged="gvMainGridView_SelectionChanged_1" />

GridView 分組顯示

XAML 定義 GroupStyle

<GridView x:Name="gvMainGridView" ...>
    <GridView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <TextBlock Text='{Binding Role}' Foreground="White" FontSize="25" Margin="5" />
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
        </GroupStyle>
    </GridView.GroupStyle>
</GridView>

後端資料分組邏輯

private List AllContacts = new List();
private CollectionViewSource ContactCollection = new CollectionViewSource 
{ 
    IsSourceGrouped = true, 
    ItemsPath = new PropertyPath("Contacts") 
};

public MainPage()
{
    this.InitializeComponent();
    LoadContacts();
    
    var groupedContacts = AllContacts
        .GroupBy(x => x.Role)
        .Select(x => new GroupContactList { Role = x.Key, Contacts = x.ToList() });
    
    ContactCollection.Source = groupedContacts.ToList();
    gvMainGridView.ItemsSource = ContactCollection.View;
}

public class GroupContactList
{
    public string Role { get; set; }
    public List Contacts { get; set; }
}

SemanticZoom 語意縮放

結合縮放視圖與分組導航：

<SemanticZoom x:Name="MainZoomControl">
    <!-- 縮小時檢視：群組標題總覽 -->
    <SemanticZoom.ZoomedOutView>
        <GridView x:Name="gvZoomedOutGridView"
                  ItemTemplate="{StaticResource ZoomedOutBookTemplate}">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
        </GridView>
    </SemanticZoom.ZoomedOutView>
    
    <!-- 放大時檢視：詳細分組內容 -->
    <SemanticZoom.ZoomedInView>
        <GridView x:Name="gvZoomedInGridView"
                  ItemTemplate="{StaticResource ContactTemplate}"
                  ItemsPanel="{StaticResource GridViewItemsPanel}"
                  ItemsSource="{Binding Source={StaticResource ContactCollection}}">
            <GridView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <TextBlock Text='{Binding Role}' Foreground="White" FontSize="25" Margin="5" />
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid Orientation="Vertical" Height="400" />
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </GridView.GroupStyle>
        </GridView>
    </SemanticZoom.ZoomedInView>
</SemanticZoom>

縮放視圖資料來源

gvZoomedOutGridView.ItemsSource = ContactCollection.View.CollectionGroups;

關鍵類別與屬性總結

• CollectionViewSource.IsSourceGrouped：啟用分組
• CollectionViewSource.ItemsPath：指定群組內項目屬性路徑
• GroupStyle.HeaderTemplate：群組標題樣板
• GroupStyle.Panel：群組內項目排列面板
• SemanticZoom.ZoomedInView/ZoomedOutView：雙視圖模式
• VariableSizedWrapGrid：支援跨行跨列的彈性網格

原始碼下載

Win8DataBinding.zip - 完整進階繫結範例專案