Avalonia中如何实现文件拖拽上传

news2024/11/23 9:57:10

前言

前面我们讲了在Avalonia中如何将View事件映射到ViewModel层感兴趣的读者可以看一下,本章我们将讲一下在Avalonia框架下如何实现文件和文字的拖拽到指定区域进行处理和上传。

先看效果

在这里插入图片描述
界面设计比较简单,还是在前一张的基础上加了一个指定区域,这个区域负责接收我们拖拽上面的内容。

方案一

第一种方案是通过后台代码的方式给指定控件注册相关AddHandler方法动态注册DragDrop.DropEvent,代码如下:

        public ViewB()
        {
            InitializeComponent();
            b1.AddHandler(DragDrop.DropEvent, Drop);
        }


        private void Drop(object sender, DragEventArgs e)
        {
            Debug.WriteLine("Drop");
            if (e.Data.Contains(DataFormats.Text))
                _DropState.Text = e.Data.GetText();
            else if (e.Data.Contains(DataFormats.FileNames))
                _DropState.Text = string.Join(Environment.NewLine, e.Data.GetFileNames());
            else if(e.Data.Contains(DataFormats.Files))
                _DropState.Text = string.Join(Environment.NewLine, e.Data.GetFiles().Select(u=>u.Name));
        }

展示效果如下:
在这里插入图片描述
这种模式破坏了MVVM模式,感觉不是太完美。

方案二

通过自定义Handle处理来处理,我们通过定义FileDropHandler来统一处理拖拽上来的信息,处理方式如下:

using Avalonia.Input;
using Avalonia.Xaml.Interactions.DragAndDrop;
using AvaloniaTest.ViewModels;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace AvaloniaTest.Behaviors
{
    public class FileDropHandler: DropHandlerBase
    {
        public override void Drop(object? sender, DragEventArgs e, object? sourceContext, object? targetContext)
        {
            if (!(targetContext is ViewBViewModel))
            {
                return;
            }
            var vm = (ViewBViewModel)targetContext;
            var type = e.Data.GetType();
            var i = e.Data.GetText();
            vm.FileName = i;
            var file = e.Data.GetFiles();
            if (file == null)
            {
                return;
            }
            var names = file.Select(x => x.Name).ToList();
            vm.FileName = string.Join(Environment.NewLine, names);
            e.Data.ToString();
        }

        public override bool Execute(object? sender, DragEventArgs e, object? sourceContext, object? targetContext, object? state)
        {
            return base.Execute(sender, e, sourceContext, targetContext, state);
        }

        public override void Enter(object? sender, DragEventArgs e, object? sourceContext, object? targetContext)
        {
            base.Enter(sender, e, sourceContext, targetContext);
        }

        public override bool Validate(object? sender, DragEventArgs e, object? sourceContext, object? targetContext, object? state)
        {
            return true;
        }
    }
}

前端代码如下:

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:prism="http://prismlibrary.com/"
             xmlns:i="clr-namespace:Avalonia.Xaml.Interactivity;assembly=Avalonia.Xaml.Interactivity"
             xmlns:ia="clr-namespace:Avalonia.Xaml.Interactions.Core;assembly=Avalonia.Xaml.Interactions"
              xmlns:idd="clr-namespace:Avalonia.Xaml.Interactions.DragAndDrop;assembly=Avalonia.Xaml.Interactions.DragAndDrop"
             xmlns:b="using:AvaloniaTest.Behaviors"
             prism:ViewModelLocator.AutoWireViewModel="True"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="AvaloniaTest.Views.ViewB" Background="Green">
  <i:Interaction.Behaviors>
    <ia:EventTriggerBehavior EventName="Loaded">
      <ia:InvokeCommandAction Command="{Binding OnLoad}"></ia:InvokeCommandAction>
    </ia:EventTriggerBehavior>
  </i:Interaction.Behaviors>

  <UserControl.Styles>
    <Style Selector="Border.FileDragAndDrop1">
      <Style.Resources>
        <b:FileDropHandler x:Key="FileDropHandler" />
      </Style.Resources>
      <Setter Property="(i:Interaction.Behaviors)">
        <i:BehaviorCollectionTemplate>
          <i:BehaviorCollection>
            <idd:ContextDropBehavior Handler="{StaticResource FileDropHandler}" />
          </i:BehaviorCollection>
        </i:BehaviorCollectionTemplate>
      </Setter>
    </Style>
  </UserControl.Styles>
  
  <StackPanel>
    <TextBlock Text="{Binding Title}"></TextBlock>
    <Border BorderThickness="1" BorderBrush="White" Width="100" Height="100" DragDrop.AllowDrop="True" CornerRadius="20"  Classes="FileDragAndDrop" Cursor="DragMove" Name="b1">
      <Grid>
        <TextBlock Text="Drag" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="20"></TextBlock>
      </Grid>
    </Border>
    <TextBlock x:Name="_DropState"></TextBlock>
    <TextBlock Text="{Binding FileName}"></TextBlock>
  </StackPanel>

