[MAUI]在.NET MAUI中实现可拖拽排序列表

.NET MAUI 中提供了拖放(drag-drop)手势识别器，允许用户通过拖动手势来移动控件。在这篇文章中，我们将学习如何使用拖放手势识别器来实现可拖拽排序列表。在本例中，列表中显示不同大小的磁贴（Tile）并且可以拖拽排序。

在这里插入图片描述

使用.NET MAU实现跨平台支持，本项目可运行于Android、iOS平台。

创建可拖放控件

新建.NET MAUI项目，命名Tile

当手指触碰可拖拽区域超过一定时长（不同平台下时长不一定相同，如在Android中是1s）时，将触发拖动手势。
手指离开屏幕时，将触发放置手势。

启用拖动

为页面视图控件创建拖动手势识别器(DragGestureRecognizer)， 它定义了以下属性：

属性类型描述
CanDragbool指明手势识别器附加到的控件能否为拖动源。 此属性的默认值为 true。
CanDragbool指明手势识别器附加到的控件能否为拖动源。 此属性的默认值为 true。
DragStartingCommandICommand在第一次识别拖动手势时执行。
DragStartingCommandParameterobject是传递给 DragStartingCommand 的参数。
DropCompletedCommandICommand在放置拖动源时执行。
DropCompletedCommandParameterobject是传递给 DropCompletedCommand 的参数。

启用放置

为页面视图控件创建放置手势识别器(DropGestureRecognizer)， 它定义了以下属性：

属性类型描述
AllowDropbool指明手势识别器附加到的元素能否为放置目标。 此属性的默认值为 true。
DragOverCommandICommand在拖动源被拖动到放置目标上时执行。
DragOverCommandParameterobject是传递给 DragOverCommand 的参数。
DragLeaveCommandICommand在拖动源被拖至放置目标上时执行。
DragLeaveCommandParameterobject是传递给 DragLeaveCommand 的参数。
DropCommandICommand在拖动源被放置到放置目标上时执行。
DropCommandParameterobject是传递给 DropCommand 的参数。

创建可拖拽控件的绑定类，实现IDraggableItem接口，定义拖动相关的属性和命令。

public interface IDraggableItem
{bool IsBeingDraggedOver { get; set; }bool IsBeingDragged { get; set; }Command Dragged { get; set; }Command DraggedOver { get; set; }Command DragLeave { get; set; }Command Dropped { get; set; }object DraggedItem { get; set; }object DropPlaceHolderItem { get; set; }
}

Dragged： 拖拽开始时触发的命令。
DraggedOver： 拖拽控件悬停在当前控件上方时触发的命令。
DragLeave： 拖拽控件离开当前控件时触发的命令。
Dropped： 拖拽控件放置在当前控件上方时触发的命令。

IsBeingDragged 为true时，通知当前控件正在被拖拽。
IsBeingDraggedOver 为true时，通知当前控件正在有拖拽控件悬停在其上方。

DraggedItem： 正在拖拽的控件。
DropPlaceHolderItem： 悬停在其上方时的控件，即当前控件的占位控件。

此时可拖拽控件为磁贴片段（TileSegement）， 创建一个类用于描述磁贴可显示的属性，如标题、描述、图标、颜色等。

public class TileSegment 
{public string Title { get; set; }public string Type { get; set; }public string Desc { get; set; }public string Icon { get; set; }public Color Color { get; set; }
}

创建绑定服务类

创建可拖拽控件的绑定服务类TileSegmentService，继承ObservableObject，并实现IDraggableItem接口。

public class TileSegmentService : ObservableObject, ITileSegmentService
{...
}

拖拽（Drag）

拖拽开始时，将IsBeingDragged设置为true，通知当前控件正在被拖拽，同时将DraggedItem设置为当前控件。

private void OnDragged(object item)
{IsBeingDragged=true;DraggedItem=item;
}

拖拽悬停，经过（DragOver）

拖拽控件悬停在当前控件上方时，将IsBeingDraggedOver设置为true，通知当前控件正在有拖拽控件悬停在其上方，同时在服务列表中寻找当前正在被拖拽的服务，将DropPlaceHolderItem设置为当前控件。

