UWP 拖拽列表項的排序功能實現

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

1
<
stackpanel
>
2<
listview 
x:name
="list"
3allowdrop
="true"
4canreorderitems
="true"
5isswipeenabled
="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"
/>
11style
>
12listview.itemcontainerstyle
>
13listview
>
14<
button 
click
="button_click"
>show items
button
>
15<
textblock 
x:name
="txt"
/>
16stackpanel
>

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

canreorderitems屬性繼承自listviewbase基類，允許列表控制項的項可以重新排序。

isswipeenabled屬性（swipe有「輕掃」之意）也需要設定為「true」，否則在觸控螢幕等輸入裝置下無法進行操作。相關的詳盡說明在msdn文件裡有介紹（此部分摘錄部分原文：

remarks

setting isswipeenabled tofalsedisables some default touch interactions, so it should be set totruewhen these interactions are needed. for example:

（有趣的是最後一段：當列表不允許輕掃手勢（撤銷選定，拖動，拖拽重排）時，我們可以「顯式」地將isswipeenabled屬性設定為false來提公升應用的效能。）

前台ok後，我們就可以在後台加點東西，把我們的排序邏輯（其實並沒有，微軟已經寫好了）新增進去。這個demo裡，我用了乙個按鈕和乙個文字框來觀察重排的結果。如下：

1
public
sealed
partial
class
mainpage : page
2-----");
9}10}
1112
private
void button_click(object
sender, routedeventargs e)
1319
}20 }

這樣，重新排序後，點選按鈕，我們即可觀察到結果了。

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

public action action;

然後在父頁面註冊方法，比如：

1             btn.click += async (s, e) => 2;
5await
dialog.showasync();
6 };

大功告成！

UWP 拖拽列表項的排序功能實現

vue列表拖拽排序功能實現

php介面實現拖拽排序功能

在 Rails 中實現拖拽排序功能

UWP 拖拽列表項的排序功能實現

vue列表拖拽排序功能實現

php介面實現拖拽排序功能

在 Rails 中實現拖拽排序功能

相關推薦