重新考虑 iOS 表视图

Applies to Windows and Windows Phone

因为你已习惯使用 iOS 中的 UITableView,所以下面将介绍如何在 Windows 应用商店应用中使用类似控件进行数据绑定。

下面的视频针对 iOS 应用中的表格视图与 Windows 应用商店应用中的列表视图进行了比较。

在 iOS 中,表视图用于显示数据列表,如联系人、待办事项或购物项列表。下面将介绍如何利用你的 iOS 应用构建技巧来使用 ListViewGridView 控件在适用于 Windows 8 的 Windows 应用商店应用中创建数据列表。我们将讨论 Windows 应用商店应用中的列表视图,并将其与用于以列表或主从式视图形式组织数据的 iOS UITableView 控件进行对比。 这些控件所使用的数据可能是应用的一部分,或者可能是从本地或远程数据库中获得的数据,或从网上下载的数据。

iOS 表视图概述

在 iOS 中,表视图经常用于显示此类数据列表。表视图是 iOS 应用中最常用的用户界面控件之一。表视图提供的项位于单个垂直滚动列中,这些项可能分为几个部分。 表视图具有许多用途,如:

  • 显示项的索引列表
  • 使用项列表在分层结构化的数据中导航
  • 在具有视觉差异的分组中组织数据

下面是 iOS 中显示项列表的简单表视图。

iOS TableView 应用

表视图经常用于主从式列表编程。它们与拆分视图一起使用来显示项列表,并且可以向下钻取每个项的详细信息,如下所示:

iOS TableView 应用

Windows 应用商店应用中的 ListView

Windows 8 的控件库提供 ListViewGridView 控件,你可以使用它们来显示数据列表。ListView 控件是可自定义的多功能控件,用于以列表或网格形式显示项。 在以下示例中,ListView 控件用于显示可滚动的项列表:

使用 ListView 的 Windows 8 应用

ListViewGridView 控件可以从静态的内存内列表、本地或远程数据库、XML 文档、远程 Web 服务或某个源中获取其数据。通过使用一种被称为数据绑定的技术,可以将 ListView 控件关联到数据源。数据绑定为 Windows 应用商店应用提供了方便的方法来显示、添加、删除或管理数据。有关详细信息,请参见数据绑定概述数据绑定控件

ListView 控件也可以用来显示主从式列表,如下所示。使用 ListView 控件在左侧显示项列表,并使用“标签”控件在右侧显示详细信息。可以使用许多不同的方法(包括 GridViewStackPanel 控件)来为用于显示主列表和详细信息的面板编程。

使用 ListView 的 Windows 8 应用

与 iOS UITableView 不同,ListView 控件也可以用来显示网格中的项,以便更好地利用可用空间。之前显示的列表项放置在网格中,并依次向下放置连续的项。可以指定列中的行数来控制网格的布局,如下所示。

使用 ListView 的 Windows 8 应用

关于详细信息,请参阅 快速入门:添加 ListView 和 GridView 控件快速入门:定义布局

对比 iOS 和 Windows 应用商店应用中的列表设计

如果你一直在 iOS 中使用 UITableView 来实现列表视图,你会发现适用于 Windows 8 的 Windows 应用商店应用的 ListView 控件提供类似的功能。 下表将枚举在你的应用中实现 ListView 控件所需的各个步骤。它显示了如何在 iOS 和 Windows 8 中完成这些步骤。你可以看到,iOS 与 Windows 8 中的步骤之间存在密切的映射。

步骤iOSWindows 8
创建 UI 控件。 使用 UITableView使用 ListView 类。有关详细信息,请参阅如何添加列表视图
定义列表的外观。使用UITableViewPlainUITableViewGrouped通过使用“ItemsPanelTemplate”类设置 ListView 控件的 ItemsPanel 属性来定义布局。 将 ListView 中的项分组,以获得分组布局。有关详细信息,请参阅快速入门:添加 ListView 和 GridView 控件。有关分组布局,请参阅如何对列表或网格中的项进行分组
定义项的外观。UITableViewCellStyle 用作固定样式。若要使用自定义布局,请为单元格定义自定义视图。为每个项的外观定义 ItemsControl 类的“ItemTemplate”属性。有关详细信息,请参阅快速入门:添加 ListView 和 GridView 控件
数据将控件绑定到数据源。在控制器中实现 UITableViewDelegate 界面。ListView 控件的 ItemsSource 属性设置为项的集合。 要获得分组列表,请将“ItemsSource”属性设置为“CollectionViewSource”类实例。有关详细信息,请参阅快速入门:添加 ListView 和 GridView 控件。有关分组列表,请参阅如何对列表或网格中的项进行分组

 

