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

news2024/11/26 0:56:45

.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.coloradmin.cn/o/881593.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【JavaEE基础学习打卡02】是时候了解Java EE了！

【JavaEE基础学习打卡02】是时候了解Java EE了！

目录 前言一、为什么要学习Java EE二、Java EE规范介绍1.什么是规范&#xff1f;2.什么是Java EE规范&#xff1f;3.Java EE版本 三、Java EE应用程序模型1.模型前置说明2.模型具体说明 总结 前言 &#x1f4dc; 本系列教程适用于 Java Web 初学者、爱好者&#xff0c;小白白。…
阅读更多...
断点续传的未来发展趋势与前景展望

断点续传的未来发展趋势与前景展望

断点续传是一种在网络传输中断后&#xff0c;能够从中断的位置继续传输的技术。它可以有效地避免因为网络不稳定、服务器故障、用户操作等原因导致的传输失败&#xff0c;节省了用户的时间和流量&#xff0c;提高了传输的效率和可靠性。断点续传在很多场景中都有广泛的应用&…
阅读更多...
DEWDROP65 DM蓝牙5.2双模热插拔PCB

DEWDROP65 DM蓝牙5.2双模热插拔PCB

键盘使用说明索引&#xff08;均为出厂默认值&#xff09; 软件支持&#xff08;驱动的详细使用帮助&#xff09;一些常见问题解答&#xff08;FAQ&#xff09;首次使用步骤蓝牙配对规则&#xff08;重要&#xff09;蓝牙和USB切换键盘默认层默认触发层0的FN键配置的功能默认功…
阅读更多...
【Linux】Shell脚本之流程控制语句 if判断、for循环、while循环、case循环判断 + 实战详解[⭐建议收藏！！⭐]

【Linux】Shell脚本之流程控制语句 if判断、for循环、while循环、case循环判断 + 实战详解[⭐建议收藏！！⭐]

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…
阅读更多...
什么是BP反向传播算法

什么是BP反向传播算法

什么是BP反向传播算法 神经网络是个好工具&#xff0c;但就像有的刀削铁如泥&#xff0c;有的却只能拿来切豆腐。 真正决定神经网络好不好用的是神经元之间连接的权重和神经元的阈值。 如何确定这些数字&#xff0c;大部分时间我们都在使用反向传播&#xff0c;也就是常说的B…
阅读更多...
nginx 基础

nginx 基础

巩固基础&#xff0c;砥砺前行 。 只有不断重复&#xff0c;才能做到超越自己。 能坚持把简单的事情做到极致&#xff0c;也是不容易的。 nginx简易 #配置负载均衡 upstream myaaa {server localhost:8089;server localhost:8099;}server {listen 8085;server_name lo…
阅读更多...
WebRTC | SDP详解

WebRTC | SDP详解

目录 一、SDP标准规范 1. SDP结构 2. SDP内容及type类型 二、WebRTC中的SDP结构 1. 媒体信息描述 &#xff08;1&#xff09;SDP中媒体信息格式 i. “artpmap”属性 ii. “afmtp”属性 &#xff08;2&#xff09;SSRC与CNAME &#xff08;3&#xff09;举个例子 &…
阅读更多...
JVM---理解jvm之对象已死怎么判断？

JVM---理解jvm之对象已死怎么判断？

目录 引用计数算法 什么是引用 可达性分析算法&#xff08;用的最多的&#xff09; 引用计数算法 定义&#xff1a;在对象中添加一个引用计数器&#xff0c;每当有一个地方引用它时&#xff0c;计数器值就加一&#xff1b;当引用失效时&#xff0c;计数器值就减一&#xff1…
阅读更多...
七夕送礼送什么？数码爱好者送什么礼物？这几件贴心实用又有心意

七夕送礼送什么？数码爱好者送什么礼物？这几件贴心实用又有心意

​在这个数字化的时代&#xff0c;数码产品成为了我们日常生活中必不可少的一部分。而在七夕这个特别的日子里&#xff0c;送上一份数码产品礼物&#xff0c;不仅可以让你的另一半感受到你的用心和关爱&#xff0c;还可以让他/她感受到科技带来的便捷和乐趣。 推荐一&#xff…
阅读更多...
贝锐蒲公英：助力企业打造稳定高效的智能安防监控网络

贝锐蒲公英：助力企业打造稳定高效的智能安防监控网络

随着技术的快速发展和物联网的普及&#xff0c;企业面临着许多安全威胁和风险&#xff0c;如盗窃、入侵、信息泄露等&#xff0c;企业需要建立安防监控系统来保护其资产、员工和业务运营的安全。 然而&#xff0c;企业在搭建安防监控系统的过程中&#xff0c;可能会面临一些难…
阅读更多...
无涯教程-Perl - setnetent函数

