DevExpress WPF components are fully integrated into Visual Studio. In addition to the design-time features you’ve come to expect, DevExpress components feature drag & drop functionality, extended context menus and other enhancements for saving development time. Our installer registers several extensions in Visual Studio to simplify interaction with designers and help you build UIs using the MVVM pattern.

Smart Tags

Smart Tags are design time extensions for quickly binding to and setting frequently used properties, assigning icons and attaching services and behaviors to components. Smarts Tags are available for DevExpress WPF Controls as well as standard components.

To access the Smart Tag panel, simply select a control and click the Smart Tag glyph that appears in the top right corner.

Note: It may be difficult to select a particular element in the designer by mouse alone. In these cases, you can accurately select the appropriate element from the Document Outline. The Visual Studio Document Outline displays the document hierarchy in a tree style view.

Each Smart Tag panel has a heading and main properties area:

• Caption – displaying the control type. For each DevExpress component, this caption will link to an appropriate documentation topic.
• View tabs — denoted by (wrench) and (gear). The (wrench) tab view is selected by default and will display the control properties in the main properties area. Selecting the gear button will show the control’s MVVM settings in the main properties area in place of the control properties. These MVVM settings are useful for attaching Services and Behaviors.

Binding Editor

Each property exposed in the Smart Tag can be set to a value or attached to a binding. To create a binding, click the “barrel” button to bring up the Binding Dialog:

The Binding Dialog provides multiple binding source modes: DataContext, ElementName, RelativeSource Self, StaticResource. These modes determine the binding expression of the target property.

If you choose the DataContext source mode, the Binding Dialog will display the properties of the data context object (as in the above image). Note that the DataContext, or a d:DataContext property, is required in XAML for the Binding Dialog to list the available data context properties.

The ElementName mode is useful for binding to a property on a XAML element within the same namescope.

The RelativeSource Self mode is for binding to a property on the same element.

If your source object is contained in a static resource, you can use the StaticResource mode.

You can further specify binding expression settings for BindingMode, UpdateSourceTrigger, and Converter.

If the default settings meets your requirements, simply double-click the required property to apply the binding expression as-is. You can otherwise specify the necessary binding settings and click the OK button at the bottom of the Smart Tag panel.

If a binding already exists on a property, its binding glyph will be highlighted and a binding description will be displayed within the property line.

Attaching MVVM behaviors and services

To attach components from the DevExpress MVVM Framework (DevExpress behaviors and services), click the (gear) tab to select a behavior or service. The list of available behaviors and services depends on the selected element in the designer.

The properties of behaviors and services can be set or bound in the same manner as control properties.

With the MVVM settings visible, click the Add Behavior button.

Click the EventToCommand item and choose among the list of behaviors and then set the behavior properties.

Disable Smart Tags on Standard Controls

If for some reason you need to disable Smart Tags on standard WPF controls, simply use the “Disable Smart Tags for standard controls” option from the DEVEXPRESS | WPF Control v14.2 menu.

Free DevExpress Products - Get Your Copy Today