private void OnDraggedOver(object item)
{if (!IsBeingDragged && item!=null){IsBeingDraggedOver=true;var itemToMove = Container.TileSegments.First(i => i.IsBeingDragged);if (itemToMove.DraggedItem!=null){DropPlaceHolderItem=itemToMove.DraggedItem;}}}

离开控件上方时，IsBeingDraggedOver设置为false

private void OnDragLeave(object item)
{IsBeingDraggedOver = false;
}

释放（Drop）

拖拽完成时，获取当前正在被拖拽的控件，将其从服务列表中移除，然后将其插入到当前控件的位置，通知当前控件拖拽完成。

private void OnDropped(object item)
{var itemToMove = Container.TileSegments.First(i => i.IsBeingDragged);if (itemToMove == null ||  itemToMove == this)return;Container.TileSegments.Remove(itemToMove);var insertAtIndex = Container.TileSegments.IndexOf(this);Container.TileSegments.Insert(insertAtIndex, itemToMove);itemToMove.IsBeingDragged = false;IsBeingDraggedOver = false;DraggedItem=null;}

完整的TileSegmentService代码如下：

public class TileSegmentService : ObservableObject, ITileSegmentService
{public TileSegmentService(TileSegment tileSegment){Remove = new Command(RemoveAction);TileSegment = tileSegment;Dragged = new Command(OnDragged);DraggedOver = new Command(OnDraggedOver);DragLeave = new Command(OnDragLeave);Dropped = new Command(i => OnDropped(i));}private void OnDragged(object item){IsBeingDragged=true;}private void OnDraggedOver(object item){if (!IsBeingDragged && item!=null){IsBeingDraggedOver=true;var itemToMove = Container.TileSegments.First(i => i.IsBeingDragged);if (itemToMove.DraggedItem!=null){DropPlaceHolderItem=itemToMove.DraggedItem;}}}private object _draggedItem;public object DraggedItem{get { return _draggedItem; }set{_draggedItem = value;OnPropertyChanged();}}private object _dropPlaceHolderItem;public object DropPlaceHolderItem{get { return _dropPlaceHolderItem; }set{_dropPlaceHolderItem = value;OnPropertyChanged();}}private void OnDragLeave(object item){IsBeingDraggedOver = false;DraggedItem = null;}private void OnDropped(object item){var itemToMove = Container.TileSegments.First(i => i.IsBeingDragged);if (itemToMove == null ||  itemToMove == this)return;Container.TileSegments.Remove(itemToMove);var insertAtIndex = Container.TileSegments.IndexOf(this);Container.TileSegments.Insert(insertAtIndex, itemToMove);itemToMove.IsBeingDragged = false;IsBeingDraggedOver = false;DraggedItem=null;}private async void RemoveAction(object obj){if (Container is ITileSegmentServiceContainer){(Container as ITileSegmentServiceContainer).RemoveSegment.Execute(this);}}public IReadOnlyTileSegmentServiceContainer Container { get; set; }private TileSegment tileSegment;public TileSegment TileSegment{get { return tileSegment; }set{tileSegment = value;OnPropertyChanged();}}private bool _isBeingDragged;public bool IsBeingDragged{get { return _isBeingDragged; }set{_isBeingDragged = value;OnPropertyChanged();}}private bool _isBeingDraggedOver;public bool IsBeingDraggedOver{get { return _isBeingDraggedOver; }set{_isBeingDraggedOver = value;OnPropertyChanged();}}public Command Remove { get; set; }public Command Dragged { get; set; }public Command DraggedOver { get; set; }public Command DragLeave { get; set; }public Command Dropped { get; set; }
}

创建页面元素

在Controls目录下创建不同大小的磁贴控件，如下图所示。

在这里插入图片描述

在MainPage中创建CollectionView，用于将磁贴元素以列表形式展示。

<CollectionView Grid.Row="1"x:Name="MainCollectionView"ItemsSource="{Binding TileSegments}"ItemTemplate="{StaticResource TileSegmentDataTemplateSelector}"><CollectionView.ItemsLayout><LinearItemsLayout Orientation="Vertical" /></CollectionView.ItemsLayout>
</CollectionView>

创建MainPageViewModel，创建绑定服务类集合TileSegments，初始化中添加一些不同颜色，大小的磁贴，并将TileSegementService.Container设置为自己(this)。

