Java implements the sorting function of drag and drop list items

In app (e.g., phoenix news, netease cloud music, etc.), which allows users to customize the order of columns, we can easily drag and drop the list items to complete the reordering of the list, thus completing the reordering of the column order. It's a very human feature, but it's actually very simple to implement (you don't even have to write any background code) in three steps.

Open the refrigerator door

First, we need to leave the refrigerator door open, which allows us to drag and drop. In the case of ListView, note the following attributes.

<StackPanel>
    <ListView x:Name="list" 
         AllowDrop="True"
         CanReorderItems="True" 
         IsSwipeEnabled="True">
      <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
          <Setter Property="Background" Value="Gray"/>
          <Setter Property="Foreground" Value="White"/>
          <Setter Property="Margin" Value="4"/>
        </Style>
      </ListView.ItemContainerStyle>
    </ListView>
    <Button Click="Button_Click">Show Items</Button>
    <TextBlock x:Name="txt"/>
  </StackPanel>

The AllowDrop attribute, which allows elements to be dragged, inherits from the UIElement base class and is supported for all visual elements.

The CanReorderItems property inherits from the ListViewBase base class and allows items in a list control to be reordered.

The IsSwipeEnabled attribute (swipe means "swipe") also needs to be set to "True", otherwise it cannot be operated on input devices such as touch screens. Related has introduced in detail in MSDN document (https: / / docs. microsoft. com/en - us uwp/api/Windows UI. Xaml. Controls. ListViewBase), the parts from the original:

Remarks

Setting IsSwipeEnabled to false disables some default touch interactions, so it should be set to true when these interactions are needed. For example:

If item selection is enabled and you set IsSwipeEnabled to false, a user can deselect items by right-clicking with the mouse, but can't deselect an item with touch by using a swipe gesture.
If you set CanDragItems to true and IsSwipeEnabled to false, a user can drag items with the mouse, but not with touch.
If you set CanReorderItems to true and IsSwipeEnabled to false, a user can reorder items with the mouse, but not with touch.
You typically set IsSwipeEnabled to false to disable swipe animations when items in the view don't support interactions that use the swipe gesture, like deselecting, dragging, and reordering. Disabling the animation when it's not needed can improve the performance of your app.

(Interestingly, the last paragraph: we can "explicitly" set the IsSwipeEnabled property to False to improve application performance when the list does not allow swiping gestures (unselect, drag, drag and reorder).)

Put the elephant in

After foreground ok, we can add something in the background to add our sorting logic (which Microsoft has already written). In this demo, I used 1 button and 1 text field to see the rearrangement. As follows:

public sealed partial class MainPage : Page
  {
    public MainPage()
    {
      this.InitializeComponent();
      for (int i = 0; i < 10; i++)
      {
        list.Items.Add($"-----THIS IS ITEM {i}-----");
      }
    }
    private void Button_Click(object sender, RoutedEventArgs e)
    {
      txt.Text = string.Empty;
      foreach (var item in list.Items)
      {
        txt.Text += item.ToString()[18] + " ";
      }
    }
  }

So, when we reorder it, we click on the button, and we see the results.

Close the refrigerator door

Put the elephant (?) Once we've packed it in, it's time to put the finishing touches. Obviously, the list is just an intermediate vector, a simple display of the columns to be sorted. Generally speaking, listview will be placed in contentdialog or popup, so how to get the corresponding columns on the parent page to be rearranged immediately? We'll just use a predefined delegate and add it to the background code (there's a lot of stuff in the fridge).

 public Action action;

Then register the method on the parent page, such as:

btn.Click += async (s, e) => 
       {
         var dialog = new Dialogs.Sort();
         dialog.action += async () => { await sortagain(); };
         await dialog.ShowAsync();
      };