The User Interface object is the starting point for exploring the visual or logical tree structure of a Silverlight Application.
User Interface
Explore the user interface tree structure by selecting objects in the User Interface. The selected UI object is highlighted in the Silverlight application. You can modify the highlighting behavior by selecting the Highlight button in the toolbar.
The Properties window pane displays the properties of the selected UI element and allows for peeking and tweaking the look of the Silverlight application on the fly. Property values changes are directly applied to the user interface of the Silverlight application.
The Properties window features a Data Bindings property tab. When this property tab is selected, the property grid reveals the binding expressions used to connect properties with a datasource.
The View window pane renders the generated XAML of the selected UI element.
 Tip: |
|---|
|
The XAML displayed in the View window pane is initially limited to 100 UI elements. This behavior is implemented for performance reasons. Hit the Refresh button in the View toolbar to render the entire XAML document. |
| Tip: |
|---|
|
Select UI elements by hovering the mouse over the Silverlight application while pressing the Ctrl and Shift buttons. The associated UI element is automatically selected in the Explorer pane. |
To acccess the User Interface, open the Explorer from the View menu and navigate to the User Interface object.
User Interface Tools
The Explorer toolbar features a number of tools when an element in the User Interface is selected. The Navigate Backward, Navigate Forward and Refresh buttons are shared buttons that are always visible.
Highlight settings
Whenever a UI element is selected in the Explorer, it is highlighted in the application. The highlighting behavior can be altered using the Highlight button. You can swich between different highlighting shapes and you may change the highlighting color.
Ruler
Selecting the Ruler button renders an interactive ruler on the application. Move the mouse over the application's User Interface and the ruler automatically displays the position and size in pixels of the element the mouse is hovering.
Clicking the Ruler buttons toggles the ruler between left-top docked, right-bottom docked and hidden.
Visual and Logical Tree
The Visual Tree and Logical Tree buttons toggle the state of the selected UI element by rendering either the child elements of visual tree or child elements of the logical tree. The tree mode can be adjusted per element.
Snapshot
Clicking the Snapshot button generates a bitmap image of the current selected element in the User Interface. The generated bitmap image is copied to the clipboard and can be opened in an editor for further processing.