不同大小的磁贴通过绑定相应的数据，使用不同的数据模板进行展示。请阅读博文 [MAUI程序设计]界面多态与实现，了解如何实现列表Item的多态。

在这里插入图片描述

在MainPage中创建磁贴片段数据模板选择器（TileSegmentDataTemplateSelector），用于根据磁贴片段的大小选择不同的数据模板。

<DataTemplate x:Key="SmallSegment"><controls1:SmallSegmentView  Margin="0,5"ControlTemplate="{StaticResource TileSegmentTemplate}"></controls1:SmallSegmentView>
</DataTemplate>
<DataTemplate x:Key="MediumSegment"><controls1:MediumSegmentView Margin="0,5"ControlTemplate="{StaticResource TileSegmentTemplate}"></controls1:MediumSegmentView>
</DataTemplate>
<DataTemplate x:Key="LargeSegment"><controls1:LargeSegmentView Margin="0,5"ControlTemplate="{StaticResource TileSegmentTemplate}"></controls1:LargeSegmentView>
</DataTemplate>
<controls1:TileSegmentDataTemplateSelector x:Key="TileSegmentDataTemplateSelector"ResourcesContainer="{x:Reference Main}" />

创建磁贴控件模板TileSegmentTemplate，并在此指定DropGestureRecognizer

<ControlTemplate x:Key="TileSegmentTemplate"><ContentView><StackLayout><StackLayout.GestureRecognizers><DropGestureRecognizer AllowDrop="True"DragLeaveCommand="{TemplateBinding BindingContext.DragLeave}"DragLeaveCommandParameter="{TemplateBinding}"DragOverCommand="{TemplateBinding BindingContext.DraggedOver}"DragOverCommandParameter="{TemplateBinding}"DropCommand="{TemplateBinding BindingContext.Dropped}"DropCommandParameter="{TemplateBinding}" /></StackLayout.GestureRecognizers></StackLayout></ContentView>
</ControlTemplate>

创建磁贴控件外观Layout，<ContentPresenter />处将呈现磁贴片段的内容。在Layout指定DragGestureRecognizer。

<Border x:Name="ContentLayout"Margin="0"><Grid><Grid.GestureRecognizers><DragGestureRecognizer CanDrag="True"DragStartingCommand="{TemplateBinding BindingContext.Dragged}"DragStartingCommandParameter="{TemplateBinding}" /></Grid.GestureRecognizers><ContentPresenter /><Button CornerRadius="100"HeightRequest="20"WidthRequest="20"Padding="0"BackgroundColor="Red"TextColor="White"Command="{TemplateBinding BindingContext.Remove}"Text="×"HorizontalOptions="End"VerticalOptions="Start"></Button></Grid>
</Border>

在这里插入图片描述

创建占位控件，用于指示松开手指时，控件将放置的位置区域，在这里绑定DropPlaceHolderItem的高度和宽度。

<Border StrokeThickness="4"StrokeDashArray="2 2"StrokeDashOffset="6"Stroke="black"HorizontalOptions="Center"IsVisible="{TemplateBinding BindingContext.IsBeingDraggedOver}"><Grid HeightRequest="{TemplateBinding BindingContext.DropPlaceHolderItem.Height}"WidthRequest="{TemplateBinding BindingContext.DropPlaceHolderItem.Width}"><Label HorizontalTextAlignment="Center"VerticalOptions="Center"Text="松开手指将放置条目至此处"></Label></Grid>
</Border>

最终效果

在这里插入图片描述

项目地址

Github:maui-samples

关注我，学习更多.NET MAUI开发知识！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/91574.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【D3.js 01】

【D3.js 01】

D3.js 01 说在前面1 概述2 配置Web环境3 HTML4 SVG5 DOM6 JS7 常用接口8 D3语法基础9 使用D3查询SVG10 使用D3设置SVG中属性11 修改整组属性12 使用D3添加与删除SVG元素13 数据读取 —— CSV数据14 D3.js的数值计算15 比例尺Scale - LinearScale - Band 16 引入坐标轴17 DATA-J…
阅读更多...
13.3 目标检测和边界框

13.3 目标检测和边界框

