How can I implement drag and drop sorting in iOS?

[kyuranger]

As shown in the animation above, I'm not sure if Avalonia has native controls to achieve this?
If Avalonia doesn't have native controls to achieve this, can anyone give me a rough idea of ​​how to achieve this? I have no idea at all.

[kyuranger]

I tried to write a Templated Control for this. But unfortuneally, this way only works in UI but not ViewModel. I cannot find a way to move item in ViewModel.

<ControlTheme x:Key="{x:Type controls:SItemsControlDragReorderThumb}" TargetType="controls:SItemsControlDragReorderThumb">	  
  <Setter Property="Template">
    <ControlTemplate>
  <ContentPresenter Content="{TemplateBinding Content}"></ContentPresenter>
    </ControlTemplate>
  </Setter>
</ControlTheme>

public class SItemsControlDragReorderThumb : Thumb
{
    public static readonly StyledProperty<object?> ContentProperty =
AvaloniaProperty.Register<SItemsControlDragReorderThumb, object?>(nameof(Content));
    [Content]
    public object? Content
    {
        get { return GetValue(ContentProperty); }
        set { SetValue(ContentProperty, value); }
    }
    public SItemsControlDragReorderThumb()
    {
        this.DragStarted += (sender, e) =>
        {
            if (_PART_ContentPresenter is not { })
            {
                var _pART_ContentPresenter = FindContentPresenter(this);
                if (_pART_ContentPresenter is { })
                {
                    _PART_ContentPresenter = _pART_ContentPresenter;
                    _PART_ContentPresenter.Opacity = 0.5;
                    if (_PART_ContentPresenter.RenderTransform is not TranslateTransform)
                    {
                        _PART_ContentPresenter.RenderTransform = new TranslateTransform(0, 0);
                    }
                    var _pART_ItemsControl = FindItemsControl(_PART_ContentPresenter);
                    if (_pART_ItemsControl is { })
                    {
                        _PART_ItemsControl = _pART_ItemsControl;
                        _PART_ItemsPanelRoot = _pART_ItemsControl.ItemsPanelRoot;
                    }
                }
            }
            else
            {
                _PART_ContentPresenter.Opacity = 0.5;
            }
            RefreshElementDetail();
            _IndexBeforeDrag = _Index;
            Debug.WriteLine("Drag Start,Index is " + _Index);
        };
        this.DragCompleted += (sender, e) =>
        {
            if (_PART_ContentPresenter is { })
            {
                _PART_ContentPresenter.Opacity = 1;
                if (_PART_ContentPresenter.RenderTransform is TranslateTransform _translateTransform)
                {
                    _translateTransform.Y = 0;
                }
                else
                {
                    _PART_ContentPresenter.RenderTransform = new TranslateTransform(0, 0);
                }
            }            
            Debug.WriteLine("Drag Complete");
        };
        this.DragDelta += (sender, e) =>
        {
            if (_PART_ContentPresenter is { })
            {
                if (_PART_ContentPresenter.RenderTransform is TranslateTransform _translateTransform)
                {

                    if (_Index != 0 && _translateTransform.Y <= 0 && _PART_ItemsPanelRoot is { })
                    {
                        _translateTransform.Y = e.Vector.Y + _translateTransform.Y;
                        if (_PART_Previous_ContentPresenter is { } && _PART_ContentPresenter is { } && Math.Abs(_translateTransform.Y) > (_PART_Previous_ContentPresenter.Bounds.Height / 2 + _PART_ContentPresenter.Bounds.Height / 2))
                        {
                            _PART_ItemsPanelRoot.Children.Move(_Index, _Index - 1);
                            RefreshElementDetail();
                            _translateTransform.Y = 0;
                        }
                    }
                    else if (_PART_ItemsPanelRoot is { } && _Index != _PART_ItemsPanelRoot.Children.Count - 1 && _translateTransform.Y >= 0)
                    {
                        _translateTransform.Y = e.Vector.Y + _translateTransform.Y;
                        if (_PART_Next_ContentPresenter is { } && _PART_ContentPresenter is { } && Math.Abs(_translateTransform.Y) > (_PART_Next_ContentPresenter.Bounds.Height / 2 + _PART_ContentPresenter.Bounds.Height / 2))
                        {
                            _PART_ItemsPanelRoot.Children.Move(_Index, _Index + 1);
                            RefreshElementDetail();
                            _translateTransform.Y = 0;
                        }
                    }
                }
                Debug.WriteLine(e.Vector.Y);
            }
        };

    }
    private void RefreshElementDetail()
    {
        if (_PART_ItemsPanelRoot is { } && _PART_ContentPresenter is { })
        {
            _Index = _PART_ItemsPanelRoot.Children.IndexOf(_PART_ContentPresenter);
            if (_Index != 0 && _PART_ItemsPanelRoot.Children[_Index - 1] is ContentPresenter _pART_Previous_ContentPresenter)
            {
                _PART_Previous_ContentPresenter = _pART_Previous_ContentPresenter;
            }
            if (_Index != _PART_ItemsPanelRoot.Children.Count - 1 && _PART_ItemsPanelRoot.Children[_Index + 1] is ContentPresenter _pART_Next_ContentPresenter)
            {
                _PART_Next_ContentPresenter = _pART_Next_ContentPresenter;
            }
            Debug.WriteLine("Index is " + _Index);
        }
    }
    private ContentPresenter? FindContentPresenter(StyledElement styledElement)
    {
        if (styledElement.Parent is { })
        {
            if (styledElement.Parent is ContentPresenter _contentPresenter)
            {
                return _contentPresenter;
            }
            else
            {
                return FindContentPresenter(styledElement.Parent);
            }
        }
        return null;
    }
    private ItemsControl? FindItemsControl(StyledElement styledElement)
    {
        if (styledElement.Parent is { })
        {
            if (styledElement.Parent is ItemsControl _itemsControl)
            {
                return _itemsControl;
            }
            else
            {
                return FindItemsControl(styledElement.Parent);
            }
        }
        return null;
    }
    ContentPresenter? _PART_ContentPresenter;
    ContentPresenter? _PART_Previous_ContentPresenter;
    ContentPresenter? _PART_Next_ContentPresenter;
    ItemsControl? _PART_ItemsControl;
    Panel? _PART_ItemsPanelRoot;
    int _Index = -1;
    int _IndexBeforeDrag = -1;
}

