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
三、菜單中選擇“調試”->“附加到進程”
四、在彈出的窗口中選擇對應的進程。注意有的應用進程有多個，同時標題也不一定給出，比如應用商店的進程我這里顯示的是兩個（不知道讀者的怎樣）。如果沒找到就刷新試試。選擇后點擊“附加”
五、查看實時可視化樹面板。然后要怎么調戲你隨意~~
什么？就這么簡單，毛線的黑科技。呵呵，本來就沒有黑科技，我是好人，好人的講解到此完畢。