WPF UI分析工具Snoop

WPF的UI分析工具，方便調(diào)試WPF樣式等，快速了解XAML代碼的結(jié)構(gòu)，同時(shí)可以對(duì)相應(yīng)的屬性進(jìn)行修改或調(diào)整。它是一個(gè)WPF運(yùn)行時(shí)對(duì)Visual UI調(diào)試的一個(gè)工具，解壓就可以使用.

在WPF中我們可以使用Style來(lái)設(shè)置控件的某些屬性值，并使該設(shè)置影響到指定范圍內(nèi)的所有該類控件或影響指定的某一控件，比如說(shuō)我們想將窗口中的所有按鈕都保持某一種風(fēng)格，那么我們可以設(shè)置一個(gè)Style，而不必分別設(shè)置每個(gè)按鈕的風(fēng)格。

WPF UI分析工具Snoop怎么用？

下載安裝后，運(yùn)行Snoop.exe后出現(xiàn)一個(gè)類似工具條的界面：

下拉框中顯示的運(yùn)行的WPF應(yīng)用程序，如果還么有打開需要調(diào)試的程序，可以打開后再點(diǎn)擊【刷新】按鈕獲取應(yīng)用程序列表，選中應(yīng)用程序后，點(diǎn)擊Snoop圖標(biāo)()可以打開Snoop。

左邊是可視化樹列表，選中可視化元素后，右邊中間顯示該元素的屬性，右邊下面是元素的UI預(yù)覽界面。

當(dāng)選中元素后，目標(biāo)應(yīng)用程序的響應(yīng)元素會(huì)高亮顯示在一個(gè)紅色邊框內(nèi)。

選中元素可以直接在列表中選擇，也可以按住Ctrl-Shift后移動(dòng)鼠標(biāo)到目標(biāo)應(yīng)用程序的選擇元素上。

界面面板介紹

可視元素列表（Visual Tree View）

當(dāng)出現(xiàn)性能問題時(shí)可以查看一下子元素的數(shù)量，盡量使得子元素?cái)?shù)量達(dá)到最小。

通過(guò)過(guò)濾文本框右邊下拉控件可以查找錯(cuò)誤的綁定。（在調(diào)試OpenExpressApp過(guò)程中，snoop會(huì)出現(xiàn)一些bug，而使得OEA程序關(guān)閉，原因不明）

屬性面板（Property Grid）

我更新過(guò)屬性值，但是好像沒有反映到目標(biāo)應(yīng)用程序中去。

事件視圖（RoutedEvents View）

預(yù)覽窗口（Preview Area ）

選擇元素的預(yù)覽界面，這個(gè)由于性能原因默認(rèn)是關(guān)閉的，不過(guò)我每次都是打開它，因?yàn)榭梢粤⒖炭吹叫Ч�：�?

放大視圖（Zoom View）/3D Zoom View

調(diào)試實(shí)例

在開發(fā)OpenExpressApp時(shí)，發(fā)現(xiàn)了一個(gè)比較UI上的bug，我就是借助Snoop進(jìn)行調(diào)試解決的，以下是我遇到的問題。

解決UI BUG問題：

在模塊中，點(diǎn)擊Grid中間區(qū)域會(huì)出現(xiàn)一列長(zhǎng)條

解決：

因?yàn)榭瓷先ビ悬c(diǎn)像splitter控件，所以以為splitter位置出現(xiàn)問題，我把ListDetailForm.xaml列表和明細(xì)之間使用ResizingPanel代替Grid，也不是splitter了
  <AvalonDock:DocumentContent Title="內(nèi)容">
                                <DockPanel>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="3*"/>
                                            <ColumnDefinition Width="7*"/>
                                        </Grid.ColumnDefinitions>
                                        <GridSplitter Width="5" ></GridSplitter>
                                        <DockPanel Name="listRegion">
                                         </DockPanel>
                                         <DockPanel Name="detailRegion" Grid.Column="1">
                                        </DockPanel>
                                     </Grid>
                                </DockPanel>
                             </AvalonDock:DocumentContent>
  <AvalonDock:ResizingPanel>
                                    <DockPanel Name="listRegion" AvalonDock:ResizingPanel.ResizeWidth="3*">
                                    </DockPanel>
                                    <DockPanel Name="detailRegion" AvalonDock:ResizingPanel.ResizeWidth="7*">
                                    </DockPanel>
                                </AvalonDock:ResizingPanel> 

發(fā)現(xiàn)問題依舊，這時(shí)就不知道是什么原因了，從樣子看出來(lái)還會(huì)是什么東東。這時(shí)正好snoop發(fā)布了，就用了一把。打開snoop看到這個(gè)豎條原來(lái)是CSLA中的BusyAnimation。我在Grid中間放置了一個(gè)顯示busy狀態(tài)的控件，終于找到罪魁禍?zhǔn)琢�，原�?lái)是這個(gè)東東在搗亂。
找到原因后就很好解決了，把BusyAnimation的VisibilityProperty綁定一下就可以解決了
            //綁定IsVisible
            Binding bdIsVisible = new Binding("IsBusy");
            bdIsVisible.Source = DataProvider;
            bdIsVisible.Converter = new BooleanToVisibilityConverter();
            bdIsVisible.BindsDirectlyToSource = true;
            busy.SetBinding(BusyAnimation.VisibilityProperty, bdIsVisible);