Windows 8实用窍门系列：20.Windows 8中的GridView使用(二)和DataTemplateSelector

　　在本文中所讲述内容的实例仍然沿用于上篇文章，有什么疑惑可以参考上篇文章。

　　一 GroupStyle 在GridView控件中我们可以对数据进行分组显示，通过对GridView的GroupStyle进行控制，分别设置GroupStyle.HeaderTemplate和GroupStyle.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类编写并且根据后台数据选择相应的样式模版进行呈现。

　　在之前代码的基础上我们需要做以下工作：

　　1.编写一个类继承于DataTemplateSelector

public class TemplateSelector : DataTemplateSelector
{
/// <summary>
/// 第一种文本显示模版
/// </summary>
public DataTemplate TextBoxTemplate { get; set; }
/// <summary>
/// 第二种图片为主显示模版
/// </summary>
public DataTemplate ImageTemplate { get; set; }
/// <summary>
/// 核心方法：根据不同的数据源类型返回给前台不同的样式模版
/// </summary>
/// <param name="item"></param>
/// <param name="container"></param>
/// <returns></returns>
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
DataModel model = item as DataModel;
string typeName = model.MainModel.Name;
if (typeName == typeof(TextBox).Name)//根据数据源设置的数据显示模式返回前台样式模版
{
return TextBoxTemplate;
}
if (typeName == typeof(Image).Name)
{
return ImageTemplate;
}
return null;
}
}

　　2.将后台的DataTemplateSelector绑定到前台，并且设置不同的样式资源

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

　　3.定义文本显示模式样式和图片为主模式

<!--图片为主模式-->
<DataTemplate x:Key="imageTemp">
<Grid Width="250" Height="200" Background="#33CCCCCC">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Margin="5,0,0,0" Source="{Binding ImageUrl}" Stretch="None"></Image>
<TextBlock Grid.Column="1" Margin="15,15,0,0" Foreground="Black" Text="{Binding txtTitle}"
FontWeight="Bold" FontSize="16" TextWrapping="Wrap"/>
<TextBlock Grid.Column="1" Margin="15,40,0,0" Foreground="Black" Text="{Binding txtContent}"
FontWeight="Light" FontSize="14" TextWrapping="Wrap"/>
</Grid>
</DataTemplate>
<!--文本显示模式样式-->
<DataTemplate x:Key="textboxTemp">
<Grid Width="250" Height="200" Background="#33CCCCCC">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Margin="5,0,0,0" Source="{Binding ImageUrl}" Width="50" Height="80" Stretch="Fill"></Image>
<TextBlock Grid.Column="1" Margin="15,15,0,0" Foreground="White" Text="{Binding txtTitle}"
FontWeight="Light" FontSize="14" TextWrapping="Wrap"/>
<TextBlock Grid.Column="1" Margin="15,40,0,0" Foreground="White" Text="{Binding txtContent}"
FontWeight="Light" FontSize="12" TextWrapping="Wrap"/>
</Grid>
</DataTemplate>

　　4.数据源增加显示模式区别字段，然后设置数据，请见下方红色部分。

public class DataModel
{
public string txtTitle { get; set; }

public string txtContent { get; set; }

public string ImageUrl { get; set; }

/// <summary>
/// 主要显示模式 TextBox文字主要显示模式，Image：以图片为主要显示模式
/// </summary>
public Type MainModel { get; set; }
}
public ObservableCollection<DataGroupModel> GetDataGroup()
{
return new ObservableCollection<DataGroupModel>(){
new DataGroupModel(){ GroupTitle="玄幻小说",
ItemContent=new ObservableCollection<DataModel>(){
new DataModel(){ MainModel=typeof(Image), txtTitle="盘龙",txtContent="大小的血睛鬃毛狮，力大无穷的紫睛金毛猿，毁天灭地的九头蛇皇，携带着毁灭雷电的恐怖雷龙……这里无奇不有，这是一个广博的魔幻世界。", ImageUrl="http://image.qidian.com/books/1017141/1017141.jpg" },
new DataModel(){ MainModel=typeof(Image), txtTitle="纵横轮回",txtContent="李沐然，本为身怀诸子百家所长的大神通者，在收取世间最后一颗神雷珠之时和神雷珠一道重生异世。    神雷之力，刑罚天下", ImageUrl="http://image.qidian.com/books/1.jpg" },
new DataModel(){ MainModel=typeof(Image), txtTitle="巫师世界",txtContent="穿越到异世界成为普通的小家族子弟，带着具有分析能力的生物芯片开始强大之旅..... ", ImageUrl="http://image.qidian.com/books/2443169/2443169.jpg" },
new DataModel(){ MainModel=typeof(Image), txtTitle="杀神",txtContent="在这个人吃人的疯狂世界，神已无力回天，就让我踏着漫天诸神的累累尸骨来普渡这芸芸众生……", ImageUrl="http://image.qidian.com/books/1911245/1911245.jpg" }
}
},
new DataGroupModel(){ GroupTitle="网游小说",
ItemContent=new ObservableCollection<DataModel>(){
new DataModel(){ MainModel=typeof(TextBox), txtTitle="全职高手",txtContent="网游荣耀中被誉为教科书级别的顶尖高手，因为种种原因遭到俱乐部的驱逐，离开职业圈的他寄身于一家网吧成了一个小小的网管， ", ImageUrl="http://image.qidian.com/books/1887208/1887208.jpg" },
new DataModel(){ MainModel=typeof(TextBox), txtTitle="重生之贼行天下",txtContent="孤寂的行者，追逐阴影的脚步，这是盗贼的赞歌。 带着一个一百八十级的大盗贼的记忆，回到了十年前，命运给聂言开了一个玩笑", ImageUrl="http://image.qidian.com/books/1693876/1693876.jpg" },
new DataModel(){ MainModel=typeof(TextBox), txtTitle="琥珀之剑",txtContent="命运在我眼前分开成两条互不相关笔直的线，一条通向火焰中熊熊燃烧的宫殿与城池，王国倾覆，大地承载苦难，生灵在这火中忍受煎熬", ImageUrl="http://image.qidian.com/books/1784765/1784765.jpg" },
new DataModel(){ MainModel=typeof(TextBox), txtTitle="独裁之剑",txtContent="来自银耀天堂的智慧之光，自然之力的守护者， 这是阿克蒙斯神位德鲁伊的王者传奇。", ImageUrl="http://image.qidian.com/books/2172318/2172318.jpg" }
}
}
};
}

　　最后我们看效果如下，左边是图片为主显示模式的黑色字体和大图，右边是文本为主显示模式的白色字体和小图。如需源码请点击 Win8Gridview2.rar 下载。