Here is the code to test it:

<ItemsControl ItemsSource="{Binding TestOC}">
	<ItemsControl.ItemTemplate>
		<DataTemplate x:DataType="System:String">
			<Border Background="Red" Margin="0,0,0,20">
				<Grid ColumnDefinitions="auto,*,auto">
					<TextBlock Text="{Binding }"></TextBlock>
					<Local:SItemsControlDragReorderThumb Grid.Column="2">
						<Border Background="Green" Height="20" Width="20">
							
						</Border>
					</Local:SItemsControlDragReorderThumb>
				</Grid>
			</Border>
		</DataTemplate>
	</ItemsControl.ItemTemplate>
	<ItemsControl.ItemsPanel>
		<ItemsPanelTemplate>
			<StackPanel/>
		</ItemsPanelTemplate>
	</ItemsControl.ItemsPanel>
</ItemsControl>

It turns out to be like this:

Hopefully someone can help me perfect the issue of not being able to change the ViewModel.

[timunie]

Take a look at Avalonia.Xaml.Beahviors, especially the samples in that repo. Very useful imo.

[kyuranger]

I have read its source code, and it is indeed similar to my needs, but there is a problem. In the example of Avalonia.Xaml.Beahviors, if the control I drag does not need to move in real time, it is feasible to use its way. But what I need is the real-time movement of the dragged control. If this way is used, changing the position of the control will cause the drag to be lost, and it is impossible to drag across multiple controls (it seems that changing the position of the control will recreate a control that cause it lost).

[kyuranger]

Now I found a stupid way by using a delegate to it:

    public delegate void SItemsControlDragReorderThumbMoveItemDelegate(int oldIndex,int newIndex);

    public static readonly StyledProperty<SItemsControlDragReorderThumbMoveItemDelegate?> SItemsControlDragReorderThumbMoveItemProperty =
