1. 选择 ListView 或 GridView

和 控件均用于显示应用中数据的集合。它们的功能十分相似，但是显示数据的方式不同。它们都派生自 类。

采用垂直堆叠的方式显示数据。该控件常用于显示按顺序排列的项目列表，如电子邮件列表或搜索结果列表。它在主从式列表情况下也很有用，其中的列表项仅包含少量信息，并且选定项目的详细信息会单独显示。

采用水平堆叠的方式显示数据。对于占驻较多控件的每个项目（如照片库），当你需要为其显示丰富的视觉信息时，该控件很常用。

你可以通过将项直接添加到其 集合或将其 属性绑定到数据源来填充 。同时将 和 绑定到同一数据源的情况很常见。你可以显示其中一个并将另一个隐藏起来，从而将 UI 调整为摆脱那个的方向和分辨率。

下面的 显示了贴靠应用中的项目， 显示了当该应用全屏显示时的同一组项目。

2. 将项添加到项集合

可以通过使用可扩展应用程序标记语言 (XAML) 或代码向 集合添加项。在以下情况下通常采用这种方式添加项：具有不更改且使用 XAML 轻松定义的少量项，或者在运行时采用代码生成项。以下是带有使用 XAML 内联定义项的 和带有使用代码添加项的 。

           
        
         Item 1
            
        
         Item 2
        
       

// 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);

向 添加项时，这些项目会自动放置在项容器中。用于 的项容器为 ，用于 的项容器为 。要更改项如何显示，你可通过设置 属性应用样式到该项容器。

使用 XAML 定义项时，这些项还会自动添加到 集合。

3. 设置项目源

。如果 ItemsSource 属性已设置且使用 XAML 添加项，则会忽略该项。如果 ItemsSource 属性已设置且使用代码向 Items 集合中添加项，则会引发异常

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

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

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

C#

复制

// Data source.List
       
         itemsList = new List
        
         ();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); 还可以将  属性绑定到 。CollectionViewSource 充当集合类的代理角色，启用货币和分组支持。如果将相同数据同时绑定到  和  来支持在辅屏视图和全屏视图之间切换，则应绑定到 CollectionViewSource 以便两个视图都有相同的当前项。有关更多信息，请参阅。
        
       

若要在列表或网格中显示分组项，则数据源必须支持分组功能，必须将 绑定到 ，并且将其 属性设置为 True。有关详细信息，请参阅。

在下面的代码中， 绑定到名为 itemsViewSource 的 。若要查看此示例和以下示例的完整代码，请使用 Microsoft Visual Studio 2012 中的拆分应用程序模板创建应用。

<Page.Resources>

    <!-- Collection of items displayed by this page -->

        XAML

4. 指定项目的外观

通过将 设置到特定的属性，设置itemTemplate

              
                   
                        
                             
                                  
                                   
                               
                              
                                  
                               
                              
                                  
                                   
                                   
                               
                          
                     
                
                     
           以下是数据模板所定义布局的外观。

5. 指定视图布局

若要指定如何在列表或网格视图中摆放项，则可以设置 属性来指定设置为布局 的 。默认情况下， 使用一个 面板作为它的 ItemsPanel， 使用一个 作为它的 ItemsPanel。

下面介绍如何在 中使用 更改项目的布局。WrapGrid 替换默认的 ，它将项目排成一列。我们设置 属性，以便将项目排成两列。

XAML

复制

下面是使用具有两列的 作为它的 的 外观。

6. 向视图中添加标题

你可以向 或 中添加标题，方法是为 属性分配一个字符串或对象。可以通过设置 属性使用数据模板 定义 Header 的布局。

默认情况下，标题显示在视图的前沿。它显示在 的顶部， 的左侧。如果 属性设置为 ，则标题显示在 GridView 的右侧。

下面是标题包含 （具有文本和图像）的 。此可扩展应用程序标记语言 (XAML) 是 Microsoft Visual Studio“网格应用”模板的 GroupDetail 页面中使用的 GridView 的简化版本。

XAML

复制

此处， 的标题是轮廓为黄色的部分。

7. 设置视图的交互模式

在默认情况下，用户可在 或 中选择一个项目。要更改此行为，你可以将 属性设置为 枚举值，以允许多选或禁止选择。

下面是禁止选择的 和允许多选的 的代码。

XAML

复制

          
           若要响应列表或网格中的选择更改，请处理  事件。在事件处理程序代码中，可以从  属性获取选择项列表。在 SelectionChanged 事件之外，使用代码或通过数据绑定从  和  属性获取选择的项。

以下是上例中 GridView 的 事件处理程序。

C#

复制

List

下面是具有可单击项的 。 处理程序中的代码会导航至一个新页面，并将点击的项目作为数据传递给新页面。

XAML

复制

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);}