The properties pane provides detailed information about the selected item. In the user interface page the properties pane lists all the public dependency properties of the selected visual and provides editing capabilities. See the How to locate a visual tutorial to learn more about selecting visuals in a XAML app.
XAML visuals typically have a large amount of dependency properties. Use the property filter to reduce the amount of displayed properties, for quick access to the properties you are interested in. The filter is applied to property names and supports multiple values, separated by a comma. The following image demonstrates filtering on width and height properties of a visual element.
By default the properties are categorized by functionality. List all properties alphabetically by selecting the alphabetical button in the toolbar at the bottom.
Filtering properties is currently not available in the Visual Studio properties pane.
The properties pane uses a set of small icons for identifying property types and values. The following table lists the available icons and explains their usage;
|The dependency property value is the result of a binding||Hover the mouse over the icon to see the actual binding|
|The dependency property value is inherited (either from a style or from a parent visual higher up in the visual tree)||Right mouse click and click select value source to select the source parent visual|
|The dependency property value is a local value. The value has been set directly on the instance.||-|
|The property is an attached dependency property||-|
|The property value is a member of a collection and can be removed.||Double-click to remove the member|
Learn more about inherited and local dependency property values at Dependency Property Value Precedence on MSDN.
The properties pane includes a variety of editors in order to make editing property values as easy as possible. This paragraph lists the available editors and explains how to use them.
Number, string and other primitive property value types are edited using a simple text editor. Whenever the entered value is not valid an error box is shown with validation error details.
Used extensively for property types that have a limited number of allowed values. Examples include boolean values, enumerations, and also Brush and Transform values, etc.
The values in the dropdown editor are exclusive when no other value than the ones provided in the dropdown are allowed. Non-exclusive dropdown values are also supported, examples are the Color and the FontFamily editors.
The following images demonstrates the use of the dropdown editor to pick a Brush value.
A number of primitive property types are edited using a so-called expandable properties editor. The property value consists of a simple type with a fixed number of properties. Take the Matrix struct for example, it has a set of properties that together form the value of a Matrix. Other types are Point, Rect, Thickness, and so on.
The following screenshot demonstrates the use of this editor to edit the properties of a Matrix.
Whenever XAML Spy detects an editable collection, it provides an editor for adding, removing and setting collection members. The collection editor is available for both dependency objects and custom objects. This includes support for editing custom viewmodel collections as well. The following screenshot demonstrates the collection editor in action.
The value of the DataContext property in above screenshot is a custom view model having a property Persons which is a ObservableCollection containing instances of type Person. Select the [*] member to add a new instance of type Person as is demonstrated by the dropdown. Remove members from the collection by double-clicking the red icon. Replace a collection member by a new instance by selecting the member and pick a value from the dropdown that appears.
Adding and replacing members to a collection is only supported when the member type has a public default constructor.
The collection editor is available at any level in the hierarchy. The following screenshot demonstrates editing the Children of a TransformGroup within a TransformGroup.