【UWP】拖拽列表项的排序功能实现
在一些允许用户自定义栏目顺序的app(如:凤凰新闻、网易云音乐等),我们可以方便地拖拽列表项来完成列表的重新排序,进而完成对栏目顺序的重排。这个功能很人性化,而实现起来其实很简单(甚至都不用写什么后台代码),只有三步。
①把冰箱门打开
首先,我们需要让冰箱的大门敞开,也就是允许我们进行拖拽的相关操作。以ListView为例,注意下面几个属性。
<StackPanel>
<ListView x:Name="list"
AllowDrop="True"
CanReorderItems="True"
IsSwipeEnabled="True">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Background" Value="Gray"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Margin" Value="4"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
<Button Click="Button_Click">Show Items</Button>
<TextBlock x:Name="txt"/>
</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里,我用了一个按钮和一个文本框来观察重排的结果。如下:
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
for (int i = ; i < ; i++)
{
list.Items.Add($"-----THIS IS ITEM {i}-----");
}
} private void Button_Click(object sender, RoutedEventArgs e)
{
txt.Text = string.Empty;
foreach (var item in list.Items)
{
txt.Text += item.ToString()[] + " ";
}
}
}
这样,重新排序后,点击按钮,我们即可观察到结果了。
③把冰箱门关上
把大象(?)装进去之后,最后就是我们的收尾工作了。显然,刚才的列表只是一个中间的载体,是我们待排序栏目的简单显示。一般而言,这个listview会安置在contentdialog或是popup里,那么怎么在重排后立即让父页面上的栏目得到相应,进行重排呢?我们用个预定义的委托即可,加在刚才的后台代码里(冰箱能装的东西其实挺多的)。
public Action action;
然后在父页面注册方法,比如:
btn.Click += async (s, e) =>
{
var dialog = new Dialogs.Sort();
dialog.action += async () => { await sortagain(); };
await dialog.ShowAsync();
};
大功告成!
【UWP】拖拽列表项的排序功能实现的更多相关文章
- Android高级控件(六)——自定义ListView高仿一个QQ可拖拽列表的实现
Android高级控件(六)--自定义ListView高仿一个QQ可拖拽列表的实现 我们做一些好友列表或者商品列表的时候,居多的需求可能就是需要列表拖拽了,而我们选择了ListView,也是因为使用L ...
- 实现拖拽列表-微信小程序
之前在网上搜索拖拽列表的实现时,发现了有好多的方法都是基于像素位置的计算实现的,这种方法要求列表元素的大小以及列表的位置有着非常严格的要求,修改和拓展起来非常的麻烦.于是我自己动手实现了一个基于页面元 ...
- C#实现图像拖拽以及锚点缩放功能
本文主要实现C#窗体图像拖拽以及锚点缩放功能 1.新建Windows窗体应用项目,添加一个panel控件,在panel控件上添加picturebox控件 代码如下: using System; usi ...
- Python学习小技巧之列表项的排序
Python学习小技巧之列表项的排序 本文介绍的是关于Python列表项排序的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 典型代码1: data_list = [6, 9, 1, ...
- flutter实现可缩放可拖拽双击放大的图片功能
flutter实现可缩放可拖拽双击放大的图片功能 可缩放可拖拽的功能,可实现图片或者其他widget的缩放已经拖拽并支持双击放大的功能 我们知道官方提供了双击缩放,但是不支持拖拽的功能,我们要实现向百 ...
- 移动端的拖拽这个demo实现的功能
SQL数据库适合那些需求确定和对数据完整性要去严格的项目.NoSQL数据库适用于那些对速度和可扩展性比较看重的那些不相关的,不确定和不断发展的需求. 总所周知,网页的加载速度跟图片是有很大的关系的,因 ...
- 实现拖拽复制和可排序的react.js组件
在实现复制前,对之前的拖拽排序组件属性进行了修改. 摒弃了value中的content属性,拖拽组件暴露的render函数,利用这个属性进行组件内部子组件的渲染,这点主要是参考了蚂蚁金服的Ant de ...
- UWP 拖拽文件
桌面环境下的UWP,加入拖拽模式还是会增加用户好感度的. 好了,先看一下我最新研发的[小微识别]吧,演示一下 炫酷,有没有,
- css 可拖拽列表
<!DOCTYPE HTML> <html><head> <meta charset="UTF-8"> <title>d ...
随机推荐
- 如何在我自己的web 项目的jsp页面中添加链接,直接让别人通过内网在我的电脑上下载文件
今天接到一个任务,将昨天年会的视频,音频,图片等放在公司自己的服务器上,使连接同一个路由器的(即同一个内网)的同事可以通过内网下载视频(通过内网下载,可以提高下载速度). 备注:本次用的是tomcat ...
- <libxml2/tree.h> file not found
Build Settings: head search paths :$(inherited) /usr/include/libxml2 Build phases: 加上libxml2.tbd
- LIQN join on 后跟多个条件
sql 版:SELECT [t0].[OrderID], [t0].[CustomerID], [t0].[EmployeeID], [t0].[OrderDate], [t0].[RequiredD ...
- UVa 143 - Orchard Trees
题目大意:果园里的树排列成矩阵,它们的x和y坐标均是1~99的整数.输入若干三角形,依次统计每一个三角形内部和边界上共有多少棵树. 三角形P0P1P2有向面积为A:2A = x0y1 + x2y0 + ...
- PHP获取图片颜色值
PHP获取图片颜色值,检测图片主要颜色的代码: <?php $i=imagecreatefromjpeg("photo3.jpg");//测试图片,自己定义一个,注意路径 f ...
- PHP批量上传一次点击选中多个
首先前端部分需要设置好控件,这里使用HTML5 中 input 的新增属性 multiple 可以很好的解决了以往上传多个需要点击多次"上传按钮"的麻烦: <form act ...
- netstat 查看连接数
1.查看Web服务器(Nginx Apache)的并发请求数及其TCP连接状态: netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print ...
- 天兔(Lepus)监控邮件推送安装配置
好吧,我承认官网的邮件配置教程我又没看懂,这里记录下我的配置方法 [root@HE3]# vi /usr/local/lepus/test_send_mail.py #!/usr/bin/envpyt ...
- adb server无法启动方法,结束占用端口的进程
adb server is out of date. killing...ADB server didn't ACK* failed to start daemon *error: unknown ...
- HTML5 语义元素、迁移、样式指南和代码约定
语义元素是拥有语义的元素. 什么是语义元素? 语义元素清楚地向浏览器和开发者描述其意义. 非语义元素的例子:<div> 和 <span> - 无法提供关于其内容的信息. 语义元 ...