今天是想通过实例将UWP开发常用的数据列表做汇总比较，作为以后项目开发参考。UWP开发必备知识点总结请参照【UWP开发必备以及常用知识点总结】。

本次主要讨论以下控件：

  1. GridView：用于显示数据项的水平网格控件
  2. ListView：用于显示数据项的垂直列表控件
  3. ListBox：可选项列表控件
  4. ItemsControl：用于显示数据项的列表控件。是其他控件的父类。
  5. Pivot：应用内部标签导航控件
  6. FlipView：每次只显示一个数据项的控件，通过滑动切换数据项
  7. SplitView：包含主视图和导航试图的控件，主视图显示内容，导航试图包含导航命令或者数据

1，GridView

由于图片比较大，水平效果变成垂直了，把图片去掉再试试：

xaml设置如下：

<Page

    x:Class="ListDemo.Views.GridViewPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:ListDemo.Views"

    xmlns:data="using:ListDemo.Model"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Grid.RowDefinitions>

            <RowDefinition Height="50"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <Button Grid.Row="0" x:Name="goBack" Content="Back" Click="goBack_Click" />

        <TextBlock Grid.Row="0" Text="GridView" HorizontalAlignment="Center"/>

        <GridView Grid.Row="1" x:Name="pageList">

            <GridView.ItemTemplate>

                <DataTemplate x:DataType="data:PageItem" >

                    <Grid>

                        <Grid.RowDefinitions>

                            <RowDefinition Height="50"/>

                            <RowDefinition Height="*"/>

                        </Grid.RowDefinitions>

                        <TextBlock Grid.Row="0" Text="{x:Bind Title,Mode=OneWay}" />

                        <!--<Image Grid.Row="1" Source="{x:Bind ImgUrl,Mode=OneWay}" />-->

                    </Grid>

                </DataTemplate>

            </GridView.ItemTemplate>

        </GridView>

    </Grid>

</Page>

第二张图明显可以看出效果了，从左到右水平布局数据项，空间不足时换行显示。记得在Win8.1开发模板中有一个网格模板，产生的页面就是用的GridView，不过在UWP开发中这个模板已经被删除了。

2，ListView

ListView就是这样垂直显示的控件。它继承自ListBox，一样可以设置SelectionMode来定义是单项选择还是多项选择，同时还支持数据依赖属性。

xaml设置如下：

<Page

    x:Class="ListDemo.Views.ListViewPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:ListDemo.Views"

    xmlns:data="using:ListDemo.Model"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Grid.RowDefinitions>

            <RowDefinition Height="50"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <Button Grid.Row="0" x:Name="goBack" Content="Back" Click="goBack_Click" />

        <TextBlock Grid.Row="0" Text="ListView" HorizontalAlignment="Center"/>

        <ListView Grid.Row="1" x:Name="pageList">

            <ListView.ItemTemplate>

                <DataTemplate x:DataType="data:PageItem" >

                    <Grid>

                        <Grid.RowDefinitions>

                            <RowDefinition Height="50"/>

                            <RowDefinition Height="*"/>

                        </Grid.RowDefinitions>

                        <TextBlock Grid.Row="0" Text="{x:Bind Title,Mode=OneWay}" />

                        <!--<Image Grid.Row="1" Source="{x:Bind ImgUrl,Mode=OneWay}" />-->

                    </Grid>

                </DataTemplate>

            </ListView.ItemTemplate>

        </ListView>

    </Grid>

</Page>

3，ListBox

表面看上去和ListView没区别，仔细看在项目被选中时是没有动画效果的。虽然是ItemsControl的子类控件，但是添加了选择功能。可以设置SelectionMode来定义是单项选择还是多项选择。

xaml设置如下：

