WPF UI分析工具Snoop

WPF的UI分析工具，方便調試WPF樣式等，快速了解XAML代碼的結構，同時可以對相應的屬性進行修改或調整。它是一個WPF運行時對Visual UI調試的一個工具，解壓就可以使用.

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

WPF UI分析工具Snoop怎么用？

下載安裝后，運行Snoop.exe后出現一個類似工具條的界面：

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

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

當選中元素后，目標應用程序的響應元素會高亮顯示在一個紅色邊框內。

選中元素可以直接在列表中選擇，也可以按住Ctrl-Shift后移動鼠標到目標應用程序的選擇元素上。

界面面板介紹

可視元素列表（Visual Tree View）

當出現性能問題時可以查看一下子元素的數量，盡量使得子元素數量達到最小。

通過過濾文本框右邊下拉控件可以查找錯誤的綁定。（在調試OpenExpressApp過程中，snoop會出現一些bug，而使得OEA程序關閉，原因不明）

屬性面板（Property Grid）

我更新過屬性值，但是好像沒有反映到目標應用程序中去。

事件視圖（RoutedEvents View）

預覽窗口（Preview Area ）

選擇元素的預覽界面，這個由于性能原因默認是關閉的，不過我每次都是打開它，因為可以立刻看到效果：）

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

調試實例

在開發OpenExpressApp時，發現了一個比較UI上的bug，我就是借助Snoop進行調試解決的，以下是我遇到的問題。

解決UI BUG問題：

在模塊中，點擊Grid中間區域會出現一列長條

解決：

因為看上去有點像splitter控件，所以以為splitter位置出現問題，我把ListDetailForm.xaml列表和明細之間使用ResizingPanel代替Grid，也不是splitter了
  <AvalonDock:DocumentContent Title="內容">
                                <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> 

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