AvaloniaProperty.Register<SItemsControlDragReorderThumb, SItemsControlDragReorderThumbMoveItemDelegate?>(nameof(SItemsControlDragReorderThumbMoveItem));    
    public SItemsControlDragReorderThumbMoveItemDelegate? SItemsControlDragReorderThumbMoveItem
    {
        get { return GetValue(SItemsControlDragReorderThumbMoveItemProperty); }
        set { SetValue(SItemsControlDragReorderThumbMoveItemProperty, value); }
    }

Everytime it drag completed, then invoke the delegate in ViewModel.

MoveItem = (_oldIndex, _newIndex) => {
    TestOC.Move(_oldIndex, _newIndex);
    TestOC = new ObservableCollection<string>(TestOC.ToList());
}; 

Although this way is feasible, its disadvantage is obvious. That is, after each dragging, the ObservableCollection must be recreated (otherwise the content will be repeated, the reason is not clear to me).

[kyuranger]

I made some improvements, now I don't need to recreate the ObservableCollection every time. Here is my full source code:

public class SItemsControlDragReorderThumb : Thumb
{
    public static readonly StyledProperty<object?> ContentProperty =
AvaloniaProperty.Register<SItemsControlDragReorderThumb, object?>(nameof(Content));
    [Content]
    public object? Content
    {
        get { return GetValue(ContentProperty); }
        set { SetValue(ContentProperty, value); }
    }
    public SItemsControlDragReorderThumb()
    {
        this.DragStarted += (sender, e) =>
        {
            if (_PART_ContentPresenter is not { })
            {
                var _pART_ContentPresenter = FindContentPresenter(this);
                if (_pART_ContentPresenter is { })
                {
                    _PART_ContentPresenter = _pART_ContentPresenter;
                    _PART_ContentPresenter.Opacity = 0.5;
                    if (_PART_ContentPresenter.RenderTransform is not TranslateTransform)
                    {
                        _PART_ContentPresenter.RenderTransform = new TranslateTransform(0, 0);
                    }
                    var _pART_ItemsControl = FindItemsControl(_PART_ContentPresenter);
                    if (_pART_ItemsControl is { })
                    {
                        _PART_ItemsControl = _pART_ItemsControl;
                        _PART_ItemsPanelRoot = _pART_ItemsControl.ItemsPanelRoot;
                    }
                }
            }
            else
            {
                _PART_ContentPresenter.Opacity = 0.5;
            }
            RefreshElementDetail();
            _DragStartedIndex = _Index;            
        };
        this.DragCompleted += (sender, e) =>
        {
            if (_PART_ContentPresenter is { })
            {
                _PART_ContentPresenter.Opacity = 1;
                if (_PART_ContentPresenter.RenderTransform is TranslateTransform _translateTransform)
                {
                    _translateTransform.Y = 0;
                }
                else
                {
                    _PART_ContentPresenter.RenderTransform = new TranslateTransform(0, 0);
                }
            }
            if (_PART_ItemsPanelRoot is { })
            {
                var _oldItem = _PART_ItemsPanelRoot.Children[_DragStartedIndex];
                if (_oldItem is ContentPresenter _oldContentPresenter)
                {
                    var _content=_oldContentPresenter.Content;
                    SItemsControlDragReorderThumbMoveItem?.Invoke(_DragStartedIndex, _Index);
                    var _newItem = _PART_ItemsPanelRoot.Children[_DragStartedIndex];
                    if (_newItem is ContentPresenter _newContentPresenter)
                    {
                        _newContentPresenter.Content=_content;

                    }
                }                
            }            
        };
        this.DragDelta += (sender, e) =>
        {
            if (_PART_ContentPresenter is { })
            {
                if (_PART_ContentPresenter.RenderTransform is TranslateTransform _translateTransform)
                {

                    if (_Index != 0 && _translateTransform.Y <= 0 && _PART_ItemsPanelRoot is { })
                    {
                        _translateTransform.Y = e.Vector.Y + _translateTransform.Y;
                        if (_PART_Previous_ContentPresenter is { } && _PART_ContentPresenter is { } && Math.Abs(_translateTransform.Y) > (_PART_Previous_ContentPresenter.Bounds.Height / 2 + _PART_ContentPresenter.Bounds.Height / 2))
                        {
                            _PART_ItemsPanelRoot.Children.Move(_Index, _Index - 1);
                            RefreshElementDetail();
                            _translateTransform.Y = 0;
                        }
                    }
                    else if (_PART_ItemsPanelRoot is { } && _Index != _PART_ItemsPanelRoot.Children.Count - 1 && _translateTransform.Y >= 0)
                    {
                        _translateTransform.Y = e.Vector.Y + _translateTransform.Y;
                        if (_PART_Next_ContentPresenter is { } && _PART_ContentPresenter is { } && Math.Abs(_translateTransform.Y) > (_PART_Next_ContentPresenter.Bounds.Height / 2 + _PART_ContentPresenter.Bounds.Height / 2))
                        {                                                       
                            _PART_ItemsPanelRoot.Children.Move(_Index, _Index + 1);
                            RefreshElementDetail();
                            _translateTransform.Y = 0;
                        }
                    }
                }                
            }
        };

    }
    private void RefreshElementDetail()
    {
        if (_PART_ItemsPanelRoot is { } && _PART_ContentPresenter is { })
        {
            _Index = _PART_ItemsPanelRoot.Children.IndexOf(_PART_ContentPresenter);
            if (_Index != 0 && _PART_ItemsPanelRoot.Children[_Index - 1] is ContentPresenter _pART_Previous_ContentPresenter)
            {
                _PART_Previous_ContentPresenter = _pART_Previous_ContentPresenter;
            }
            if (_Index != _PART_ItemsPanelRoot.Children.Count - 1 && _PART_ItemsPanelRoot.Children[_Index + 1] is ContentPresenter _pART_Next_ContentPresenter)
            {
                _PART_Next_ContentPresenter = _pART_Next_ContentPresenter;
            }            
        }
    }
    private ContentPresenter? FindContentPresenter(StyledElement styledElement)
    {
        if (styledElement.Parent is { })
        {
            if (styledElement.Parent is ContentPresenter _contentPresenter)
            {
                return _contentPresenter;
            }
            else
            {
                return FindContentPresenter(styledElement.Parent);
            }
        }
        return null;
    }
    private ItemsControl? FindItemsControl(StyledElement styledElement)
    {
        if (styledElement.Parent is { })
        {
            if (styledElement.Parent is ItemsControl _itemsControl)
            {
                return _itemsControl;
            }
            else
            {
                return FindItemsControl(styledElement.Parent);
            }
        }
        return null;
    }
    ContentPresenter? _PART_ContentPresenter;
    ContentPresenter? _PART_Previous_ContentPresenter;
    ContentPresenter? _PART_Next_ContentPresenter;
    ItemsControl? _PART_ItemsControl;
    Panel? _PART_ItemsPanelRoot;
    int _Index = -1;
    int _DragStartedIndex = -1;

