[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.mfbz.cn/a/75079.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

mac arm 通过brew搭建 php+nginx+mysql+xdebug

mac arm 通过brew搭建 php+nginx+mysql+xdebug

1.安装nginx brew install nginx //安装brew services start nginx //启动2.安装php brew install php7.4 //安装export PATH"/opt/homebrew/opt/php7.4/bin:$PATH" //加入环境变量 export PATH"/opt/homebrew/opt/php7.4/sbin:$PATH"brew serv…
阅读更多...
fiddler抓包工具的用法以及抓取手机报文定位bug

fiddler抓包工具的用法以及抓取手机报文定位bug

前言&#xff1a; fiddler抓包工具是日常测试中常用的一种bug定位工具 一 抓取https报文步骤 使用方法&#xff1a; 1 首先打开fiddler工具将证书导出 点击TOOLS------Options------Https-----Actions---选中第二个选项 2 把证书导出到桌面后 打开谷歌浏览器 设置---高级…
阅读更多...
ROS2 学习（二）工作空间，节点

ROS2 学习（二）工作空间，节点

工作空间介绍 workspace 是存放整个项目的大目录。 其中包含&#xff1a; src&#xff1a;源码。 build&#xff1a;编译文件。 install&#xff1a;安装空间&#xff0c;存放编译成功后的目标文件。 log&#xff1a;日志。 我们新建一个工作空间目录&#xff0c;其中包…
阅读更多...
转行软件测试四个月学习，第一次面试经过分享

转行软件测试四个月学习，第一次面试经过分享

我是去年上半年从销售行业转行到测试的&#xff0c;从销售公司辞职之后选择去培训班培训软件测试&#xff0c;经历了四个月左右的培训&#xff0c;在培训班结课前两周就开始投简历了&#xff0c;在结课的时候顺利拿到了offer。在新的公司从事软件测试工作已经将近半年有余&…
阅读更多...
python3 0基础学习笔记

python3 0基础学习笔记

0基础学习笔记&#xff0c;临时有事暂停后边会继续学习 基础内容1. 条件语句 if - elif - else2. 错误铺捉try - except(一种保险策略&#xff09;3. 四种开发模式4. 函数&#xff1a;def用来定义函数的5. 最大值最小值函数&#xff0c;max &#xff0c;min6. is 严格的相等&am…
阅读更多...
EXCEL按列查找，最终返回该列所需查询序列所对应的值，VLOOKUP函数

EXCEL按列查找，最终返回该列所需查询序列所对应的值，VLOOKUP函数

EXCEL按列查找&#xff0c;最终返回该列所需查询序列所对应的值 示例&#xff1a;国标行业分类汉字&#xff0c;匹配id 使用VLOOKUP函数 第一参数&#xff1a;拿去查询的值。 第二参数&#xff1a;匹配的数据。 Ps&#xff1a;Sheet1!$C 21 : 21: 21:E 117 &#xff0c;需要…
阅读更多...
Idea 快捷键整理

Idea 快捷键整理

Idea快捷键和自动代码补全汇总 idea快捷键汇总 Ctrl 快捷键说明Ctrl F在当前文件进行文本查找 &#xff08;必备&#xff09;Ctrl R在当前文件进行文本替换 &#xff08;必备&#xff09;Ctrl Z撤销 &#xff08;必备&#xff09;Ctrl Y删除光标所在行 或 删除选中的行 &am…
阅读更多...
MySQL缓存策略

MySQL缓存策略

文章目录 一、MySQL缓存方案的作用二、提高MySQL访问性能的方式2.1 读写分离2.1.1 是什么&#xff1f;2.1.2 解决了什么&#xff1f;2.1.3 原理是什么&#xff1f; 2.2 连接池2.1.1 是什么&#xff1f;2.1.2 解决了什么&#xff1f;2.1.3 原理是什么&#xff1f; 2.3 异步连接2…
阅读更多...
数据通信——VRRP

数据通信——VRRP

引言 之前把实验做了&#xff0c;结果发现我好像没有写过VRRP的文章&#xff0c;连笔记都没记过。可能是因为对STP的记忆&#xff0c;导致现在都没忘太多。 一&#xff0c;什么是VRRP VRRP全名是虚拟路由冗余协议&#xff0c;虚拟路由&#xff0c;看名字就知道这是运行在三层接…
阅读更多...
js 变量 作用域

js 变量 作用域

js 变量 作用域
阅读更多...
谷粒商城第十一天-品牌管理中关联分类

谷粒商城第十一天-品牌管理中关联分类

目录 一、总述 二、前端部分 1. 调整查询调用 2. 关联分类 三、后端部分 四、总结 一、总述 之前是在商品的分类管理中直接使用的若依的逆向代码 有下面的几个问题&#xff1a; 1. 表格上面的参数填写之后&#xff0c;都是按照完全匹配进行搜索&#xff0c;没有模糊匹配…
阅读更多...
图像像素梯度

图像像素梯度

梯度 在高数中&#xff0c;梯度是一个向量&#xff0c;是有方向有大小。假设一二元函数f(x,y)&#xff0c;在某点的梯度有&#xff1a; 结果为&#xff1a; 即方向导数。梯度的方向是函数变化最快的方向&#xff0c;沿着梯度的方向容易找到最大值。 图像梯度 在一幅模糊图…
阅读更多...
CDH6.3.2搭建HIVE ON TEZ

CDH6.3.2搭建HIVE ON TEZ

参考 https://blog.csdn.net/ly8951677/article/details/124152987 ----配置hive运行引擎 在/etc/hive/conf/hive-site.xml中修改如下&#xff1a; hive.execution.engine mr–>tez hive.execution.engine 设为tez或者运行代码的时候&#xff1a; set hive.execution.eng…
阅读更多...
无涯教程-Perl - setsockopt函数

无涯教程-Perl - setsockopt函数

描述 此函数将SocketoptionsOPTNAME的值设置为SOCKET上指定级别的OPTVAL值。您需要导入Socket模块,以获取Tabl中显示的OPTNAME的有效值 语法 以下是此函数的简单语法- setsockopt SOCKET, LEVEL, OPTNAME, OPTVAL返回值 如果失败,此函数返回undef&#xff1b;如果成功,则返…
阅读更多...
私有IP地址有多重要？

私有IP地址有多重要？

私有IP地址是指在局域网中使用的IP地址&#xff0c;而不是公共互联网上可访问的IP地址。私有IP地址不唯一&#xff0c;可以在不同的局域网中重复使用。这种地址分配方式能够有效地节省IP地址资源。 近日&#xff0c;国际互联网协会&#xff08;IATA&#xff09;发布了一项关于私…
阅读更多...
Linux Day07

Linux Day07

一、僵死进程 1.1僵死进程产生的原因 子进程先于父进程结束, 而父进程没有获取子进程退出码&#xff0c;释放子进程占用的资源&#xff0c;此时子进程将成为一个僵死进程。 在第一个框这里时父进程子进程都没有结束&#xff0c;显示其pid 父进程是2349&#xff0c;子进程是235…
阅读更多...
小红书运营 变现方法总结（精）

小红书运营 变现方法总结（精）

大家好&#xff0c;我是网媒智星&#xff0c;今天跟大家分享一下小红书运营方面的知识&#xff0c;怎样利用小红书变现&#xff1f;全篇倾情干货输出&#xff0c;认真学习&#xff0c;保证您收获多多。 首先&#xff0c;让我们来分析一下小红书平台的优势。关于卖东西&#xff…
阅读更多...
SOLIDWORKS PDM—文件版本的管控

SOLIDWORKS PDM—文件版本的管控

SOLIDWORKS产品数据管理 (PDM) 解决方案可帮助您控制设计数据&#xff0c;并且从本质上改进您的团队就产品开发进行管理和协作的方式。使用 SOLIDWORKS PDM Professional&#xff0c;您的团队能够&#xff1a;1. 安全地存储和索引设计数据以实现快速检索&#xff1b;2. 打消关于…
阅读更多...
解决macOS执行fastboot找不到设备的问题

解决macOS执行fastboot找不到设备的问题

背景 最近准备给我的备用机Redmi Note 11 5G刷个类原生的三方ROM&#xff0c;MIUI实在是用腻了。搜罗了一番&#xff0c;在XDA上找到了一个基于Pixel Experience开发的ROM&#xff1a;PixelExperience Plus for Redmi Note 11T/11S 5G/11 5G/POCO M4 Pro 5G (everpal)&#xf…
阅读更多...
Python爬虫IP代理池的建立和使用

Python爬虫IP代理池的建立和使用

写在前面 建立Python爬虫IP代理池可以提高爬虫的稳定性和效率&#xff0c;可以有效避免IP被封锁或限制访问等问题。 下面是建立Python爬虫IP代理池的详细步骤和代码实现&#xff1a; 1. 获取代理IP 我们可以从一些代理IP网站上获取免费或付费的代理IP&#xff0c;或者自己租…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站