飞流直下的精彩 -- 淘宝UWP中瀑布流列表的实现

2024-03-12 15:10

本文主要是介绍飞流直下的精彩 -- 淘宝UWP中瀑布流列表的实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

飞流直下的精彩 -- 淘宝UWP中瀑布流列表的实现
原文: 飞流直下的精彩 -- 淘宝UWP中瀑布流列表的实现

在淘宝UWP中,搜索结果列表是用户了解宝贝的重要一环,其中的图片效果对吸引用户点击搜索结果,查看宝贝详情有比较大的影响。为此手机淘宝特意在搜索结果列表上采用了2种表现方式:一种就是普通的列表模式,而另一种则是突出宝贝图片的瀑布流模式。

如果用户搜索某些关键字,如女装类的情况下,淘宝的搜索结果会自动切换到瀑布流模式,让宝贝的美图更加冲击用户的视觉。

但是UWP默认的列表控件并没有这种效果,listview控件中虽然子元素可以不一样大小,但是只能有1列,gridview控件虽然有多列,但每个子元素都只能取相同大小。经过一番搜索,也只有元素由固定大小的不同倍数构成的gridview控件可以使用,但效果并不理想。那么我们有没有办法能得到瀑布流的效果的控件呢?答案是肯定的。我们可能记得在listview中,如果我们要改变列表的扩展方向,需要在xaml中定义listview的itemspanel:

 <ListView><ListView.ItemsPanel><ItemsPanelTemplate><ItemsWrapGrid Orientation="Horizontal"></ItemsWrapGrid></ItemsPanelTemplate></ListView.ItemsPanel></ListView> 
View Code

 

在gridview中设置最大的行数或列数时,我们也要定义ItemsWrapGrid。

这里的ItemsStackPanel,ItemsWrapGrid与我们之前在淘宝UWP--自定义Panel中所提到的panel有什么关系呢?

实际上它们都是继承自panel的FrameworkElement,也就是说它们都可以对内部的子元素进行布局。不管listview还是gridview,他们列表的形式都是由itemsPanel决定的,listview只有1列,可以纵向或者横向扩展,是由它使用的itemsPanel- ItemsStackPanel确定的,gridview可以有多列,可以纵向或者横向扩展,也是由它使用了ItemsWrapGrid作为itemsPanel来决定的。那么如果我们根据淘宝UWP--自定义Panel中提到的方法,自定义一个panel,就可以实现瀑布流中形式的列表了。

整理需求

确定了要实现一个瀑布流的布局panel,我们接下来考虑一下我们的具体有哪些需求呢?在淘宝的搜索结果瀑布流中,只用了2列。但是考虑到我们的淘宝UWP可能运行在PC或者平板等横向屏幕的设备上,如果也用2列的话会有很多图只能在屏幕中显示一部分。所以在PC或者平板等横向屏幕的设备上,我们要让瀑布流的列数增加,也就是说我们的panel需要能自定义列数。

在淘宝的搜索结果瀑布流中,宝贝的搜索结果是纵向扩展的,那么有没有可能有情况需要使用横向扩展的瀑布流呢?想想似乎是比较酷的,那么就为我们的panel加上扩展方向的选择吧。

着手实现

在确定了具体需求之后就可以开始着手实现我们的自定义panel了。

我们的面板的名字就叫WaterfallPanel吧,需要继承panel类型,能定义行数或者列数NumberOfColumnsOrRows,能定义扩展方向WaterfallOrientation,并实现MeasureOverride和ArrangeOverride方法:

public class WaterfallPanel :Panel{public int NumbersOfColumnsOrRows{get { return (int)GetValue(NumbersOfColumnsOrRowsProperty); }set { SetValue(NumbersOfColumnsOrRowsProperty, value); }}// Using a DependencyProperty as the backing store for NumbersOfColumnsOrRows. This enables animation, styling, binding, etc...public static readonly DependencyProperty NumbersOfColumnsOrRowsProperty =DependencyProperty.Register("NumbersOfColumnsOrRows", typeof(int), typeof(WaterfallPanel), new PropertyMetadata(2));public Orientation WaterfallOrientation{get { return (Orientation)GetValue(WaterfallOrientationProperty); }set { SetValue(WaterfallOrientationProperty, value); }}// Using a DependencyProperty as the backing store for WaterfallOrientation. This enables animation, styling, binding, etc...public static readonly DependencyProperty WaterfallOrientationProperty =DependencyProperty.Register("WaterfallOrientation", typeof(Orientation), typeof(WaterfallPanel), new PropertyMetadata(Orientation.Vertical));protected override Size MeasureOverride(Size availableSize){return base.MeasureOverride(availableSize);}protected override Size ArrangeOverride(Size finalSize){return base.ArrangeOverride(finalSize);}}
View Code

 

这就是我们的panel的雏形了,需要注意的是我们的NumberOfColumnsOrRows,和WaterfallOrientation属性需要能在xaml中调用,因此必须写成DependencyProperty的形式。在写的时候可以用先输入propdp,再按tab键,在vs自动生成的模板上进行修改的方法,能方便很多。考虑到用户也可能会不输入行列数或者扩展方向,我们给了它们默认值显示2行或列,纵向扩展。

首先我们来实现MeasureOverride方法。MeasureOverride方法接受一个panel可以占据的空间大小availableSize,再根据这个availableSize给内部的子元素分配可以占据的空间大小。在瀑布流中,以纵向扩展为例,每个元素的最大宽度都是相等的,都是panel宽度的列数分之一。而每个元素的高度则可以自由扩展。因此根据这样的思路我们的MeasureOverride方法的实现应该是:

protected override Size MeasureOverride(Size availableSize){if (NumberOfColumnsOrRows < 1){throw (new ArgumentOutOfRangeException("NumberOfColumnsOrRows", "NumberOfColumnsOrRows must >0"));//太窄

}var LenList = new List<double>();for (int i = 0; i < NumberOfColumnsOrRows; i++){LenList.Add(0);}if (WaterfallOrientation == Orientation.Vertical){double maxWidth = availableSize.Width / NumberOfColumnsOrRows;Size maxSize = new Size(maxWidth, double.PositiveInfinity);foreach (var item in Children){item.Measure(maxSize);var itemHeight = item.DesiredSize.Height;var minLen = LenList[0];int minP = 0;for (int i = 1; i < NumberOfColumnsOrRows; i++){if (LenList[i] < minLen){minLen = LenList[i];minP = i;}}LenList[minP] += itemHeight;}var maxLen = LenList[0];int maxP = 0;for (int i = 1; i < NumberOfColumnsOrRows; i++){if (LenList[i] > maxLen){maxLen = LenList[i];maxP = i;}}return new Size(availableSize.Width, LenList[maxP]);}else{double maxHeight = availableSize.Height / NumberOfColumnsOrRows;Size maxSize = new Size(double.PositiveInfinity, maxHeight);foreach (var item in Children){item.Measure(maxSize);var itemWidth = item.DesiredSize.Width;var minLen = LenList[0];int minP = 0;for (int i = 1; i < NumberOfColumnsOrRows; i++){if (LenList[i] < minLen){minLen = LenList[i];minP = i;}}LenList[minP] += itemWidth;}var maxLen = LenList[0];int maxP = 0;for (int i = 1; i < NumberOfColumnsOrRows; i++){if (LenList[i] > maxLen){maxLen = LenList[i];maxP = i;}}return new Size(LenList[maxP], availableSize.Height);}} 
View Code

 

接下来实现我们的ArrangeOverride方法。在ArrangeOverride方法中,会接受一个可以进行布局的空间大小finalSize,在这个空间中将子元素逐个定位在合适的位置。在我们的瀑布流panel中,我们要将子元素定位成瀑布流的效果。那么如何实现瀑布流的效果呢?以纵向的情况为例,瀑布流中每个元素的宽度一致而长度不一,排成一定数量的列,每列长度虽然参差但差距不大,并列排在panel中形成瀑布的样子。我们可以将panel分成若干列,将子元素分配到这些列中按纵向扩展的顺序排布,每次分配时都挑总长最短的列,将新元素分配到这列。这样就能让各个列的长度差距不大,满足瀑布流的效果。按照这个思路,我们实现了ArrangeOverride方法:

protected override Size ArrangeOverride(Size finalSize){if (NumberOfColumnsOrRows < 1){throw (new ArgumentOutOfRangeException("NumberOfColumnsOrRows", "NumberOfColumnsOrRows must >0"));//太窄

}var LenList = new List<double>();var posXorYList = new List<double>();if (WaterfallOrientation == Orientation.Vertical){double maxWidth = finalSize.Width / NumberOfColumnsOrRows;//列的长度和左上角的x值for (int i = 0; i < NumberOfColumnsOrRows; i++){LenList.Add(0);posXorYList.Add(i * maxWidth);}foreach (var item in Children){var itemHeight = item.DesiredSize.Height;var minLen = LenList[0];int minP = 0;for (int i = 1; i < NumberOfColumnsOrRows; i++){if (LenList[i] < minLen){minLen = LenList[i];minP = i;}}item.Arrange(new Rect(posXorYList[minP], LenList[minP], item.DesiredSize.Width, item.DesiredSize.Height));LenList[minP] += item.DesiredSize.Height;}var maxLen = LenList[0];int maxP = 0;for (int i = 1; i < NumberOfColumnsOrRows; i++){if (LenList[i] > maxLen){maxLen = LenList[i];maxP = i;}}return new Size(finalSize.Width, LenList[maxP]);}else{double maxHeight = finalSize.Height / NumberOfColumnsOrRows;//行的长度和左上角的y值for (int i = 0; i < NumberOfColumnsOrRows; i++){LenList.Add(0);posXorYList.Add(i * maxHeight);}foreach (var item in Children){var itemWidth = item.DesiredSize.Width;var minLen = LenList[0];int minP = 0;for (int i = 1; i < NumberOfColumnsOrRows; i++){if (LenList[i] < minLen){minLen = LenList[i];minP = i;}}item.Arrange(new Rect(LenList[minP], posXorYList[minP], item.DesiredSize.Width, item.DesiredSize.Height));LenList[minP] += item.DesiredSize.Width;}var maxLen = LenList[0];int maxP = 0;for (int i = 1; i < NumberOfColumnsOrRows; i++){if (LenList[i] > maxLen){maxLen = LenList[i];maxP = i;}}return new Size(LenList[maxP], finalSize.Height);}}
View Code

 

在MeasureOverride方法和ArrangeOverride方法实现之后,我们的瀑布流panel就可以说初步完成了。实际的运行效果和我们的淘宝UWP版中是基本一致的,只不过在淘宝UWP版的不断迭代中,我们又对一些细节做了优化。另外需要注意的是如果使用横向瀑布流,需要把WaterfallPanel所属的listview或gridview的scrollviewer相关的值进行设置:

ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Disabled"

否则会由于listview或gridview的默认设置是纵向扩展,从而在MeasureOverride方法传入的availableSize的height是无限大,最终导致计算错误而应用崩溃。

这样看来只要掌握了方法和思路,自定义panel也并没有想象中那么困难。小伙伴们也可以尝试创建自己独有的列表控件,如果你有一些奇思妙想的话,也欢迎分享出来。

让我们共同进步,让UWP应用更加完善。

posted on 2017-09-20 13:57 NET未来之路 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/7561158.html

这篇关于飞流直下的精彩 -- 淘宝UWP中瀑布流列表的实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/weixin_30758821/article/details/98679346
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/801676

相关文章

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API,结合WebAudioAPI,实现网页录音功能,从获取音频流到处理和保存录音,整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3

Java实现删除文件中的指定内容

《Java实现删除文件中的指定内容》在日常开发中,经常需要对文本文件进行批量处理,其中,删除文件中指定内容是最常见的需求之一,下面我们就来看看如何使用java实现删除文件中的指定内容吧... 目录1. 项目背景详细介绍2. 项目需求详细介绍2.1 功能需求2.2 非功能需求3. 相关技术详细介绍3.1 Ja

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》:本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色(红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解

PostgreSQL中MVCC 机制的实现

《PostgreSQL中MVCC机制的实现》本文主要介绍了PostgreSQL中MVCC机制的实现,通过多版本数据存储、快照隔离和事务ID管理实现高并发读写,具有一定的参考价值,感兴趣的可以了解一下... 目录一 MVCC 基本原理python1.1 MVCC 核心概念1.2 与传统锁机制对比二 Postg

SpringBoot整合Flowable实现工作流的详细流程

《SpringBoot整合Flowable实现工作流的详细流程》Flowable是一个使用Java编写的轻量级业务流程引擎,Flowable流程引擎可用于部署BPMN2.0流程定义,创建这些流程定义的... 目录1、流程引擎介绍2、创建项目3、画流程图4、开发接口4.1 Java 类梳理4.2 查看流程图4

C++中零拷贝的多种实现方式

《C++中零拷贝的多种实现方式》本文主要介绍了C++中零拷贝的实现示例,旨在在减少数据在内存中的不必要复制,从而提高程序性能、降低内存使用并减少CPU消耗,零拷贝技术通过多种方式实现,下面就来了解一下... 目录一、C++中零拷贝技术的核心概念二、std::string_view 简介三、std::stri

C++高效内存池实现减少动态分配开销的解决方案

《C++高效内存池实现减少动态分配开销的解决方案》C++动态内存分配存在系统调用开销、碎片化和锁竞争等性能问题,内存池通过预分配、分块管理和缓存复用解决这些问题,下面就来了解一下... 目录一、C++内存分配的性能挑战二、内存池技术的核心原理三、主流内存池实现:TCMalloc与Jemalloc1. TCM

OpenCV实现实时颜色检测的示例

《OpenCV实现实时颜色检测的示例》本文主要介绍了OpenCV实现实时颜色检测的示例,通过HSV色彩空间转换和色调范围判断实现红黄绿蓝颜色检测,包含视频捕捉、区域标记、颜色分析等功能,具有一定的参考... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间

Python实现精准提取 PDF中的文本,表格与图片

《Python实现精准提取PDF中的文本,表格与图片》在实际的系统开发中,处理PDF文件不仅限于读取整页文本,还有提取文档中的表格数据,图片或特定区域的内容,下面我们来看看如何使用Python实... 目录安装 python 库提取 PDF 文本内容:获取整页文本与指定区域内容获取页面上的所有文本内容获取

基于Python实现一个Windows Tree命令工具

《基于Python实现一个WindowsTree命令工具》今天想要在Windows平台的CMD命令终端窗口中使用像Linux下的tree命令,打印一下目录结构层级树,然而还真有tree命令,但是发现... 目录引言实现代码使用说明可用选项示例用法功能特点添加到环境变量方法一:创建批处理文件并添加到PATH1