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

前言

前面我们讲了在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());
        }
    }
}