今天是想通过实例将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. C++中的变长参数

    新参与的项目中,为了使用共享内存和自定义内存池,我们自己定义了MemNew函数,且在函数内部对于非pod类型自动执行构造函数.在需要的地方调用自定义的MemNew函数.这样就带来一个问题,使用stl的 ...

  2. 【原】AFNetworking源码阅读(三)

    [原]AFNetworking源码阅读(三) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇的话,主要是讲了如何通过构建一个request来生成一个data tas ...

  3. 通过 floating IP 访问 VIP - 每天5分钟玩转 OpenStack(126)

    前面我们是直接用 curl 测试 VIP,在更为真实的场景中通常会使用 floating IP 访问 VIP. 下面我们给 VIP 关联一个 floating IP,再进行测试. 访问 Project ...

  4. [OpenGL超级宝典]专栏前言

    我小时候的梦想呢,是做宇航员或者科学家或者是做一款属于自己的游戏,后来前面两个梦想都没有实现,于是我就来实现我的第三个梦想了,,,我呢,也算是零基础,因为我的专业是物联网工程,这个专业覆盖面之广,简直 ...

  5. 设计模式C#合集--抽象工厂模式

    抽象工厂,名字就告诉你是抽象的了.上代码. public interface BMW { public void Drive(); } public class BMW730 : BMW { publ ...

  6. Extjs 让combobox写起来更简单

    也已经写了很久时间的extjs ,每次都用到很多的combobox,配置很多东西觉得实在是太麻烦,所以根据常用到的情况写了一个简便的combobox,再次记录下来,以免放在某个地方忘记了找不到了. 定 ...

  7. Mysql 学习之基础操作

    一.表复制 1.复制表结构    将表hello的结构复制一份为表hello3 2.复制数据 a.如果两张表的结构一样且你要复制所有列的数据 mysql> insert into hello3 ...

  8. 关于asp.net利用mono部署到Linux上的一些说明

    linuxdot.net社区群:102732979(如果你认为你已经在.NET跨平台方面有足够的经验,请参加这个群:103810355). 其中有各种大神,嘿嘿,如果你有问题可以来咨询,完全无偿的免费 ...

  9. 《深入理解Java虚拟机》调优案例分析与实战

    上节学习回顾 在上一节当中,主要学习了Sun JDK的一些命令行和可视化性能监控工具的具体使用,但性能分析的重点还是在解决问题的思路上面,没有好的思路,再好的工具也无补于事. 本节学习重点 在书本上本 ...

  10. webpack解惑:require的五种用法

    我之前在 <前端搭环境之从入门到放弃>这篇文章中吐槽过,webpack中可以写commonjs格式的require同步语法,可以写AMD格式的require回调语法,还有一个require ...