MvvmContext

• Mar 07, 2024
• 4 minutes to read

The MvvmContext component is the key tool in developing MVVM applications using the DevExpress MVVM Framework. The component’s API is described in help topics of the Concepts section. This topic will demonstrate the design-time functionality of the MvvmContext.

You can invoke the MvvmContext smart-tag by clicking the corresponding button at the top right corner of the component. Links of this smart-tag provide the following functionality.

• Adding new ViewModels. To add a new ViewModel that is related to this View, click the ‘Add ViewModel’ link (see the figure below).

  

  If the ‘Show generated code-behind’ check box is checked, you will be shifted in code after the ViewModel is generated.

  This action creates a blank ViewModel in the very same file where your View is defined (FormName.cs). For a real-life application, where you will probably want all Views and ViewModels located in a separate files and grouped into corresponding folders, use the ‘Add DevExpress Item’ menu to add a ‘View and ViewModel’ template from the Template Gallery.

• Assigning a specific ViewModel to the MvvmContext. Use the drop-down within the smart-tag to choose a ViewModel assigned to this component. If the ‘Show All Types’ check-box is clear, only public classes within the same file and namespaces containing .ViewModel are shown (except for classes, whose names end with ‘Service’, ‘Message’, ‘Helper’ and other key words). Otherwise, the drop-down displays all appropriate classes. The ‘Hide Namespace’ check box hides namespace names for the classes, displayed within the drop-down. Clear this check box if you want to see full class names.

  If there is a ViewModel, generated by the MvvmContext component, the ‘Assign ViewModel’ and ‘Remove ViewModel’ options appear (see the figure below). Clicking these links affects (assign to the component or remove) only the ViewModel, generated by the component, no matter which ViewModel is currently assigned to the component.

  

• Generating RibbonControl links for existing commands. If there is a button container (e.g., the Ribbon Control or Bar Manager) lying on the same form that hosts the MvvmContext component, the ‘Retrieve Commands’ link appears as the figure below illustrates.

  

  Clicking this link launches the process that scans the ViewModel for both regular and asynchronous commands, creates a BarButtonItem for each of the found commands and binds it to the related command. The names of these commands are used as button captions. If a command has one of the standard names (Open, Save, Create, New, Remove, etc.), a related glyph from the Image Gallery and Context-Dependent Images will be automatically assigned.

  Note

  By default, auto-generated buttons will be placed all together in a new unnamed RibbonPageGroup and you will need to rename this group and/or re-arrange buttons manually. You can also use specific Data Annotation Attributes before your commands. Such attributes as Display(GroupName), DisplayName, Image/DXImage and others will be recognized and applied to the auto-generated buttons.

  If you want to remove, restore or modify any of the generated command bindings, click the ‘Edit…’ link below. This will invoke the Binding Expression Editor, shown in the following image.

  

  Here you can click the ‘Add (Confirm)’ button’s drop-down to add a required command. The grid below enlists all commands that are already added. In the property grid to the editor’s right, set the Target property to specify a UI element to which this command will be bound. This editor relieves you from writing all command bindings manually, as was shown in the Commands topic.

• Register services. Similar to the automatic generation of ribbon item links, the MvvmContext component finds all service-related controls in your View and registers corresponding services locally when you click the Retrieve Services link in the control smart tag. For example, if your View contains the DocumentManager component, the DocumentManagerService is registered. The Edit… link invokes the Service Editor (shown in the image below) that allows you to register new services or modify existing registrations. This editor is also invoked when you click the edit button for the MVVMContext.RegistrationExpressions collection in Visual Studio’s Properties window.

  

  Note that the corresponding code is added not to the ViewModel, but to the View’s .Designer.cs file.