</UserControl>

ViewModel代码如下:

using Avalonia.Input;
using Prism.Commands;
using Prism.Regions;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace AvaloniaTest.ViewModels
{
    public class ViewBViewModel : ViewModelBase, INavigationAware
    {
        private string _title = "ViewB";

        public string Title
        {
            get => _title;
            set
            {
                SetProperty(ref _title, value);
            }
        }


        private string _FileName;
        public string FileName
        {
            get => _FileName;
            set
            {
                SetProperty(ref _FileName, value);
            }
        }

        public bool IsNavigationTarget(NavigationContext navigationContext)
        {
            return true;
        }

        public void OnNavigatedFrom(NavigationContext navigationContext)
        {
        }

        public void OnNavigatedTo(NavigationContext navigationContext)
        {
        }

        private DelegateCommand _onLoad;
        public DelegateCommand OnLoad => _onLoad ?? (_onLoad=new DelegateCommand(() => {
            Debug.WriteLine("OnLoad is run!");
        }));

        public void Grid_Click(object sender, object e)
        {
            try
            {
                Debug.WriteLine("click触发");
            }
            catch (System.Exception)
            {
            }
        }

        public void FilesDataGrid_Drop(object sender, DragEventArgs e)
        {
            Debug.WriteLine(e.ToString());
        }
    }
}

看运行效果一样:
在这里插入图片描述

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

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

相关文章

十六、FreeRTOS之FreeRTOS队列集

本节需要掌握以下内容&#xff1a; 1&#xff0c;队列集简介&#xff08;了解&#xff09; 2&#xff0c;队列集相关API函数介绍&#xff08;熟悉&#xff09; 3&#xff0c;队列集操作实验&#xff08;掌握&#xff09; 一、队列集简介&#xff08;了解&#xff09; 一个…

就一个css的bug,害我找了大半天儿

大家好&#xff0c;我是风筝 事情是这样子的&#xff0c;我前两天用 Hugo 搭了一个个人网站&#xff0c;我添加了几个菜单&#xff0c;其中有一个菜单是「可爱的 Java」。 但是&#xff0c;当网站跑起来之后&#xff0c;发现「可爱的 Java」在菜单栏并不是原样输出的&#xf…

推荐一个FL Studio最适配的midi键盘?

Hello大家好&#xff01;好消息&#xff01;好消息&#xff01;特大好消息&#xff01; 水果党们&#xff01;终于有属于自己的专用MIDI键盘啦&#xff01; 万众期待的Novation FLKEY系列 正式出炉&#xff01; 做编曲和音乐制作的朋友们&#xff0c;对水果软件FLSTUDIO应该…

2.vue学习笔记(目录结构+模板语法+属性绑定)

1.目录结构 1.vscode ——VSCode工具的配置文件夹 2.node_modules ——Vue项目的运行依赖文件夹 3.public ——资源文件夹&#xff08;浏览器图标&#xff09; 4.src ——源码文件夹 5..gitgnore ——git忽略文件 6.index.html ——如果html文件 7.package.json —…

【Unity动画】Unity 2D动画创建流程

本文以2D为案例&#xff0c;讲解Unity 播放动画的流程 准备和导入2D动画资源 外部导入序列帧生成的 Unity内部制作的 外部导入的3D动画 2.创建动画过程 打开时间轴Ctrl6 选中场景中的一个未来需要播放动画的物体 回到时间轴点击Create一个新动画片段 拖动2D动画资源放入…

class059 建图、链式前向星、拓扑排序【算法】

