在一些允许用户自定义栏目顺序的app(如:凤凰新闻、网易云音乐等),我们可以方便地拖拽列表项来完成列表的重新排序,进而完成对栏目顺序的重排。这个功能很人性化,而实现起来其实很简单(甚至都不用写什么后台代码),只有三步。

①把冰箱门打开

首先,我们需要让冰箱的大门敞开,也就是允许我们进行拖拽的相关操作。以ListView为例,注意下面几个属性。

 1     <StackPanel>
 2         <ListView x:Name="list"
 3                   AllowDrop="True"
 4                   CanReorderItems="True"
 5                   IsSwipeEnabled="True">
 6             <ListView.ItemContainerStyle>
 7                 <Style TargetType="ListViewItem">
 8                     <Setter Property="Background" Value="Gray"/>
 9                     <Setter Property="Foreground" Value="White"/>
10                     <Setter Property="Margin" Value="4"/>
11                 </Style>
12             </ListView.ItemContainerStyle>
13         </ListView>
14         <Button Click="Button_Click">Show Items</Button>
15         <TextBlock x:Name="txt"/>
16     </StackPanel>    

AllowDrop属性允许元素进行拖动,它继承自UIElement基类,为所有可视元素支持。

CanReorderItems属性继承自ListViewBase基类,允许列表控件的项可以重新排序。

