快速入门:添加 ListView 和 GridView 控件 (XAML)
你可以在 XAML 中使用 ListView 或 GridView 控件来显示数据集合,如联系信息列表、库中的图像或电子邮件收件箱中的内容。
目标: 了解如何将 ListView 和 GridView 控件添加到 Windows 应用商店应用。
先决条件
我们假定你可以向使用 C++、C# 或 Visual Basic 的基本 Windows 运行时应用中添加控件。有关添加控件的说明,请参阅快速入门:添加控件和处理事件。
说明
1. 选择 ListView 或 GridView
ListView 和 GridView 控件均用于显示应用中数据的集合。它们的功能十分相似,但是显示数据的方式不同。它们都派生自 ItemsControl 类。涉及到ItemsControl 时,信息会同时应用到 ListView 和 GridView 控件。
ListView 采用垂直堆叠的方式显示数据。该控件常用于显示按顺序排列的项目列表,如电子邮件列表或搜索结果列表。它在主从式列表情况下也很有用,其中的列表项仅包含少量信息,并且选定项目的详细信息会单独显示。
GridView 采用水平堆叠的方式显示数据。对于占驻较多控件的每个项目(如照片库),当你需要为其显示丰富的视觉信息时,该控件很常用。
你可以通过将项直接添加到其 Items 集合或将其 ItemsSource 属性绑定到数据源来填充 ItemsControl。同时将 ListView 和 GridView 绑定到同一数据源的情况很常见。你可以显示其中一个并将另一个隐藏起来,从而将 UI 调整为摆脱那个的方向和分辨率。
下面的 ListView 显示了当靠近另一个应用时变窄的应用中的项目,GridView 显示了当该应用全屏显示时的同一组项目。
2. 将项添加到项集合
可以通过使用 Extensible Application Markup Language (XAML) 或代码向 Items 集合添加项。在以下情况下通常采用这种方式添加项:具有不更改且使用 XAML 轻松定义的少量项,或者在运行时采用代码生成项。以下是带有使用 XAML 内联定义项的 ListView 和带有使用代码添加项的 GridView。
<ListView x:Name="listView1" SelectionChanged="ListView_SelectionChanged"> <x:String>Item 1</x:String> <x:String>Item 2</x:String> </ListView>
// Create a new grid view, add content, // and add a SelectionChanged event handler. GridView gridView1 = new GridView(); gridView1.Items.Add("Item 1"); gridView1.Items.Add("Item 2"); gridView1.SelectionChanged += GridView_SelectionChanged; // Add the grid view to a parent container in the visual tree. stackPanel1.Children.Add(gridView1);
向 ItemsControl 添加项时,这些项目会自动放置在项容器中。用于 ListView 的项容器为 ListViewItem,用于GridView 的项容器为 GridViewItem。要更改项如何显示,你可通过设置 ItemContainerStyle 属性应用样式到该项容器。
使用 XAML 定义项时,这些项还会自动添加到 Items 集合。
3. 设置项目源
大部分应用使用 ListView 或 GridView 显示源(例如数据库或 Internet)中的数据。若要填充数据源中的ItemsControl,请将其 ItemsSource 属性设置为数据项集合。
以下是一些支持绑定到 ItemsControl 的常见集合类型。
集合类型 | 使用时间 |
---|---|
List(Of T) | 当集合在运行时不更改时。列表或网格的内容在其创建后为静态。 |
ObservableCollection(Of T) | 当集合在运行时更改时。系统会向列表或网格通知对集合的更改,然后列表或网格会更新显示。 |
FileInformationFactory.GetVirtualizedFilesVector | 绑定到文件集合。 |
FileInformationFactory.GetVirtualizedFoldersVector | 绑定到文件夹集合。 |
FileInformationFactory.GetVirtualizedItemsVector | 绑定到存储项集合。 |
此时,直接在代码中将 ItemsSource 设置为集合实例。
// Data source. List<String> itemsList = new List<string>(); itemsList.Add("Item 1"); itemsList.Add("Item 2"); // Create a new grid view, add content, // and add a SelectionChanged event handler. GridView gridView1 = new GridView(); gridView1.ItemsSource = itemsList; gridView1.SelectionChanged += GridView_SelectionChanged; // Add the grid view to a parent container in the visual tree. stackPanel1.Children.Add(gridView1);
还可以将 ItemsSource 属性绑定到 CollectionViewSource。CollectionViewSource 充当集合类的代理角色,以启用货币和分组支持。如果将相同数据同时绑定到 ListView 和 GridView 来支持在较窄视图和较宽视图之间切换,则应绑定到CollectionViewSource 以便两个视图都有相同的当前项。有关详细信息,请参阅使用 XAML 进行数据绑定。
若要在列表或网格中显示分组项,则数据源必须支持分组功能,必须将 ItemsSource 绑定到 CollectionViewSource,并且将其 IsSourceGrouped 属性设置为 True。有关详细信息,请参阅如何对数据控件中的项进行分组。
在下面的代码中,ItemsSource 绑定到名为 itemsViewSource
的 CollectionViewSource。若要查看此示例和以下示例的完整代码,请使用 Microsoft Visual Studio 中的“拆分应用程序”模板创建应用。
<Page.Resources> <!-- Collection of items displayed by this page --> <CollectionViewSource x:Name="itemsViewSource" Source="{Binding Items}"/> </Page.Resources>
<ListView x:Name="itemListView" ItemsSource="{Binding Source={StaticResource itemsViewSource}}"/>
4. 指定项目的外观
在默认情况下,数据项以绑定到的数据对象的字符串表现形式显示在列表或网格中。通过将 DisplayMemberPath 设置到特定的属性,你可以显示数据项的该属性的字符串表现形式。
一般来说,你会希望显示数据项的多个属性。若要具体地指定列表或网格中项的显示方式,则可以创建DataTemplate。DataTemplate 中的 XAML 定义用于显示各项的控件的布局。该布局中的控件可绑定到数据对象的属性,或者具有定义的嵌入内容。DataTemplate 会分配给 ListView 或 GridView 的 ItemTemplate 属性。
在本示例中,ListView 的 ItemTemplate 采用嵌入定义。下一示例显示 GridView,其 ItemTemplate 设置为名为Standard250x250ItemTemplate
的静态资源。
<ListView x:Name="itemListView" Margin="120,0,0,60" ItemsSource="{Binding Source={StaticResource itemsViewSource}}" SelectionChanged="ItemListView_SelectionChanged"> <ListView.ItemTemplate> <DataTemplate> <Grid Height="110" Margin="6"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110"> <Image Source="{Binding Image}" Stretch="UniformToFill"/> </Border> <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0"> <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/> <TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/> <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextStyle}" MaxHeight="60"/> </StackPanel> </Grid> </DataTemplate> </ListView.ItemTemplate> </ListView>
以下是数据模板所定义布局的外观。
5. 指定视图布局
若要指定如何在列表或网格视图中摆放项,则可以设置 ItemsPanel 属性来指定设置为布局 Panel 的ItemsPanelTemplate。默认情况下,GridView 使用一个 WrapGrid 面板作为它的 ItemsPanel,ListView 使用一个VirtualizingStackPanel 作为它的 ItemsPanel。
下面介绍如何在 ListView 中使用 WrapGrid 更改项目的布局。WrapGrid 替换默认的 VirtualizingStackPanel,它将项目排成一列。我们设置 WrapGrid.MaximumRowsOrColumns 属性,以便将项目排成两列。
<ListView Height="320" Width="260"> <ListView.ItemsPanel> <ItemsPanelTemplate> <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2"/> </ItemsPanelTemplate> </ListView.ItemsPanel> <Rectangle Height="100" Width="100" Fill="Blue" /> <Rectangle Height="100" Width="100" Fill="Red" /> <Rectangle Height="100" Width="100" Fill="Yellow" /> <Rectangle Height="100" Width="100" Fill="Green" /> <Rectangle Height="100" Width="100" Fill="Gray" /> <Rectangle Height="100" Width="100" Fill="LightBlue" /> <Rectangle Height="100" Width="100" Fill="Pink" /> <Rectangle Height="100" Width="100" Fill="YellowGreen" /> </ListView>
下面是使用具有两列的 WrapGrid 作为它的 ItemsPanel的 ListView 外观。
6. 向视图中添加标题
你可以向 ListView 或 GridView 中添加标题,方法是为 Header 属性分配一个字符串或对象。可以通过设置HeaderTemplate 属性使用数据模板 定义 Header 的布局。
默认情况下,标题显示在视图的前沿。它显示在 ListView 的顶部,GridView 的左侧。如果 FlowDirection 属性设置为RightToLeft,则标题显示在 GridView 的右侧。
下面是标题中包含 StackPanel(具有文本和图像)的 GridView。此 XAML 是 Visual Studio“网格应用”模板的GroupDetail
页面中使用的 GridView 的简化版本。
<GridView x:Name="itemGridView" Margin="0,-14,0,0" Padding="120,0,120,50" ItemsSource="{Binding Source={StaticResource itemsViewSource}}" ItemTemplate="{StaticResource Standard500x130ItemTemplate}"> <GridView.Header> <StackPanel Width="480" Margin="0,4,14,0"> <TextBlock Text="{Binding Subtitle}" Margin="0,0,18,20" Style="{StaticResource SubheaderTextStyle}" MaxHeight="60"/> <Image Source="{Binding Image}" Height="400" Margin="0,0,18,20" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/> <TextBlock Text="{Binding Description}" Margin="0,0,18,0" Style="{StaticResource BodyTextStyle}"/> </StackPanel> </GridView.Header> </GridView>
此处,GridView 的标题是轮廓为黄色的部分。
7. 设置视图的交互模式
在默认情况下,用户可在 ListView 或 GridView 中选择一个项目。要更改此行为,你可以将 SelectionMode 属性设置为 ListViewSelectionMode 枚举值,以允许多选或禁止选择。
下面是禁止选择的 ListView 和允许多选的 GridView 的代码。
<ListView x:Name="itemList" ItemsSource="{Binding Source={StaticResource itemsViewSource}}" SelectionMode="None"/> <GridView x:Name="itemGrid" ItemsSource="{Binding Source={StaticResource itemsViewSource}}" SelectionChanged="ItemView_SelectionChanged" SelectionMode="Extended"/>
若要响应列表或网格中的选择更改,请处理 SelectionChanged 事件。在事件处理程序代码中,可以从SelectionChangedEventArgs.AddedItems 属性获取选择项列表。在 SelectionChanged 事件之外,使用代码或通过数据绑定从 SelectedItem 和 SelectedItems 属性获取选择的项。
以下是上例中 GridView 的 SelectionChanged 事件处理程序。
List<object> selectedItems; private void ItemView_SelectionChanged(object sender, SelectionChangedEventArgs e) { // Use e.AddedItems to get the items that are selected in the ItemsControl. selectedItems = (List<object>)e.AddedItems; }
你还可以更改 ListView 或 GridView,从而使用户可以单击项目(如按钮),而不是选择项目。例如,当用户点击列表或网格中的一个项目时,如果你的应用导航至一个新页面,这将会很有用。要启用此行为,请将 SelectionMode 设置为None,将 IsItemClickEnabled 设置为 true,并对 ItemClick 事件进行处理,使其在用户点击项目时执行某些任务。
下面是具有可单击项的 GridView。ItemClick 处理程序中的代码会导航至一个新页面,并将点击的项目作为数据传递给新页面。
<GridView x:Name="itemGridView" Margin="116,0,116,46" ItemsSource="{Binding Source={StaticResource itemsViewSource}}" ItemTemplate="{StaticResource Standard250x250ItemTemplate}" SelectionMode="None" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick"/>
private void ItemView_ItemClick(object sender, ItemClickEventArgs e) { // Navigate to the split page, configuring the new page // by passing required information as a navigation parameter this.Frame.Navigate(typeof(SplitPage), e.ClickedItem); }
摘要和后续步骤
你了解了如何创建 ListView 和 GridView 控件来显示数据集合。
有关可以用在应用中的预定义项模板的列表,请参阅列表布局的项模板和网格布局的项模板。若要了解如何对项进行分组,请参阅如何对列表或网格中的项进行分组。
有关显示 ListView 和 GridView 控件的更多代码示例,请参阅以下示例:
- XAML ListView 和 GridView 基本示例
- XAML ListView 和 GridView 自定义交互示例
- XAML GridView 分组和 SemanticZoom 示例
- Visual Studio 中的“拆分应用”项目模板。