上篇(WPF實現QQ群文件列表動畫(一))介紹了WPF實現QQ群文件列表動畫的大致思路,結合我之前講過的WPF里ItemsControl的分組實現,實現起來問題不大,以下是效果圖:
其實就是個ListBox,使用了它的分組樣式,而分組樣式其實就是一組Expander,這就讓我有機會使用自定義的Expander樣式,這個Expander樣式已經實現了動畫伸縮。后台做的就相當簡單了,只需要給這個ListBox指定ItemSource並且給它添加一個分組依據就行了。
注意一個小細節:我把自帶的Header的圓形三角去掉了,自己繪了一個Path:
Header其實是個ToggleBtton,因此才有IsChecked屬性,正好對應Expander的Expanded和Collpased,所以對箭頭Path做了個旋轉動畫,當IsChecked=True的時候執行,取消激活的時候再執行復原動畫。
至此動畫伸縮效果就已經完成了,其實這種思路可以廣泛應用到其他樣式的制作,如TreeView的伸縮,導航組的伸縮等等。
上篇留下了一個問題,當Expander使用LayoutTransform做伸縮動畫的時候,如果Content是多個UserControl組成,收縮的時候會有卡頓現象,這個現象我現在已經沒法重現,表面上看起來,當收縮的時候,是讓里面的每個UserControl各自為單位收縮,每個單位收縮完成后,最后再統一縮為0,這顯然是不可接受的。我這里沒有使用UserControl,而是使用ListBox的DataTemplate,雖然功能上差不多,但是里面的繪畫機制可能並不相同。當然這僅僅是我的猜測,我現在沒法重現這個現象是因為就在不久前,我發現使用UserControl也不會出現卡頓現象了,這就讓我沒有頭緒了。不過現實中,結合列表控件的話,不太可能用UserControl,除非你用代碼堆個列表效果,有興趣的朋友可以研究研究這個現象。