为 UWP 应用实现 Windows 10 GridView
4.80/5 (4投票s)
为 UWP 应用实现 Windows 10 GridView
1. 引言
Windows 10 已经发布，旨在取代所有以前的 Windows 版本。不再需要单独针对桌面、手机、Xbox 等 Windows 版本。现在只有一个。我们只需针对通用 Windows 平台 (UWP)，我们的应用将自动在所有 Windows 10 实现上运行。
在本文中，我将介绍如何使用 GridView XAML 控件。
对于刚接触通用 Windows 平台应用的用户，请参阅 下面的 链接...
2. 目录
3. 概述
GridView 是一个灵活的 WPF 控件，用于显示数据集合。这些集合可以按您选择的任何类别进行分组。每个分组都可以单独定制，从而提供了更大的自由度来定制数据的显示。
将 GridView 视为 ListView 控件的集合。
对于每个类别或组，我们都有一个模型类来定义其数据。对于每种数据类型，我们都会创建模板来定义组标题、正文等的显示效果。
对于每个数据项，我们都有一个模型类来定义其数据。对于每个数据项的数据类型，我们都会创建模板来定义数据如何显示。
再加上语义缩放等控件，我们就拥有了一个强大的显示系统。
GridView 的可能用途包括：
- 按首字母分组显示联系人
- 应用的首页，按类别分组显示所有应用功能。每个组都可以单独格式化，因为它们的数据模型不同。
在本例中，我将假设我们使用 GridView 来创建一个音乐应用。然后我们将按类别显示歌曲。
4. 数据模型
要创建音乐应用，我们需要创建一个模型来定义：
- 一首单独的歌曲
- 一个用于存储特定类别或流派歌曲的集合
- 一个包含所有流派的组
1. 对于歌曲模型，我们有：
public class Song
{
public string Title {get; set;}
public string Genre {get; set;}
public string Image {get; set;}
}
2. 对于我们的组模型，我们有：
public class SongGroup
{
public string Title {get; set;}
public string Image {get; set;}
public ObservableCollection<Song> Items {get; set;}
}
在每个组中，我们可以存储来自不同流派的音乐。例如：爵士、摇滚、嘻哈等。
3. 现在我们将所有音乐集合在一起，形成一个单一的歌曲集合 (SongGroups)。这可以在我们的 ViewModel 或代码隐藏中完成。
public class MainPageViewModel
{
public ObservableCollection<SongGroup> GroupedMusicList {get; set;}
public MainPageViewModel()
{
GroupedMusicList = DataManager.GetMusicList();
}
// Other stuff in view model
}
5. 测试数据
下一步是获取显示所需的数据。包含的示例项目包含一个 JSON 文件中的示例数据，以及一个用于将数据加载到模型中的辅助方法。
由于这不是关于加载 JSON 数据的教程，我们将假设数据已加载。
6. 代码隐藏
代码隐藏文件将定义我们的 ViewModel 类。模型作为属性公开，以便 XAML 可以直接使用它。
public sealed partial class MainPage : Page
{
public MainPageViewModel MainModel { get; }
public MainPage()
{
InitializeComponent();
MainModel = new MainPageViewModel();
}
}
7. XAML 代码
现在我们将看到用于显示数据的 XAML。
7.1. CollectionViewSource
GridView 控件最重要的特性是它显示集合的集合。因此，标准的绑定将不起作用。为此，我们需要一个新的控件。这就是 CollectionViewSource。它以 GridView 期望的格式提供数据。
<CollectionViewSource
x:Name="ContactGroupsSource"
Source="{x:Bind MainModel.MusicList}"
IsSourceGrouped="true"
ItemsPath="Items"
/>
7.1.1. Source
Source 属性告诉控件您的数据集合在哪里。
对于 Source，我使用的是新的 Windows 10 {x:Bind} 绑定语句，因为它是在编译时静态绑定的，因此比旧的 {Binding} 语句具有更高的性能。
请注意，我没有使用 DataContext。相反，我引用了代码隐藏文件中的 MainModel 属性。
注意： 在当前版本的 Visual Studio 2015 中，数据绑定错误可能不会被正确报告。如果按 F5 启动应用失败，请检查输出窗口。它将列出错误的绑定。
注意： 在当前版本的 Visual Studio 2015 中，如果数据绑定不正确，IDE 可能会冻结。隐藏可视化编辑器可以防止此问题。
7.1.2. IsSourceGrouped="true"
顶级集合是 SongGroupModel 模型的集合。IsSourceGrouped="true" 告诉控件 SongGroupModel 代表一个单独的类别（蓝调、古典、乡村等）。
当 IsSourceGrouped="true" 时，ItemsPath 代表单个歌曲的集合。在这种情况下，它指向 Items（这是一个歌曲集合）。
7.1.3. IsSourceGrouped="false"
如果我们不想按类别分组项目，则将 IsSourceGrouped="false"。
当 IsSourceGrouped="false" 时，ItemsPath 将被忽略。Source 将指向 Song 的集合。
使用此
<CollectionViewSource
x:Name="UngroupedMusicListSource"
Source="{x:Bind MainModel.UngroupedMusicList}"
IsSourceGrouped="False"
/>
会得到此结果。
7.2. GridView Control
现在所有基础设置都已就位，我们可以讨论 GridView 控件了。
<GridView ItemsSource="{Binding Source={StaticResource GroupedMusicListSource}}"
Name="GuestGridView"
IsItemClickEnabled="True"
ItemClick="GuestGridView_ItemClick" >
</GridView>
7.2.1. ItemsSource
对于 ItemsSource，我们使用数据绑定来获取数据。但是，您的数据绑定不是常规的。
ItemsSource="{Binding Source={StaticResource GroupedMusicListSource}}"
首先，ItemsSource 有一个绑定。
其次，源也被绑定。没有这个双重绑定，数据将不会显示。
简单地切换数据源可以改变分组。对于分组，我们使用 GroupedMusicListSource。对于未分组，我们使用 UngroupedMusicListSource。
7.2.2. IsItemClickEnabled="True"
对于 IsItemClickEnabled，我们将 IsItemClickEnabled 设置为 "True"。这允许数据项充当按钮并触发功能。
7.3. GridView.GroupStyle
GridView.GroupStyle 控制单个组的显示效果。
在我们的示例中，我们将使用 HeaderTemplate 来定义组的标题。
<GridView.GroupStyle >
<GroupStyle>
<GroupStyle.HeaderTemplate >
<DataTemplate x:DataType="models:SongGroupModel" >
<!-- Code to define how headers are displayed -->
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
7.3.1. x:DataType
x:DataType 告诉编译器数据模板中期望的数据类型。在使用 x:Bind 语句时，这是必需的。
在示例中，标题只是一个带有流派名称和向右箭头的按钮。此处包含是为了完整性。
流派标题使用 {x:Bind} 显示。
<Button
Foreground="{ThemeResource ApplicationHeaderForegroundThemeBrush}"
IsEnabled="{x:Bind HasGroupDetails}"
Click="Header_Click"
Style="{StaticResource TextBlockButtonStyle}" >
<RelativePanel >
<TextBlock
Name="TitleBlock"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignVerticalCenterWithPanel="True"
Text="{x:Bind Title}" Margin="0,0,10,0"
Style="{StaticResource TitleTextBlockStyle}" />
<TextBlock
RelativePanel.RightOf="TitleBlock"
RelativePanel.AlignVerticalCenterWithPanel="True"
Text="{StaticResource ChevronGlyph}"
FontFamily="Segoe MDL2 Assets"
FontWeight="Normal"
Style="{StaticResource TitleTextBlockStyle}" />
</RelativePanel>
</Button>
7.4. GridView.ItemTemplate
GridView.ItemTemplate 允许我们格式化单个项目的显示方式。
<GridView.ItemTemplate>
<DataTemplate x:DataType="models:SongModel" >
<!-- Code to define how data items are displayed -->
</DataTemplate>
</GridView.ItemTemplate>
同样，为了完整性，这里是格式化数据项的代码。它只是一个堆叠面板，显示标题、专辑和艺术家。
<StackPanel
Orientation="Horizontal"
HorizontalAlignment="Center"
Width="300"
BorderThickness="1" BorderBrush="DarkBlue"
Background="AliceBlue"
>
<StackPanel HorizontalAlignment="Center" Padding="5" >
<StackPanel Orientation="Horizontal" >
<TextBlock Text="Title:" FontWeight="Bold" />
<TextBlock Name="AlbumBlock" Margin="5,0,0,0"
Text="{x:Bind Title}" />
</StackPanel>
<StackPanel Orientation="Horizontal" >
<TextBlock Text="Album:" FontWeight="Bold" />
<TextBlock Name="ArtistBlock" Margin="5,0,0,0"
Text="{x:Bind Album}" />
</StackPanel>
<StackPanel Orientation="Horizontal" >
<TextBlock Text="Artist:" FontWeight="Bold" />
<TextBlock Name="TitleBlock" Margin="5,0,0,0"
Text="{x:Bind Artist}" />
</StackPanel>
</StackPanel>
</StackPanel>
关注点
- 此控件在 Windows 8/8.1 上更常见，可能是因为它在 Visual Studio 的标准模板中使用过。
- 我正在使用免费的 Visual Studio 2015 社区版：https://www.visualstudio.com/en-us/products/visual-studio-community-vs.aspx。
- 在包含的项目中，ModelGroupBase、RelayCommand 和 ViewModelBase 来自一个我正在开发的轻量级 MVVM 框架。该框架的目的是简化应用程序状态的管理。但是，在处理非常大的数据集时的性能尚未经过测试。一个为 Windows 8.1 设计的先前版本在以下文章中有所描述：Encapsulating property state in MVVM WPF applications。
进一步研究
对于刚接触通用 Windows 平台应用的用户，请参阅：
- Windows-10-development-for-absolute-beginners
- A-developers-guide-to-windows-10
- Windows 10: App Patterns and Navigation
- Best of Build and Windows 10
- https://technet.microsoft.com/en-us/subscriptions/downloads/hh780627.aspx
别忘了 YouTube、CodeProject.com 等上的教程。
历史
在此处保持您所做的任何更改或改进的实时更新。