【问题标题】:Xamarin form pangesture drag and drop flickeringXamarin 表单手势拖放闪烁
【发布时间】:2019-12-10 13:24:44
【问题描述】:

我想要创建一个可以在屏幕上拖动的框,所以我创建了一个扩展 Frame 的类(但它也可以是 AbsoluteLayout,而不是 BoxView,因为我需要编写那个盒子里的东西)。

类拖动框

using System;
using System.Diagnostics;
using Xamarin.Forms;

namespace PanGesture
{
    public class DragBox : Frame
    {
        public DragBox()
        {
            var panGesture = new PanGestureRecognizer();
            this.GestureRecognizers.Add(panGesture);
            panGesture.PanUpdated += OnPanUpdated;
            BorderColor = Color.Blue;
            Padding = 4;
            BackgroundColor = Color.Green;
            Content = new Label
            {
                Text = "Word",
            };
        }

        private void OnPanUpdated(object sender, PanUpdatedEventArgs e)
        {
            switch (e.StatusType)
            {
                case GestureStatus.Started:
                    Debug.WriteLine("DEBUG: start dragging");
                    break;
                case GestureStatus.Running:
                    this.TranslationX = e.TotalX;
                    this.TranslationY = e.TotalY;
                    break;
                case GestureStatus.Completed:
                    Debug.WriteLine("DEBUG: drag ended");
                    break;
            }
        }
    }
}

在主页中我只是创建了一个 DragBox 的实例 (容器是对主页上AbsoluteLayout的引用

public partial class HomePage : ContentPage
{
    public HomePage ()
    {
       InitializeComponent ();
       DragBox box = new DragBox();
       AbsoluteLayout.SetLayoutBounds(box, new Rectangle(0.1, 0.1, 0.2, 0.2));
       AbsoluteLayout.SetLayoutFlags(box, AbsoluteLayoutFlags.All);
       container.Children.Add(box);
    }
}

问题是,当我开始拖动框时,它具有闪烁的效果,如下图所示。 如何解决?或者有没有其他方法可以创建可拖动元素?

【问题讨论】:

  • 你试过真机吗?这可能只是一个模拟器。
  • @AndresCastro 是的,它做同样的事情

标签: xamarin.forms drag-and-drop frame draggable uipangesturerecognizer


【解决方案1】:

我使用你的代码,但我没有和你一样的问题,所以我建议你可以在 OnPanUpdated 事件中尝试以下代码。

private double  _xOffset, _yOffset;

 private void OnPanUpdated(object sender, PanUpdatedEventArgs e)
    {
        switch (e.StatusType)
        {
            case GestureStatus.Started:
                
                Debug.WriteLine("DEBUG: start dragging");
                break;
            case GestureStatus.Running:

               
                this.TranslationX = _xOffset + e.TotalX;
                this.TranslationY = _yOffset + e.TotalY;
               
                break;
            case GestureStatus.Completed:

                _xOffset = this.TranslationX;

                _yOffset = this.TranslationY;
               

                Debug.WriteLine("DEBUG: drag ended");
                break;
        }
    }

更新:

我认为您可能在 PanContainer 中遇到了一些问题,请修改您的代码如下:

public class PanContainer : ContentView
{
   
    private double x, y;
    public PanContainer()
    {
        var panGesture = new PanGestureRecognizer();
        
        panGesture.PanUpdated += OnPanUpdated;
        this.GestureRecognizers.Add(panGesture);                          
    }

    private void OnPanUpdated(object sender, PanUpdatedEventArgs e)
    {
        switch (e.StatusType)
        {
            case GestureStatus.Started:
                
                Debug.WriteLine("DEBUG: start dragging");
                break;
            case GestureStatus.Running:
                
                Content.TranslationX = x + e.TotalX;
                Content.TranslationY = y + e.TotalY;

                break;
            case GestureStatus.Completed:
            
                x = Content.TranslationX;
                y = Content.TranslationY;

                Debug.WriteLine("DEBUG: drag ended");
                break;
        }
    }
}

然后是 ContentPage.cs:

 public partial class Page1 : ContentPage
{
    public Page1()
    {
        InitializeComponent();
        Label label = new Label() { Text = "Hello world" ,BackgroundColor=Color.Green, WidthRequest=100,HeightRequest=150};
        PanContainer box = new PanContainer();
        box.Content = label;
       
        container.Children.Add(box);
    }
}   

PanContainer 不能拖放,只能移动 PanContainer 的内容,如下所示:

【讨论】:

  • 不一样的效果:(
  • @Poli97,请看我的更新,如果我的回复对你有帮助,请记得将我的回复标记为答案,谢谢。
  • 好的,谢谢,现在拖动工作正常,但还有一件事,当我释放拖动时,要再次拖动它,我必须按下框的原始起始位置,如果我按下我放下它的位置它不动,好像他的“框架”不动,如何解决?
  • @Poli97,我这边也有同样的效果,我好像Content.x和Content.Y没有原来的位置了,可以打印Console.WriteLine("x = " +Content.X + "y = " + Content.Y);看看,但是我尝试更改 content.x,但似乎无法更改。
  • 嗯,好的,那么如何在 Xamarin Forms 应用程序中改进正确的拖放功能?你知道任何其他正确的方法吗?无论如何,我将您的回复标记为答案,因为您解决了我的第一个问题,所以无论如何感谢您的时间,但是如果您知道有关在 Xamarin 表单中正确执行拖放的其他信息,请告诉我,我真的需要它我的大学论文。谢谢!
【解决方案2】:

不要使用 TranslateX 和 TranslateY,而是使用 LayoutTo 方法,如下所示。

private void OnPanUpdated(object sender, PanUpdatedEventArgs e)
{
   switch (e.StatusType)
   {
      case GestureStatus.Started:
          break;
      case GestureStatus.Running:
          var newRectangle = new Rectangle(e.TotalX, e.TotalY, this.Bounds.Width, this.Bounds.Height);
          this.LayoutTo(newRectangle, easing: Easing.Linear);
          break;
      case GestureStatus.Completed:
         break;
    }
}

现在没有闪烁了。

【讨论】:

  • 闪烁消失了,但现在动画像延迟一样,与我手指的运动不连贯
猜你喜欢
  • 1970-01-01
  • 2023-03-25
  • 2020-11-26
  • 2017-01-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-02-07
  • 1970-01-01
相关资源
最近更新 更多