WP8.1学习系列(第二十七章)——ListView和GridView入门

快速入门：添加 ListView 和 GridView 控件 (XAML)

 

在本文中

• 先决条件
• 选择 ListView 或 GridView
• 将项添加到项集合
• 设置项目源
• 指定项目的外观
• 指定视图布局
• 向视图中添加标题
• 设置视图的交互模式
• 摘要和后续步骤
• 相关主题

重要的 API

• ListView
• GridView

你可以在 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。

XAML

 

<ListView x:Name="listView1" SelectionChanged="ListView_SelectionChanged">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
</ListView>

C#

C++

VB

 

// 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 属性设置为数据项集合。

注意  可以通过将项添加到其 Items 集合或设置其 ItemsSource 属性，填充 ItemsControl，但不能同时使用两种方式。如果 ItemsSource 属性已设置且使用 XAML 添加项，则会忽略该项。如果 ItemsSource 属性已设置且使用代码向Items 集合中添加项，则会引发异常。

以下是一些支持绑定到 ItemsControl 的常见集合类型。

集合类型	使用时间
List(Of T)	当集合在运行时不更改时。列表或网格的内容在其创建后为静态。
ObservableCollection(Of T)	当集合在运行时更改时。系统会向列表或网格通知对集合的更改，然后列表或网格会更新显示。
FileInformationFactory.GetVirtualizedFilesVector	绑定到文件集合。
FileInformationFactory.GetVirtualizedFoldersVector	绑定到文件夹集合。
FileInformationFactory.GetVirtualizedItemsVector	绑定到存储项集合。

此时，直接在代码中将 ItemsSource 设置为集合实例。

C#

C++

VB

 

// 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 中的“拆分应用程序”模板创建应用。

XAML

 

<Page.Resources>
    <!-- Collection of items displayed by this page -->
    <CollectionViewSource x:Name="itemsViewSource" Source="{Binding Items}"/>
</Page.Resources>

XAML

 

<ListView x:Name="itemListView"
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"/>

4. 指定项目的外观

在默认情况下，数据项以绑定到的数据对象的字符串表现形式显示在列表或网格中。通过将 DisplayMemberPath 设置到特定的属性，你可以显示数据项的该属性的字符串表现形式。

一般来说，你会希望显示数据项的多个属性。若要具体地指定列表或网格中项的显示方式，则可以创建DataTemplate。DataTemplate 中的 XAML 定义用于显示各项的控件的布局。该布局中的控件可绑定到数据对象的属性，或者具有定义的嵌入内容。DataTemplate 会分配给 ListView 或 GridView 的 ItemTemplate 属性。

在本示例中，ListView 的 ItemTemplate 采用嵌入定义。下一示例显示 GridView，其 ItemTemplate 设置为名为Standard250x250ItemTemplate 的静态资源。

XAML

 

<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 属性，以便将项目排成两列。

XAML

 

<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 的简化版本。

XAML

 

<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 的代码。

XAML

 

<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 事件处理程序。

C#

 

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 处理程序中的代码会导航至一个新页面，并将点击的项目作为数据传递给新页面。

XAML

 

<GridView x:Name="itemGridView"
          Margin="116,0,116,46"
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
          ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
          SelectionMode="None"
          IsItemClickEnabled="True"
          ItemClick="ItemView_ItemClick"/>

C#

 

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 中的“拆分应用”项目模板。