IsSwipeEnabled属性(swipe有“轻扫”之意)也需要设置为“True”,否则在触摸屏等输入设备下无法进行操作。相关的详尽说明在MSDN文档里有介绍(https://docs.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.Controls.ListViewBase),此部分摘录部分原文:

Remarks

Setting IsSwipeEnabled to false disables some default touch interactions, so it should be set to true when these interactions are needed. For example:

  • If item selection is enabled and you set IsSwipeEnabled to false, a user can deselect items by right-clicking with the mouse, but can't deselect an item with touch by using a swipe gesture.
  • If you set CanDragItems to true and IsSwipeEnabled to false, a user can drag items with the mouse, but not with touch.
  • If you set CanReorderItems to true and IsSwipeEnabled to false, a user can reorder items with the mouse, but not with touch.

You typically set IsSwipeEnabled to false to disable swipe animations when items in the view don't support interactions that use the swipe gesture, like deselecting, dragging, and reordering. Disabling the animation when it's not needed can improve the performance of your app.

(有趣的是最后一段:当列表不允许轻扫手势(撤销选定,拖动,拖拽重排)时,我们可以“显式”地将IsSwipeEnabled属性设置为False来提升应用的性能。)

②把大象装进去

前台ok后,我们就可以在后台加点东西,把我们的排序逻辑(其实并没有,微软已经写好了)添加进去。这个demo里,我用了一个按钮和一个文本框来观察重排的结果。如下:

 1     public sealed partial class MainPage : Page
 2     {
 3         public MainPage()
 4         {
 5             this.InitializeComponent();
 6             for (int i = 0; i < 10; i++)
 7             {
 8                 list.Items.Add($"-----THIS IS ITEM {i}-----");
 9             }
10         }
11
12         private void Button_Click(object sender, RoutedEventArgs e)
13         {
14             txt.Text = string.Empty;
15             foreach (var item in list.Items)
16             {
17                 txt.Text += item.ToString()[18] + " ";
18             }
19         }
20     }

这样,重新排序后,点击按钮,我们即可观察到结果了。

③把冰箱门关上

把大象(?)装进去之后,最后就是我们的收尾工作了。显然,刚才的列表只是一个中间的载体,是我们待排序栏目的简单显示。一般而言,这个listview会安置在contentdialog或是popup里,那么怎么在重排后立即让父页面上的栏目得到相应,进行重排呢?我们用个预定义的委托即可,加在刚才的后台代码里(冰箱能装的东西其实挺多的)。

        public Action action;

然后在父页面注册方法,比如:

1             btn.Click += async (s, e) =>
2             {
3                 var dialog = new Dialogs.Sort();
4                 dialog.action += async () => { await sortagain(); };
5                 await dialog.ShowAsync();
6             };

大功告成!

转载于:https://www.cnblogs.com/DaweiX/p/6427637.html

【UWP】拖拽列表项的排序功能实现相关推荐

  1. java实现拖动排序功能_Java实现拖拽列表项的排序功能

    在一些允许用户自定义栏目顺序的app(如:凤凰新闻.网易云音乐等),我们可以方便地拖拽列表项来完成列表的重新排序,进而完成对栏目顺序的重排.这个功能很人性化,而实现起来其实很简单(甚至都不用写什么后台 ...

  2. unity实现图片轮播效果_Unity3D实现列表拖拽轮播分页滚动功能

    在使用UGUI的ScrollRect做列表滚动时,会有分页滚动的需求,基于ScrollRect写了一个,只需要一个ScrollRect组件即可 效果截图: Threshold为滚动阈值,当翻页的长度达 ...

  3. vuedraggable自由拖拽html,vue中draggable拖拽列表的使用

    1.安装 npm install vuedraggable 或者使用镜像安装 cnpm install vuedraggable 2.使用 首先在使用的组件中引入 import draggable f ...

  4. dropzone.js php,Laravel 5.1 中基于 Dropzone.js 实现图片拖拽上传及删除功能

    注:本教程代码适用于Laravel 5.1版本. 1.概述 Dropzone 是目前最好的免费文件拖拽上传库,它拥有很多特性和选项以便你可以使用多种方式来自定义. 在Laravel项目集成Dropzo ...

  5. MovieClip实现拖拽等移动位置的功能

    今天我已经实现了对加载的MovieClip移动位置的功能,包括上.下.左.右移动功能.充满容器功能.1:1还原初始位置功能和鼠标拖拽移动功能.但是,移动位置的功能总体上仍旧存在一个问题:无法控制垂直滚 ...

  6. 实现可拖拽,拉伸,吸附功能的甘特图(时间/任务表)

    最近应为业务需求需要开发一个任务调度后台,实现一个甘特图( 类似上学时候的课程表,'时间/课程/代课老师' 转换为: "时间/任务/执行人'").参考图片: 每一行的00:00到2 ...

  7. flutter实现可缩放可拖拽双击放大的图片功能

    ### flutter_drag_scale ``` 可缩放可拖拽的功能,可实现图片或者其他widget的缩放已经拖拽 并支持双击放大的功能 ``` 我们知道官方提供了双击缩放,但是不支持拖拽的功能, ...

  8. 商品列表分页和排序功能实现

    本节我们实现商品列表的升降序.价格的过滤.商品列表的分页和loading功能 实现排序 既然要实现排序,必然要获取一个排序的参数,通过req.param()来获取前端传过来的参数 let sort = ...

  9. vue下轻松解决模拟微信视频缩略图拖拽→吸附窗口边界的功能

    <script> export default {data() {return {drag: {draggedSel: ".girl", //被拖动元素的class或i ...

最新文章

  1. package和import语句_5
  2. python的gui库哪个好_常用的13 个Python开发者必备的Python GUI库
  3. visio wps 流程图_科研必备:几款好用的流程图工具,助力你的论文/科研绘图
  4. 前端学习(2026)vue之电商管理系统电商系统之实现分页功能
  5. 【亲测有效】win10下输入法突然变成繁体了怎么设置回来?
  6. 关于Firefox浏览器设置默认字体的教程
  7. 408计算机考研交流群,考研初试复习经验分享(计算机408)
  8. Python 文字转语音(TTS)
  9. ODB++ 数据格式解析软件
  10. Android开发之内容提供者——创建自己的ContentProvider(详解)
  11. Caltech-UCSD Birds-200-鸟类数据集
  12. html图片显示详情,纯CSS鼠标经过图片视差弹出层显示详情链接按钮特效代码.html...
  13. C# 人脸检测 人脸比对 活体检测 口罩检测 年龄预测 性别预测 眼睛状态检测
  14. 【软件建模与UML】(持续更新)
  15. 关于硕士毕业论文的思路整理
  16. BUCT数据结构——图
  17. 北京移动宽带光猫 GM219-S 路由功能分离内置路由器改接外置路由器
  18. 30秒集结会议、能开“会中会” IMO班聊助力高效协同办公
  19. 巧用Word目录和标题
  20. StackOverflow网友Bert F发帖提问:哪本最具影响力的书,是每个程序员都应该读的?...

热门文章

  1. Ubuntu自定义终端窗口位置
  2. 偶然发现了获取有ID的dom的一种方法
  3. 《代码阅读方法与实践》阅读笔记一
  4. 网络爬虫Java还是Python还是c++?
  5. 大学毕业标语计算机学院,大学毕业横幅标语创意
  6. python第五章课后题答案超星_MOOC网课章节答案_Python 语言程序设计见面课测试答案...
  7. KotlinPoet
  8. 联想家庭云中心:天边飘来“故乡的云”
  9. 仟亿达2016年净利润2184万同比跌46%
  10. 《为iPad而设计:打造畅销App》——想象iPad上的游戏