<Page

    x:Class="ListDemo.Views.ListBoxPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:ListDemo.Views"

    xmlns:data="using:ListDemo.Model"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Grid.RowDefinitions>

            <RowDefinition Height="50"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <Button Grid.Row="0" x:Name="goBack" Content="Back" Click="goBack_Click" />

        <TextBlock Grid.Row="0" Text="ListBox" HorizontalAlignment="Center"/>

        <ListBox Grid.Row="1" x:Name="pageList">

            <ListBox.ItemTemplate>

                <DataTemplate x:DataType="data:PageItem" >

                    <Grid>

                        <Grid.RowDefinitions>

                            <RowDefinition Height="50"/>

                            <RowDefinition Height="*"/>

                        </Grid.RowDefinitions>

                        <TextBlock Grid.Row="0" Text="{x:Bind Title,Mode=OneWay}" />

                        <!--<Image Grid.Row="1" Source="{x:Bind ImgUrl,Mode=OneWay}" />-->

                    </Grid>

                </DataTemplate>

            </ListBox.ItemTemplate>

        </ListBox>

    </Grid>

</Page>

4，ItemsControl

xaml设置如下：

<Page

    x:Class="ListDemo.Views.ItemscontrolPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:ListDemo.Views"

    xmlns:data="using:ListDemo.Model"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Grid.RowDefinitions>

            <RowDefinition Height="50"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <Button Grid.Row="0" x:Name="goBack" Content="Back" Click="goBack_Click" />

        <TextBlock Grid.Row="0" Text="ItemsControl" HorizontalAlignment="Center"/>

        <ScrollViewer Grid.Row="1">

            <ItemsControl x:Name="pageList" >

                <ItemsControl.ItemTemplate>

                    <DataTemplate x:DataType="data:PageItem" >

                        <Grid>

                            <Grid.RowDefinitions>

                                <RowDefinition Height="50"/>

                                <RowDefinition Height="*"/>

                            </Grid.RowDefinitions>

                            <TextBlock Grid.Row="0" Text="{x:Bind Title,Mode=OneWay}" />

                            <!--<Image Grid.Row="1" Source="{x:Bind ImgUrl,Mode=OneWay}" />-->

                        </Grid>

                    </DataTemplate>

                </ItemsControl.ItemTemplate>

            </ItemsControl>

        </ScrollViewer>

    </Grid>

</Page>

从中可以看出，作为列表控件的父类ItemsControl列表数据默认是不带滚动条的，必须手动添加ScrollViewer控件。而且项目没有选择与未选择区分，使用ItemsPresenter显示数据项，以及数据项没有任何位置设置，从坐标（0，0）开始。

5，Pivot

xaml设置如下：

<Page

    x:Class="ListDemo.Views.PivotPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:ListDemo.Views"

    xmlns:data="using:ListDemo.Model"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Grid.RowDefinitions>

            <RowDefinition Height="50"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <Button Grid.Row="0" x:Name="goBack" Content="Back" Click="goBack_Click" />

        <TextBlock Grid.Row="0" Text="Pivot" HorizontalAlignment="Center"/>

        <Pivot Grid.Row="1" x:Name="pageList">

            <Pivot.ItemTemplate>

                <DataTemplate x:DataType="data:PageItem">

                    <Image Source="{x:Bind ImgUrl,Mode=OneWay}" />

                </DataTemplate>

            </Pivot.ItemTemplate>

            <Pivot.HeaderTemplate>

                <DataTemplate x:DataType="data:PageItem">

                    <TextBlock Text="{x:Bind Title,Mode=OneWay}" />

                </DataTemplate>

            </Pivot.HeaderTemplate>

        </Pivot>

    </Grid>

</Page>

在UWP开发中是没有Tab控件的，Pivot就是Tab控件的替代，点击每个标签可以切换试图。

6，FlipView

xaml设置如下：

<Page

    x:Class="ListDemo.Views.FlipViewPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:ListDemo.Views"

    xmlns:data="using:ListDemo.Model"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Grid.RowDefinitions>

            <RowDefinition Height="50"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <Button Grid.Row="0" x:Name="goBack" Content="Back" Click="goBack_Click" />

        <TextBlock Grid.Row="0" Text="FlipView" HorizontalAlignment="Center"/>

        <FlipView Grid.Row="1" x:Name="pageList">

            <FlipView.ItemTemplate>

                <DataTemplate x:DataType="data:PageItem" >

                    <Grid>

                        <Grid.RowDefinitions>

                            <RowDefinition Height="50"/>

                            <RowDefinition Height="*"/>

                        </Grid.RowDefinitions>

                        <TextBlock Grid.Row="0" Text="{x:Bind Title,Mode=OneWay}" />

                        <Image Grid.Row="1" Source="{x:Bind ImgUrl,Mode=OneWay}" />

                    </Grid>

                </DataTemplate>

            </FlipView.ItemTemplate>

        </FlipView>

    </Grid>

