用過的 wpf 的同學,肯定用過控制項的選擇功能,例如 listbox 或者 datagrid 等。其中有一種控制項 ———— treeview 的多選並沒有我們想象中的那麼開箱即用。
之前就遇到乙個需求,treeview 要支援多個選中項,且能從資料端(viewmodel)改變樹節點的選中狀態,然而原生 treeview 控制項是不支援設定多個選中項的。
從 treeview 這個類可以看出,它是繼承於 itemscontrol 的,本質上它就是乙個巢狀 itemscontrol 的控制項。單個 itemscontrol 的選中非常容易處理,多層巢狀就不一樣了,原生控制項也沒有提供直接可用的介面來實現多選項。
剛開始做多選 treeview 的時候,首先採用了增加 isselected 屬性來繫結選中狀態,資料結構如下:
public class treenode
// other data of tree node...
}
本以為將 treeviewitem 的 isselected 屬性繫結到 selected 屬性,再使用 datatrigger 讓選中項樣式高亮使即可輕鬆搞定,沒想到寫完後測試卻發現不同層級的 treeviewitem 無法同時處於選中狀態。因為雙向繫結的存在,控制項的 isselected 屬性實時同步到了 viewmodel 的狀態資料中,導致多選失敗。
後來在 selected 的 set 方法中嘗試加入一些條件判斷,試圖區分使用者的點選和控制項自動的資料修改,均沒有理想的解決所有場景下的操作要求。
上面的方法中,我花了大量的精力去解決控制項 isselected 屬性與 viewmodel 資料的同步,雙向繫結使得資料流的管理極為混亂和複雜,那為什麼不把兩者的關係解耦呢?
wpf 的雙向繫結帶給 ui 開發帶來極大的便利,卻也造成了複雜互動的維護性問題,適當使用單向繫結能有不錯的效果。
當時在解決 treeview 多選問題的時候,我還沒有接觸 web 前端。後來學習 react 的時候,發現我在處理 treeview 資料流動方向的方式竟然與 react 渲染時的單向資料流有一定的相似之處。
vue元件 支援單選或者多選
之前做了乙個單頁面的單選和多選,這裡我整理了一下,封裝成元件,能夠同時支援單選和多選。我這裡的 是在vue腳手架 vue cli 上開發完成的,搭建方法這裡就不細說了。這個元件的名字呢命為 option.vue option.vue html css ul,li chooser chooser li...
WPF TreeView遞迴非同步繫結
using system using system.collections.generic using system.linq using system.text using system.componentmodel using system.collections.objectmodel nam...
wpf treeView新增右擊事件
剛開始接觸wpf,今天學習了下treeview控制項,右擊新增事件。看了很多網上大牛的東西,終究是搞懂了。效果圖如下 xmal部分 treeview name datatreeview margin 1 grid.column 0 grid.row 4 previewmouserightbutton...