锚框的计算公式 假设原图的高为H,宽为W 详细公式推导 以同一个像素点为锚框&#xff0c;可以生成 (n个缩放 m个宽高比 -1 )个锚框 锚框的作用&#xff1a; 不用直接去预测真实框的四个坐标&#xff0c;而是&#xff1a; 1.先生成多个锚框。 2.预测每个锚框里是否含有要预测…
阅读更多...
【11】Redis学习笔记 （微软windows版本）【Redis】

【11】Redis学习笔记 （微软windows版本）【Redis】

注意:官redis方不支持windows版本 只支持linux 此笔记是依托微软开发windows版本学习 一、前言 Redis简介&#xff1a; Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的内存数据结构存储系统&#xff0c;它也被称为数据结构服务器。Redis以键值对&am…
阅读更多...
使用Python统计字符内容的占比

使用Python统计字符内容的占比

说明&#xff1a;如果有自己动手做过字符动画&#xff0c;会知道字符动画的“灵动性”核心在于使用的字符集。 简单来说&#xff0c;动画转为字符动画&#xff0c;原理是将动画转为灰阶图&#xff0c;灰度范围是0~255&#xff0c;然后将对应灰度的像素点转为对应比值的字符。这…
阅读更多...
轻松抽象JavaScript

轻松抽象JavaScript

上一期说了伪随机方法中有一个问题&#xff0c;那就是如何得到0.1这个值 理论上是可以的&#xff0c;但是实践缺有很大区别 大海捞针可信吗&#xff1f;可行吗&#xff1f; 当然可行&#xff0c;也可行&#xff0c;用一块超级大磁铁&#xff0c;磁力拉满&#xff0c;而且还具…
阅读更多...
【论文阅读】基于深度学习的时序预测——Non-stationary Transformers

【论文阅读】基于深度学习的时序预测——Non-stationary Transformers

系列文章链接 论文一&#xff1a;2020 Informer&#xff1a;长时序数据预测 论文二&#xff1a;2021 Autoformer&#xff1a;长序列数据预测 论文三&#xff1a;2022 FEDformer&#xff1a;长序列数据预测 论文四&#xff1a;2022 Non-Stationary Transformers&#xff1a;非平…
阅读更多...
web-js

web-js

<html><head><title>基本语法</title></head><body><script>// window.alert("js");// document.write("js");// console.log("js");// function add(a,b){// return ab;// }var result functio…
阅读更多...
商城-学习整理-高级-全文检索-ES（九）

商城-学习整理-高级-全文检索-ES（九）

目录 一、ES简介1、网址2、基本概念1、Index&#xff08;索引&#xff09;2、Type&#xff08;类型&#xff09;3、Document&#xff08;文档&#xff09;4、倒排索引机制4.1 正向索引和倒排索引4.2 正向索引4.3 倒排索引 3、相关软件及下载地址3.1 Kibana简介3.2 logstash简介…
阅读更多...
【Go语言】go_session（超级详细）

【Go语言】go_session（超级详细）

目录 前言附件代码审计Index函数Admin函数Flask函数server.py问题 思路本地搭建环境admin绕过SaveUploadedFile方法payload 总结 前言 国赛初赛有一道题目go session&#xff0c;用go的Gin框架和pongo2模板引擎写的&#xff0c;是关于go的pongo2模板注入和flask的热加载&#…
阅读更多...
分布式 - 服务器Nginx：一小时入门系列之代理缓冲与缓存

分布式 - 服务器Nginx：一小时入门系列之代理缓冲与缓存

官方文档&#xff1a;https://nginx.org/en/docs/http/ngx_http_proxy_module.html 1. 代理缓冲 proxy_buffer 代理缓冲用于临时存储从后端服务器返回的响应数据。通过使用代理缓冲&#xff0c;Nginx可以在接收完整的响应后再将其发送给客户端&#xff0c;从而提高性能和效率…
阅读更多...
智谷星图赵俊：让人才和区块链产业“双向奔赴”丨对话MVP

智谷星图赵俊：让人才和区块链产业“双向奔赴”丨对话MVP

区块链产业需要什么样的人才&#xff1f;赵俊很有发言权。 赵俊是北京智谷星图科技有限公司的技术总监&#xff0c;也是FISCO BCOS官方认证讲师。他2017年接触区块链&#xff0c;随后选择人才培育领域深耕。“为区块链行业引进更多人才这件事很有价值&#xff0c;跟我的职业理…
阅读更多...
【Java转Go】快速上手学习笔记（一）之环境安装篇