ListView 示例

现在,我们将构建简单的 Windows 应用商店应用,该应用使用 ListView 控件显示照片列表。原始 iOS 应用如下所示。它将 UITableViewUITableViewCellStyleSubtitle 样式一起用于表单元格。单元格样式允许显示标题、副标题和图像。

使用 UITableView 的 iOS 应用

下面是相当于以上应用的 Windows 应用商店应用:

该应用的 Windows 8 版本

构建应用

下面是创建此应用所需的高级步骤。

下面将介绍如何使用绑定 ListView 的数据构建简单的应用。

  • 创建应用。

    在此示例中,我们将使用 C# 空白应用模板来创建我们的应用。

    • 启动 Microsoft Visual Studio。
    • 在“文件”菜单上,单击“新建项目”
    • 如果尚未选中“Windows 应用商店”,则展开“已安装 > 模板 > Visual C#”,然后单击“Windows 应用商店”
    • 如果尚未选择“空白应用 (XAML)”,请单击它。
    • 在“名称”和“位置”框中,键入用于应用的名称(如“空间照片”)和位置,或保留默认值。
    • 单击“确定”
  • 定义数据源。

    Windows 8 允许在应用中使用各种数据源。在此应用中,我们将使用在程序中定义的数据和在内存中实例化的数据。有关如何使用其他数据源的信息,请参见数据绑定概述

    我们的应用是照片库应用,它可以显示照片、标题和每张照片的描述。 若要定义数据源,我们首先定义一个类来创建项列表,如以下代码所示。

    • 在“项目”菜单中,单击 Add Class
    • Name 框中,使用“Photo.cs”替换默认文本。
    • 单击“确定”
    • 在文件的页首,使用语句添加以下内容:

      using Windows.UI.Xaml.Media;

      using Windows.UI.Xaml.Media.Imaging;

    • 使用下面显示的代码替换代码 class Photo { }:

      
      public class Photo
      {
      
          public Photo(string title,  string description, string imagePath, string category)
          {
              this.Title = title;
              this.Description = description;
              this._imagePath = imagePath;
              this.Category = category;
          }
          public string Title{ get; set; }
          public string Description{ get; set; }
          public string Category { get; set; }
          private ImageSource _image = null;
          private String _imagePath = null;
          public ImageSource Image
          {
              get
              {
                  if (this._image == null && this._imagePath != null)
                  {
                      this._image = new BitmapImage(new Uri(this._imagePath));
                  }
                  return this._image;
              }
          }
      }
      
      

      在“MainPage.xaml.cs”文件的构造函数中,我们创建照片列表,该列表将作为我们的 ListView 控件的数据源,如以下代码所示。

      • 在 Visual Studio 的“解决方案资源管理器”窗口中,展开“MainPage.xaml”,并双击“MainPage.xaml.cs”
      • 在“MainPage”类中,在“MainPage”方法之前添加下面这行代码:

        private List<Photo> photos = new List<Photo>();

      • 在“MainPage”方法的代码行之前

        this.InitializeComponent();

        添加以下所示代码的剩余部分。
        
        Photo photo1 = new Photo("The Cat's Eye Nebula", "Cat's Eye Nebula (NGC 6543) is revealed in this detailed view from NASA's Hubble Space Telescope.",
            "http://www.nasa.gov/images/content/64883main_image_feature_211_jw4.jpg", "Nebula");
        photos.Add(photo1);
        Photo photo2 = new Photo("Chaos at the Heart of Orion", "The chaos that baby stars are creating 1,500 light years away in a cosmic cloud called the Orion nebula.",
            "http://www.nasa.gov/images/content/162283main_image_feature_693_ys_4.jpg", "Nebula");
        photos.Add(photo2);
        Photo photo3 = new Photo("An Eyeful of Saturn", "Saturn and its rings completely  in this natural color image taken on March 27, 2004.", 
            "http://www.nasa.gov/images/content/59802main_pia05389-516.jpg", "Planets");
        photos.Add(photo3);
        Photo photo4 = new Photo("Jupiter Gets a Close-up", "NASA's Cassini spacecraft took this true color mosaic of Jupiter.",
            "http://www.nasa.gov/images/content/53254main_MM_image_feature_97_jw4.jpg", "Planets");
        photos.Add(photo4);
        Photo photo5 = new Photo("A Long Way From Home", "This image of the Earth and moon in a single frame was recorded by Voyager 1 ",
            "http://www.nasa.gov/images/content/151232main_image_feature_601_ys_4.jpg", "Earth/Moon");
        photos.Add(photo5);
        Photo photo6 = new Photo("Milky Way Neighbor", "Our Sun and solar system are embedded in a broad pancake of stars deep within the Milky Way galaxy.",
            "http://www.nasa.gov/images/content/63375main_image_feature_202_jw4.jpg", "Galaxy");
        photos.Add(photo6);
        Photo photo7 = new Photo("Moon Aglow", "Framed by the Earth's horizon and airglow, the full moon floats in the blackness of space .",
            "http://www.nasa.gov/images/content/111199main_image_feature_290_ys4.jpg", "Earth/Moon");
        photos.Add(photo7);
        
        
        

        List<Photo> 类型的照片的列表定义为 C# 泛型列表。关于详细信息,请参阅 C# 泛型介绍

        • 向页面添加 ListView 控件。使用如下 Extensible Application Markup Language (XAML) 代码将 ListView 控件添加到应用。在 Visual Studio 的“解决方案资源管理器”窗口中,双击“MainPage.xaml”。
        • 将代码行替换为

          <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"></Grid>

          以下所示的代码。
          
          // Windows 8
          <StackPanel Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
              <TextBlock Text="NASA/JPL Photos" Style="{StaticResource HeaderTextStyle}"></TextBlock>
              <ListView x:Name="photoListView" ItemsSource="{Binding}" >
              </ListView>
              </StackPanel>
          
          // Windows 8.1
          <StackPanel Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
              <TextBlock Text="NASA/JPL Photos" Style="{StaticResource HeaderTextBlockStyle}"></TextBlock>
              <ListView x:Name="photoListView" ItemsSource="{Binding}" >
              </ListView>
              </StackPanel>
          
          
          

          可以在 XAML 中使用 {Binding..} 语法创建数据绑定。可以通过设置 ListView 控件的 DataContext 属性来创建绑定的源。带有 {Binding} 值的 ItemsSource 属性可以指定列表的项是绑定到 ListView 控件的 DataContext 属性的数据。有关数据绑定的详细信息,请参阅数据绑定概述

          你也可以通过编程方式将 ListView 控件添加到应用。关于详细信息,请参阅快速入门:添加控件和处理事件

    • 设计列表的外观。

      我们将使用列表视图的默认外观,即,将其作为可滚动的列表,这类似于 iOS 中列表的外观。 关于改变列表外观的详细信息,请参阅快速入门:添加 ListView 和 GridView 控件

    • 设计列表中项的外观。

      在 Visual Studio 的“MainPage.xaml”文件中,在开始标记 <ListView x:Name="photoListView" ItemsSource="{Binding}"> 和结束标记 </ListView> 之间,添加以下 XAML 代码:

      
      // Windows 8
      <ListView.ItemTemplate>
          <DataTemplate>
              <Grid Height="110" Margin="6">
                  <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="Auto"/>
                      <ColumnDefinition Width="*"/>
                  </Grid.ColumnDefinitions>
                  <Image Source="{Binding Image}" Stretch="UniformToFill" Grid.Column="0"  Width="110" Height="110"/>
                  <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
                      <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/>
                      <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextStyle}" MaxHeight="60"/>
                  </StackPanel>
              </Grid>
          </DataTemplate>
      </ListView.ItemTemplate>
      
      // Windows 8.1
      <ListView.ItemTemplate>
          <DataTemplate>
              <Grid Height="110" Margin="6">
                  <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="Auto"/>
                      <ColumnDefinition Width="*"/>
                  </Grid.ColumnDefinitions>
                  <Image Source="{Binding Image}" Stretch="UniformToFill" Grid.Column="0"  Width="110" Height="110"/>
                  <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
                      <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
                      <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60"/>
                  </StackPanel>
              </Grid>
          </DataTemplate>
      </ListView.ItemTemplate>
      
      
      

      要指定列表中项的外观,我们需要使用 XAML 代码设置可以指定“DataTemplate”对象的 ListView 控件的“ItemsTemplate”属性。有关详细信息,请参考快速入门:添加 ListView 和 GridView 控件。 该布局中的控件可绑定到数据对象的属性,或者具有以嵌入方式定义的内容。

      我们已使用嵌入方式定义了用于 ListView 中的项的模板。该模板包括网格,我们将在该网格的左列中显示照片。在右列中,我们将显示图像标题,并在下方显示其描述。标题和描述逐一向下显示。

      “图像”对象的“源”属性指定为 {Binding Image},该属性将它绑定到用于支持该项目的“照片”对象的“图像”属性。同样,这两个 TextBlock 控件分别绑定到用于支持该项目的“照片”对象的 TitleDescription 属性。

      使用 Windows 8 时,两个 TextBlock 控件的样式将使用两个静态定义的样式来定义,即“TitleTextStyle”和“BodyTextStyle”。可以在项目的“StandardStyles.xaml”文件中找到这些样式定义(要查看此文件,在“解决方案资源管理器”窗口中,展开“Common”文件夹,然后双击“StandardStyles.xaml”)。

      使用 Windows 8.1 时,“StandardStyles.xaml”文件不再存在,应当转而使用内置样式“TitleTextBlockStyle”和“BodyTextBlockStyle”。请参阅 Windows 8 到 Windows 8.1 Preview XAML 模板入门

    • 设置项的源。

      一旦创建了我们的项列表,设置项的源就非常简单。 在 Visual Studio 的 MainPage.xaml.cs 文件中,在 OnNavigatedTo 方法中添加下面显示的代码。

      
       protected override void OnNavigatedTo(NavigationEventArgs e) 
              {
                  photoListView.ItemsSource = photos;
              }
      
      

      Windows 8 ListView 应用

