WPF Inspector 與 Visual Studio 的 WPF Tree Visualizer

WPF Inspector 這工具實在酷,Visual Studio 的 WPF Tree Visualizer 也不賴。兩者搭配使用,在調整和除錯 WPF 控制項時,往往可以節省不少時間。

WPF UI 框架設計得非常彈性,提供了許多機制,例如觸發器、資料繫結、資料樣板(Data Template)、控制項樣板(Control Template)等等,讓我們可以在執行時期更靈活、更細緻地變換控制項的外觀和行為。然而也因為這麼靈活彈性,使得我們在設計 WPF 控制項時(尤其是 custom controls),往往得花不少時間去調整和除錯視覺化元素的樣式。

比如說,你明明從 MyRes.xaml 中動態載入了一些控制項樣板,然後在執行時期動態套用至某個控制項。可是執行結果卻偏偏不是你設想的那樣,例如某個巢狀樣板不知為何竟然沒有作用。此時要是能夠在執行時期查看控制項的視覺化元素的完整樹狀結構及相關屬性,通常能節省許多除錯的時間。

WPF Inspector 就提供了這樣的功能。

你可以先執行你的 WPF 應用程式,然後再執行 WPF Inspector,它會在主視窗中列出目前執行中的 WPF 應用程式。點選你想要檢視的 WPF 應用程式,然後按 Attach 即可。如下圖:


下圖的左上角背景視窗(MainWindow)就是被檢視的 WPF 應用程式,裡面有一個 ListBox,而且它還套用了樣板,所以外觀看起來跟預設的 ListBox 不太一樣。在 WPF Inspector 視窗的左邊面板會顯示目前檢視之應用程式的 UI 樹狀結構;你可以選擇要看 Visual Tree 還是 Logical Tree。右邊面板則會顯示目前選到的 UI 元素的各項狀態,包括屬性、資料繫結、資源、觸發器、樣式等。


上圖中,Style 頁籤裡面的幾個 Setters 之所以被加上刪除線,是因為我利用 WPF Inspector 提供的主題切換功能把應用程式額外套用特定的主題了。主題切換功能可以在主選單的 Application 底下找到,參考下圖:



除了在左邊面板的樹狀結構中點選元素,我們也可以將滑鼠移到被檢視的 WPF 應用程式中,以【Ctrl+滑鼠左鍵】或【Ctrl+Shift+滑鼠左鍵】的方式點擊視窗上的元件,此時 WPF Inspector 會在其樹狀結構中即時選取對應的元素。此外,當你將滑鼠移至樹狀結構中的某個 UI 元素時,它還會彈出一個預覽小視窗。參考下圖:


這實在挺方便的,不是嗎?

Visual Studio 的 WPF Tree Visualizer

當然,Visual Studio 2012 的 WPF Tree Visualizer 也是挺好用的。我們可以在程式中設定中斷點,然後以滑鼠移到某個變數上方,等到出現 Data Tip 視窗時,再點擊其中的放大鏡圖示,如下圖:


如此便可開啟 WPF Tree Visualizer 來查看目前的變數所關聯之視覺化元素的樹狀結構與屬性了:



(碎碎念:寫 WPF 的人怎麼那麼少啊!)

沒有留言:

技術提供:Blogger.
回頂端⬆️