VisuaStudio號稱全宇宙最強大的IDE。在VS2015版本中，微軟又給廣大開發者帶來了一個強大的工具：實時可視化樹(Live Visual Tree，以下簡稱可視樹)。其實樹可視化工具并不是新鮮的東西，在WPF的時候就有了，只是這次微軟集成到是VS2015里，而且功能更強大。使用此工具可以幫助開發者在調試應用時實時查看UI元素的布局情況，不過目前還只支持WPF 和 Windows Store 的應用。不僅如此，還可以偷看別人家的應用是怎么布局的呢？甚至改變別人的UI，比如這樣：

注意一下，上面的"微軟大法好"在商店中顯示的是“源自Microsoft”，然后我實時可視化樹把它改了，所以我之前微博才說“我發誓沒用任何修圖工具”，因為我用的是它。怎么樣？是不是感覺有點黑科技的樣子？想知道怎么玩，聽我慢慢道來。

?

先說說如何打開實時可視化樹

在任意工程項目下，F5運行項目。然后通過菜單中的“調試”->“窗口”->“實時可視化樹”，然后你就能看到傳說中的實時可視化樹了。

我的XAML是這樣的：

?

<Grid>

<StackPanel x:Name="stackPanel">

<Rectangle Fill="Blue" Width="250" Height="250"/>

<Rectangle Fill="Yellow" Width="250" Height="250"/>

</StackPanel>

</Grid>

是不是發現可視化樹多了很多不知道什么鬼的東西，其實第一次接觸可視化樹我也不知道是什么。

?

其實可視化樹上的才是真正的UI界面，我們看到的只是它的表層。在這里就不做太多的理論知識講解了

在正式講解可視樹面板的使用前，我先吐槽下VS。雖然可視樹面板可以跟正在調試中的應用做交互，但是點擊了可視樹面板后，我的應用就最小化了，就不能幫我把應用置于頂層嗎？我只能把VS窗口設置小點跟應用并排顯示

?

好了，正文開始

1、如果你的控件有Name會一并顯示出來，如上面圖中的stackPanel

2、每個元素的右邊括號里的數字表示該元素內所有子元素數量

3、可視樹面板上有6個操作按鈕和一個輸入框

?

4、輸入框用于搜索你要的UI元素，并高亮顯示，這個在你UI布局時分復雜時候很有用

?

5、按鈕1：啟用選擇

啟用選擇后，當鼠標在目標應用的界面上移動時，光標所指向的元素會被紅色虛線框標記出來。同時鼠標的事件(比如PointerEntered)也不會觸發。此時點擊界面上的元素，在可視化面板就會定位到對應的元素

?

6、按鈕2：顯示布局修飾工具

開啟該功能后，在可視化面板上點擊的元素，VS會在應用的界面元素上用一個半透明層的東西覆蓋，然后在元素四周繪制輔助線指示出布局

?

7、按鈕3：預覽選擇

很抱歉，我還不知道它是干啥的....希望有人給我指出

?

8、按鈕4：全部展開

點擊后，可視化面板就是像開始的那張圖那樣，將所有元素的節點展開，層次分明

?

9、按鈕5：全部折疊

與全部展開相對應，將所有元素的節點全部折疊

?

10、按鈕6：顯示屬性

這里的屬性不是運行前的屬性，而是運行時屬性。點擊后開啟的是“實時屬性資源管理器”面板，這個面板也可以通過菜單中的“調試”->“窗口”->“實時屬性資源管理器”打開

?

11、元素的右鍵菜單

在可視樹面板元素上單擊右鍵，出現右鍵菜單

●顯示屬性：功能同按鈕6

●查看源：定位到對應的XAML代碼

●展開子項：展開當前元素的子項

?

12、使用實時屬性資源管理器修改“運行時”屬性

在調試應用時，有時候我們希望某些元素的屬性發生改變然后看看效果，傳統的做法是停止調試，然后修改代碼，再調試。通過實時屬性資源管理器面板，可以在調試應用時動態的修改元素屬性，可以立即反應的應用UI界面上。如果效果滿意，就可以停止調試，然后修改代碼了。怎么樣，是不是很方便。

多數的元素屬性都是可以動態修改的，包括Width、Height、Text、Visibility等

“計算的值”可以幫助查看元素的實際渲染結果

?

到此為此，我所知道的關于實時可視化樹的知識講完了。

?

咦，說好的“黑科技”呢？你說的是這個嗎？

?

別急，看了我上面的講解，自己有沒有思路了呢？不拐彎抹角了，不然要被你打....

實例：統一全平臺 悶聲發大財

一、打開你要調戲的應用，比如應用商店

二、以管理員身份打開VS2015

三、菜單中選擇“調試”->“附加到進程”

四、在彈出的窗口中選擇對應的進程。注意有的應用進程有多個，同時標題也不一定給出，比如應用商店的進程我這里顯示的是兩個（不知道讀者的怎樣）。如果沒找到就刷新試試。選擇后點擊“附加”

?

五、查看實時可視化樹面板。然后要怎么調戲你隨意~~

?

什么？就這么簡單，毛線的黑科技。呵呵，本來就沒有黑科技，我是好人，好人的講解到此完畢。

總結

以上是生活随笔為你收集整理的【转】VS工具：实时可视化树的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。