在一些允許用戶自定義欄目順序的app（如：鳳凰新聞、網(wǎng)易云音樂等），我們可以方便地拖拽列表項來完成列表的重新排序，進而完成對欄目順序的重排。這個功能很人性化，而實現(xiàn)起來其實很簡單（甚至都不用寫什么后臺代碼），只有三步。

①把冰箱門打開

首先，我們需要讓冰箱的大門敞開，也就是允許我們進行拖拽的相關(guān)操作。以ListView為例，注意下面幾個屬性。

1 <StackPanel> 2 <ListView x:Name="list" 3 AllowDrop="True" 4 CanReorderItems="True" 5 IsSwipeEnabled="True"> 6 <ListView.ItemContainerStyle> 7 <Style TargetType="ListViewItem"> 8 <Setter Property="Background" Value="Gray"/> 9 <Setter Property="Foreground" Value="White"/> 10 <Setter Property="Margin" Value="4"/> 11 </Style> 12 </ListView.ItemContainerStyle> 13 </ListView> 14 <Button Click="Button_Click">Show Items</Button> 15 <TextBlock x:Name="txt"/> 16 </StackPanel>

AllowDrop屬性允許元素進行拖動，它繼承自UIElement基類，為所有可視元素支持。

CanReorderItems屬性繼承自ListViewBase基類，允許列表控件的項可以重新排序。

IsSwipeEnabled屬性（swipe有“輕掃”之意）也需要設(shè)置為“True”，否則在觸摸屏等輸入設(shè)備下無法進行操作。相關(guān)的詳盡說明在MSDN文檔里有介紹（https://docs.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.Controls.ListViewBase），此部分摘錄部分原文：

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.

（有趣的是最后一段：當(dāng)列表不允許輕掃手勢（撤銷選定，拖動，拖拽重排）時，我們可以“顯式”地將IsSwipeEnabled屬性設(shè)置為False來提升應(yīng)用的性能。）

②把大象裝進去

前臺ok后，我們就可以在后臺加點東西，把我們的排序邏輯（其實并沒有，微軟已經(jīng)寫好了）添加進去。這個demo里，我用了一個按鈕和一個文本框來觀察重排的結(jié)果。如下：

1 public sealed partial class MainPage : Page 2 { 3 public MainPage() 4 { 5 this.InitializeComponent(); 6 for (int i = 0; i < 10; i++) 7 { 8 list.Items.Add($"-----THIS IS ITEM {i}-----"); 9 } 10 } 11 12 private void Button_Click(object sender, RoutedEventArgs e) 13 { 14 txt.Text = string.Empty; 15 foreach (var item in list.Items) 16 { 17 txt.Text += item.ToString()[18] + " "; 18 } 19 } 20 }

這樣，重新排序后，點擊按鈕，我們即可觀察到結(jié)果了。

③把冰箱門關(guān)上

把大象（？）裝進去之后，最后就是我們的收尾工作了。顯然，剛才的列表只是一個中間的載體，是我們待排序欄目的簡單顯示。一般而言，這個listview會安置在contentdialog或是popup里，那么怎么在重排后立即讓父頁面上的欄目得到相應(yīng)，進行重排呢？我們用個預(yù)定義的委托即可，加在剛才的后臺代碼里（冰箱能裝的東西其實挺多的）。

public Action action;

然后在父頁面注冊方法，比如：

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

大功告成！

?

轉(zhuǎn)載于:https://www.cnblogs.com/DaweiX/p/6427637.html

總結(jié)

以上是生活随笔為你收集整理的【UWP】拖拽列表项的排序功能实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。