</Page>

FlipView通过左右滑动切换数据项，每次只能显示一个数据项，并且自带左右切换按钮。与Pivot很像每次操作只显示一个试图。

7，SplitView

xaml设置如下：

<Page

    x:Class="ListDemo.Views.SplitViewPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:ListDemo.Views"

    xmlns:data="using:ListDemo.Model"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Grid.RowDefinitions>

            <RowDefinition Height="48"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <Button Grid.Row="0" HorizontalAlignment="Right" x:Name="goBack" Content="Back" Click="goBack_Click" />

        <TextBlock Grid.Row="0" Text="SplitView" HorizontalAlignment="Center"/>

        <ToggleButton x:Name="HumberButton"

                      Width="48"

                      HorizontalAlignment="Left"

                      VerticalAlignment="Stretch">

            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" />

        </ToggleButton>

        <SplitView Grid.Row="1" DisplayMode="Overlay"

                   CompactPaneLength="48"

                   IsPaneOpen="{Binding ElementName=HumberButton,Path=IsChecked,Mode=OneWay}">

            <SplitView.Pane>

                <ListView x:Name="pageList">

                    <ListView.ItemTemplate>

                        <DataTemplate x:DataType="data:PageItem" >

                            <Grid>

                                <Grid.RowDefinitions>

                                    <RowDefinition Height="50"/>

                                    <RowDefinition Height="*"/>

                                </Grid.RowDefinitions>

                                <TextBlock Grid.Row="0" Text="{x:Bind Title,Mode=OneWay}" />

                                <Image Grid.Row="1" Source="{x:Bind ImgUrl,Mode=OneWay}" />

                            </Grid>

                        </DataTemplate>

                    </ListView.ItemTemplate>

                </ListView>

            </SplitView.Pane>

        </SplitView>

    </Grid>

</Page>

SplitView实际不是列表控件，只是试图显示控件。在主视图的基础上弹出显示另外一个试图（比如导航菜单），这也是常见需求。特别是UWP开发中一定会有的汉堡式菜单就是SplitView应用。

汇总

  • 水平显示：GridView，Pivot，FlipView

  • 垂直显示：ListView，ListBox，ItemsControl

  • ItemsControl以列表数据项内容全显示优先，可能会超范围显示，而且不会随着窗口大小变化自动调整大小。

  • ListBox与ListView数据项显示大小依赖于父容器大小，而且会随着窗口大小变化自动调整数据项大小。

  • ItemsControl没有滚动条，ListBox带水平垂直滚动条，ListView带垂直滚动条。

如何选择这些控件

  • 如果不想让数据项具备选择功能，可以考虑ItemsControl。

  • 如果每次只想显示一个数据项，可以考虑使用Pivot，FlipView。

  • 如果想显示数据项详情，可以考虑GridView，ListView。

  • 如果需要导航时考虑SplitView。