class059 建图、链式前向星、拓扑排序【算法】 code1 建图 package class059;import java.util.ArrayList; import java.util.Arrays;public class Code01_CreateGraph {// 点的最大数量public static int MAXN 11;// 边的最大数量// 只有链式前向星方式建图需要这个数量// 注…

选择最适合你的接口测试工具:SoapUI、JMeter、Postman!

在软件开发的过程中&#xff0c;接口测试是确保系统正常运行的关键环节。为了有效地执行接口测试&#xff0c;选择适当的工具至关重要。在这篇文章中&#xff0c;我们将比较分析三种常见的接口测试工具&#xff1a;SoapUI、JMeter和Postman&#xff0c;以帮助你了解它们的优势和…

MVSNeRF:多视图立体视觉的快速推广辐射场重建(2021年)

MVSNeRF&#xff1a;多视图立体视觉的快速推广辐射场重建&#xff08;2021年&#xff09; 摘要1 引言2 相关工作3 MVSNeRF实现方法3.1 构建代价体3.2 辐射场的重建3.3 体渲染和端到端训练 3.4 优化神经编码体 Anpei Chen and Zexiang Xu and Fuqiang Zhao et al. MVSNeRF: Fast…

Leetcode 92 反转链表II

反转链表II 题解1 一遍遍历&#xff08;穿针引线&#xff09; 给你单链表的头指针 head 和两个整数 left 和 right &#xff0c;其中 left < right 。请你反转从位置 left 到位置 right 的链表节点&#xff0c;返回 反转后的链表 。 提示&#xff1a; 链表中节点数目…

JVM 类的加载器的基本特征和作用

Java全能学习面试指南&#xff1a;https://javaxiaobear.cn 1、作用 类加载器是 JVM 执行类加载机制的前提 ClassLoader的作用&#xff1a; ClassLoader是Java的核心组件&#xff0c;所有的Class都是由ClassLoader进行加载的&#xff0c;ClassLoader负责通过各种方式将Class信…

汽车软件大时代,如何提升软件工程创新力?

当前&#xff0c;传统汽车产业正加速数字化转型&#xff0c;“软件定义汽车”不断深化。在电动化、智能化和网联化趋势下&#xff0c;汽车软件已经成为汽车技术革新和发展的核心驱动力之一。根据亿欧智库发布的《2023中国智能电动汽车车载软件市场分析报告》&#xff0c;2022年…

<蓝桥杯软件赛>零基础备赛20周--第9周--前缀和与差分

报名明年4月蓝桥杯软件赛的同学们&#xff0c;如果你是大一零基础&#xff0c;目前懵懂中&#xff0c;不知该怎么办&#xff0c;可以看看本博客系列&#xff1a;备赛20周合集 20周的完整安排请点击&#xff1a;20周计划 每周发1个博客&#xff0c;共20周&#xff08;读者可以按…

Docker-compose容器编排与容器监控

一、Docker-compose 1、概念&#xff1a; Docker-Compose 是 Docker 官方的开源项目&#xff0c;负责实现对Docker容器集群的快速编排。 2、作用&#xff1a; Docker-Compose可以管理多个Docker容器组成一个应用。需要定义一个yaml格式的配置文件 docker-compose.yml&#…

2023-12-06 LeetCode每日一题(最小化旅行的价格总和)

2023-12-06每日一题 一、题目编号 2646. 最小化旅行的价格总和二、题目链接 点击跳转到题目位置 三、题目描述 现有一棵无向、无根的树&#xff0c;树中有 n 个节点&#xff0c;按从 0 到 n - 1 编号。给你一个整数 n 和一个长度为 n - 1 的二维整数数组 edges &#xff0…

maven-assembly-plugin 自定义打包

我想把input文件夹给打包进去 pom文件 <build><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-assembly-plugin</artifactId><executions><execution><!-- 配置执行器 --><i…

Dockerfile介绍

1. DockerFile介绍 dockerfile是用来构建docker镜像的文件&#xff01;命令参数脚本&#xff01; 构建步骤&#xff1a; 1、编写一个dockerfile文件 2、docker build 构建成为一个镜像 3、docker run运行镜像 4、docker push发布镜像&#xff08;DockerHub、阿里云镜像仓库…

『亚马逊云科技产品测评』活动征文|AWS云服务器EC2实例实现ByConity快速部署

授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 Developer Centre, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道 前言 亚马逊是全球最大的在线零售商和云计算服务提供商。AWS云服务器在…

5G入门到精通 - 5G的十大关键技术

文章目录 一、网络切片二、自组织网络三、D2D技术四、低时延技术五、MIMO技术六、毫米波七、内容分发网络八、M2M技术九、频谱共享十、信息中心网络 一、网络切片 5G中的网络切片是一项关键技术&#xff0c;它允许将整个5G网络分割成多个独立的虚拟网络&#xff0c;每个虚拟网络…

一维相位解包裹

一维相位解包裹 本文首先介绍最简单的一维的位相解包裹算法。设W是包裹运算符&#xff0c;中是解包裹位相&#xff0c;是包裹的位相。则一维位相解包裹可表示为&#xff1a; 解包裹就是要选取正确的k,满足&#xff1a; 两个相邻像素位相的差值如下&#xff1a; 由式(2-1)和式(2…