无涯教程-Perl - setnetent函数

描述 该函数应在第一次调用getnetent之前调用。 STAYOPEN参数是可选的,在大多数系统上未使用。当getnetent()从网络数据库的下一行检索信息时,setnetent会将枚举设置(或重置)为主机条目集的开头。 语法 以下是此函数的简单语法- setnetent STAYOPEN返回值 此函数不返回任何…
阅读更多...
smardaten实战丨谁说无代码不能开发出漂亮的门户首页？

smardaten实战丨谁说无代码不能开发出漂亮的门户首页？

一、需求背景 门户首页对于一个公司或组织来说是一个极其重要的网站页面&#xff0c;它可以作为访问者了解和获取相关信息的入口&#xff0c;同时也是展示品牌形象和吸引目标受众的重要工具。 开发一个门户首页需要开发团队在向访问者展示关于公司或组织基本信息的基础上&…
阅读更多...
CentOS7最小化安装使用KVM虚拟化

CentOS7最小化安装使用KVM虚拟化

说明&#xff1a;本文初衷在于记录一次实战经验&#xff0c;以便后续参考&#xff0c;不具有任何权威作用&#xff0c;如若对你有帮助深感荣幸&#xff01; 一、环境安装 CentOS Linux release 7.9.2009 (Core)【不带GUI】Xshell 6Xmanager 6 # 执行 export DISPLAY客户端机器…
阅读更多...
onnx onnxruntime onnxruntime-gpu

onnx onnxruntime onnxruntime-gpu

一、onnx简介 在训练模型时可以使用很多不同的框架&#xff0c;比如 Pytorch&#xff0c; TensorFLow&#xff0c; MXNet&#xff0c;以及深度学习最开始流行的 Caffe 等等&#xff0c;这样不同的训练框架就导致了产生不同的模型结果包&#xff0c;在模型进行部署推理时就需要不…
阅读更多...
比较不同类型的隔离接口 IC：光耦合器与数字隔离器

比较不同类型的隔离接口 IC：光耦合器与数字隔离器

隔离接口IC在确保各种电子系统中的信号完整性和安全性方面发挥着至关重要的作用。在不同类型的隔离接口IC中&#xff0c;光耦合器和数字隔离器是两种流行的选择。在本文中&#xff0c;我们将比较这两类隔离接口IC&#xff0c;探讨它们的工作原理、优点和应用。 工作原理&#x…
阅读更多...
MODIS数据的查找与下载

MODIS数据的查找与下载

记录一下自己下载 MODIS 时用过的网站。 1、LAADS DAAC 网址&#xff1a;Find Data - LAADS DAAC (nasa.gov) LAADS DAAC 的全称是 Level-1 and Atmosphere Archive & Distribution System Distributed Active Archive Center&#xff0c;专注于部分地球科学数据的集成&a…
阅读更多...
浅谈SMT行业MES系统生产管理的特点

浅谈SMT行业MES系统生产管理的特点

一、SMT生产车间在电子制造中起重要作用的部分&#xff0c;主要具备以下生产特点&#xff1a; 1.高密度和高速度&#xff1a; SMT生产车间中的电子元器件一般来说较为精小&#xff0c;且被紧密地排列在PCB上。这就要求SMT生产车间的机械设备具备高精度和高速度&#xff0c;确保…
阅读更多...
生活中那些六 “有” 的人

生活中那些六 “有” 的人

1、有承诺 一些事情开始的时候总会有些协议与约定&#xff0c;我们称其为承诺&#xff1b;我们必须遵守承诺&#xff0c;即使是约会也要遵守&#xff0c;也不能迟到&#xff1b;迟到这件事不但会妨碍我们所有人&#xff0c;还意味着迟到者不尊重大家的时间。这种约定从某种意义…
阅读更多...
SQLSERVER 查询语句加with (NOLOCK) 报ORDER BY 报错 除非另外还指定了 TOP、OFFSET 或 FOR XML

SQLSERVER 查询语句加with (NOLOCK) 报ORDER BY 报错 除非另外还指定了 TOP、OFFSET 或 FOR XML

最近有一个项目在客户使用时发现死锁问题&#xff0c;用的数据库是SQLSERVER &#xff0c;死锁的原因是有的客户经常去点报表&#xff0c;报表查询时间又慢&#xff0c;然后又有人在做单导致了死锁&#xff0c;然后主管要我们用SQLSERVER查询时要加with (NOLOCK),但是我在加完 …
阅读更多...
ant design vue 级联选择器（省市二级联动）

ant design vue 级联选择器（省市二级联动）

一、效果图 二、代码块 <a-cascader v-model:value"value" :options"options"/>data () {return {value:,options:[{"value": "北京市","label": "北京市","children": [{"value": &qu…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023