UWP开发必备：常用数据列表控件汇总比较的更多相关文章

  1. .NET各大平台数据列表控件绑定原理及比较（WebForm、Winform、WPF）

    说说WebForm: 数据列表控件: WebForm 下的列表绑定控件基本就是GridView.DataList.Repeater:当然还有其它DropDownList.ListBox等. 它们的共同 ...

  2. 【Android】15.0 UI开发（六）——列表控件RecyclerView的网格布局排列实现

    1.0 列表控件RecyclerView的网格布局排列实现,关键词GridLayoutManager. LinearLayoutManager 实现顺序布局 GridLayoutManager 实现网 ...

  3. 【Android】14.0 UI开发（五）——列表控件RecyclerView的瀑布布局排列实现

    1.0 列表控件RecyclerView的瀑布布局排列实现,关键词StaggeredGridLayoutManager LinearLayoutManager 实现顺序布局 GridLayoutMan ...

  4. 【Android】16.0 UI开发（七）——列表控件RecyclerView的点击事件实现

    1.0 在各布局的基础上,修改ProvinceAdapter.java的代码: package com.example.recyclerviewtest; import android.support ...

  5. 【VS开发】MFC CListCtrl列表控件的消息响应

    MFC里的CListCtrl选中一行,消息是哪个.实在想不起来了.找了一篇文章,比较有用: http://www.cnblogs.com/hongfei/archive/2012/12/25/2832 ...

  6. 【Android】12.0 UI开发（三）——列表控件ListView的简单实现2

    1.0 由于书上内容,已经和实际编程的兼容性已经不太友好,重写了项目,用于进一步学习列表控件ListView. 2.0 新建项目ListViewTest,其中文件目录如下: 3.0 ActivityC ...

  7. 【Android】11.0 UI开发（二）——列表控件ListView的简单实现1

    ************************ 转载请注明出处:https://www.cnblogs.com/xiaofu007/p/10342462.html ***************** ...

  8. 张高兴的 UWP 开发笔记：用 Thumb 控件仿制一个可拖动 Button

    在 WPF 上可用的控件拖动方法在 UWP 上大多没用,那干脆用 Thumb 仿制一个吧. 关于 Thumb 控件的教程也不多,毕竟在 WPF 控件拖动有很多种方法, Thumb 就显得很鸡肋了.下面 ...

  9. 【Android】13.0 UI开发（四）——列表控件RecyclerView的横向布局排列实现

    1.0 新建项目,由于ListView的局限性,RecyclerView是一种很好取代ListView的控件,可以灵活实现多种布局. 2.0 新建项目RecyclerviewTest,目录如下: 3. ...

随机推荐

  1. 异步任务队列Celery在Django中的使用

    前段时间在Django Web平台开发中,碰到一些请求执行的任务时间较长(几分钟),为了加快用户的响应时间,因此决定采用异步任务的方式在后台执行这些任务.在同事的指引下接触了Celery这个异步任务队 ...

  2. 用php做注册审核

    做注册审核就像前面讲的注册登录一样,也是要连接数据库 首先在数据库内要做这样一张表: 表名为users表 里面的列名分别为用户名,密码,姓名,性别,生日,账户的状态,照片 然后就可以写代码了,要注册的 ...

  3. ExtJS 4.2 Grid组件的单元格合并

    ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid ...

  4. .NET平台开源项目速览(13)机器学习组件Accord.NET框架功能介绍

    Accord.NET Framework是在AForge.NET项目的基础上封装和进一步开发而来.因为AForge.NET更注重与一些底层和广度,而Accord.NET Framework更注重与机器 ...

  5. 开源一个跨平台运行的服务插件 - TaskCore.MainForm

    本次将要很大家分享的是一个跨平台运行的服务插件 - TaskCore.MainForm,此框架是使用.netcore来写的,现在netcore已经支持很多系统平台运行了,所以将以前的Task.Main ...

  6. .Net 大型分布式基础服务架构横向演变概述

    一. 业务背景 构建具备高可用,高扩展性,高性能,能承载高并发,大流量的分布式电子商务平台,支持用户,订单,采购,物流,配送,财务等多个项目的协作,便于后续运营报表,分析,便于运维及监控. 二. 基础 ...

  7. Adaboost提升算法从原理到实践

    1.基本思想: 综合某些专家的判断,往往要比一个专家单独的判断要好.在"强可学习"和"弱科学习"的概念上来说就是我们通过对多个弱可学习的算法进行"组合 ...

  8. 微信小程序前端源码逻辑和工作流

    看完微信小程序的前端代码真的让我热血沸腾啊,代码逻辑和设计一目了然,没有多余的东西,真的是大道至简. 废话不多说,直接分析前端代码.个人观点,难免有疏漏,仅供参考. 文件基本结构: 先看入口app.j ...

  9. 微信小程序开发—快速掌握组件及API的方法

    微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...

  10. 使用JavaScript为一张图片设置备选路径

    在做网页开发的时候,有时候希望给图片设置一个备选路径,即,当src属性对应的主路径加载失败的时候,图片可以马上切换到备选路径.这样,即使主路径失效了,显示备用路径也不会影响网页的正常体验. 注意到网页 ...