Windows 8 開發入門（二十）：GridView 進階——GroupStyle 與 DataTemplateSelector

前言

承接前文，本文深入 `GridView` 兩大進階功能：`GroupStyle` 實現分組顯示與標題樣式自訂，`DataTemplateSelector` 依據資料動態選擇不同 `DataTemplate`，達成同一列表中異構項目呈現。

一、GroupStyle 分組樣式

設定 `GridView.GroupStyle` 可控制群組標題（`HeaderTemplate`）與群組內項目面板（`Panel`）。

<GridView.GroupStyle>
  <GroupStyle>
    <GroupStyle.HeaderTemplate>
      <DataTemplate>
        <Grid Margin="1,0,0,6">
          <Button AutomationProperties.Name="組名稱" Content="{Binding GroupTitle}"/>
        </Grid>
      </DataTemplate>
    </GroupStyle.HeaderTemplate>
    <GroupStyle.Panel>
      <ItemsPanelTemplate>
        <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,50,0"/>
      </ItemsPanelTemplate>
    </GroupStyle.Panel>
  </GroupStyle>
</GridView.GroupStyle>

二、DataTemplateSelector 動態模板選擇

繼承 `DataTemplateSelector` 並覆寫 `SelectTemplateCore`，根據項目屬性回傳對應 `DataTemplate`。

1. 選擇器實作

public class TemplateSelector : DataTemplateSelector {
    public DataTemplate TextBoxTemplate { get; set; }
    public DataTemplate ImageTemplate { get; set; }

    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container) {
        var model = item as DataModel;
        if (model?.MainModel == typeof(TextBox)) return TextBoxTemplate;
        if (model?.MainModel == typeof(Image)) return ImageTemplate;
        return base.SelectTemplateCore(item, container);
    }
}

2. XAML 宣告資源與繫結選擇器

<Grid.Resources>
  <DataTemplate x:Key="imageTemp">
    <!-- 圖片為主模板：大圖、黑字 -->
    <Grid Width="250" Height="200" Background="#33CCCCCC"> ... </Grid>
  </DataTemplate>
  <DataTemplate x:Key="textboxTemp">
    <!-- 文字為主模板：小圖、白字 -->
    <Grid Width="250" Height="200" Background="#33CCCCCC"> ... </Grid>
  </DataTemplate>
</Grid.Resources>

<GridView ...>
  <GridView.ItemTemplateSelector>
    <local:TemplateSelector TextBoxTemplate="{StaticResource textboxTemp}"
                            ImageTemplate="{StaticResource imageTemp}"/>
  </GridView.ItemTemplateSelector>
</GridView>

3. 資料模型與分組資料來源

public class DataModel {
    public string txtTitle { get; set; }
    public string txtContent { get; set; }
    public string ImageUrl { get; set; }
    public Type MainModel { get; set; } // typeof(TextBox) 或 typeof(Image)
}

public class DataGroupModel {
    public string GroupTitle { get; set; }
    public ObservableCollection ItemContent { get; set; }
}

// 建構資料
var groups = new ObservableCollection {
    new DataGroupModel {
        GroupTitle = "玄幻小說",
        ItemContent = new ObservableCollection {
            new DataModel { MainModel=typeof(Image), txtTitle="盤龍", ..., ImageUrl="..." },
            new DataModel { MainModel=typeof(Image), txtTitle="縱橫輪回", ..., ImageUrl="..." },
            // ...
        }
    },
    new DataGroupModel {
        GroupTitle = "網游小說",
        ItemContent = new ObservableCollection {
            new DataModel { MainModel=typeof(TextBox), txtTitle="全職高手", ..., ImageUrl="..." },
            new DataModel { MainModel=typeof(TextBox), txtTitle="重生之賊行天下", ..., ImageUrl="..." },
            // ...
        }
    }
};

執行效果

左側「玄幻小說」組使用圖片為主模板（大圖、黑字）；右側「網游小說」組使用文字為主模板（小圖、白字），同一 `GridView` 完美呈現異構視覺風格。

原始碼下載：Win8Gridview2.rar