在网格布局中使用 ListView 控件

在 Visual Studio 的 MainPage.xaml 文件中,在开始标记 <ListView x:Name="photoListView" ItemsSource="{Binding}"> 和结束标记 </ListView> 之间,添加以下 XAML 代码:


<ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Orientation="Vertical" MaximumRowsOrColumns="-1" />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>

这可以将 ListView 布局定义为垂直方向的 WrapGrid 控件。“MaximumRowsOrColumns”属性的“-1”值是一个特殊值,它表示行或列的数量没有上限。这意味着,将在垂直方向显示尽可能多的项,直到适合 ListView 控件的高度为止。

ListView 的操作

列表视图的分组布局

类似于 iOS 的分组表视图,ListView 控件也提供为项分组的功能,如下所示。照片将根据照片类别(即地球/月亮、星系、星云或行星)分组。有关列表的分组布局的详细信息,请参阅如何对列表或网格中的项进行分组

分组的 ListView 控件

相关主题

适用于 iOS 开发人员的主题
适用于 iOS 开发人员的资源
适用于 iOS 开发人员的 Windows 8 控件
适用于 iOS 开发人员的 Windows 8 Cookbook
列表和网格视图主题
快速入门:添加 ListView 和 GridView 控件
如何添加列表视图
在 Windows 8.1 中创建简单的类似于 UITableView 的列表
如何对列表或网格中的项进行分组
快速入门:定义布局
ListView 类
数据绑定概述
Windows 8 到 Windows 8.1 Preview XAML 模板入门

 

 

显示:
© 2014 Microsoft