【Java转Go】快速上手学习笔记（一）之环境安装篇

前言 前两天开始学习Go&#xff0c;需要写篇笔记记录总结一下。 Go它也是可以做web开发的&#xff0c;就像Java一样&#xff0c;做JavaWeb项目&#xff0c;Go也可以做GoWeb项目。当然Go的作用用处肯定不止这个&#xff0c;还有很多&#xff0c;只是因为我目前的话&#xff0c…
阅读更多...
C进阶（2/7）前篇——指针进阶

C进阶（2/7）前篇——指针进阶

前言&#xff1a;本文章讲解部分指针进阶内容。后续继续更新。 文章重点&#xff1a; 1. 字符指针 2. 数组指针 3. 指针数组 4. 数组传参和指针传参 目录 前言&#xff1a;本文章讲解部分指针进阶内容。后续继续更新。 指针初阶了解&#xff1a; 1.字符指针 1.1一道有关于字…
阅读更多...
大模型基础：GPT家族与提示学习

大模型基础：GPT家族与提示学习

大模型基础：GPT 家族与提示学习 从 GPT-1 到 GPT-3.5 GPT(Generative Pre-trained Transformer)是 Google 于2018年提出的一种基于 Transformer 的预训练语言模型。它标志着自然语言处理领域从 RNN 时代进入 Transformer 时代。GPT 的发展历史和技术特点如下: GPT-12018年6月…
阅读更多...
java面试基础 -- 方法重载 方法重写

java面试基础 -- 方法重载 方法重写

目录 重载 重写 重载 方法的重载是指在同一个类中定义多个方法, 他们具有相同的名称, 但是具有不同的参数列表, 例如: public void myMethod(int arg1) {// 方法体 }public void myMethod(int arg1, int arg2) {// 方法体 }public void myMethod(String arg1) {// 方法体 }…
阅读更多...
软硬件免费，服务收费：网络安全商业模式正在被颠覆

软硬件免费，服务收费：网络安全商业模式正在被颠覆

大数据产业创新服务媒体 ——聚焦数据 改变商业 从元宇宙到造汽车&#xff0c;重回国内A股市场五年的360一路苦追热点。一直到大模型横空出世&#xff0c;360才算真正找到感觉&#xff0c;经历一次战略上的回归。 在8月9日的互联网安全大会上&#xff0c;一袭红衣的红衣教主周…
阅读更多...
财务数据分析之现金流量表模板分享

财务数据分析之现金流量表模板分享

现金流量表是我们常说的财务数据分析三表之一。它可以呈现一个企业的现金流情况&#xff0c;揭示企业经营管理健康状态&#xff0c;但在实际使用中却有总给人一种用不上、用不好的矛盾感。怎么才能把现金流量表做好&#xff1f;不如借鉴下大神的现金流量表模板。 下面介绍的是…
阅读更多...
Docker 本地镜像发布到私有仓库

Docker 本地镜像发布到私有仓库

1. 本地镜像发布到私有库流程 2. 是什么 1 官方Docker Hub地址&#xff1a;https://hub.docker.com/&#xff0c;中国大陆访问太慢了且准备被阿里云取代的趋势&#xff0c;不太主流。 2 Dockerhub、阿里云这样的公共镜像仓库可能不太方便&#xff0c;涉及机密的公司不可能提供镜…
阅读更多...
基于Gradio的GPT聊天程序

基于Gradio的GPT聊天程序

网上很多别人写的&#xff0c;要用账号也不放心。就自己写了一个基于gradio的聊天界面&#xff0c;部署后可以本地运行。 特点&#xff1a; 可以用openai的&#xff0c;也可以用api2d&#xff0c;其他api可以自己测试一下。使用了langchain的库 可以更改模型&#xff0c;会的…
阅读更多...
使用插件实现pdf，word预览功能

使用插件实现pdf，word预览功能

效果 代码&#xff1a; 插件地址&#xff1a; https://github.com/501351981/vue-office <a-modalv-model:visible"visible":title"title"ok"handleOk":bodyStyle"bodyStyle":width"1200":maskClosable"false"…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023