    public delegate void SItemsControlDragReorderThumbMoveItemDelegate(int oldIndex,int newIndex);

    public static readonly StyledProperty<SItemsControlDragReorderThumbMoveItemDelegate?> SItemsControlDragReorderThumbMoveItemProperty =
AvaloniaProperty.Register<SItemsControlDragReorderThumb, SItemsControlDragReorderThumbMoveItemDelegate?>(nameof(SItemsControlDragReorderThumbMoveItem));    
    public SItemsControlDragReorderThumbMoveItemDelegate? SItemsControlDragReorderThumbMoveItem
    {
        get { return GetValue(SItemsControlDragReorderThumbMoveItemProperty); }
        set { SetValue(SItemsControlDragReorderThumbMoveItemProperty, value); }
    }
}

And the ViewModel should like this:

 public partial class SettingContentKeyboardsViewModel : ObservableObject
 {
     public SettingContentKeyboardsViewModel()
     {
         MoveItem = (_oldIndex, _newIndex) => {
             AddedKeyboardsOC.Move(_oldIndex, _newIndex);                
         };            
     }
     [ObservableProperty]
     ObservableCollection<string> _AddedKeyboardsOC = new ObservableCollection<string>();

     [ObservableProperty]
     SItemsControlDragReorderThumbMoveItemDelegate? _MoveItem;
 }