This section details the MVVM design pattern implementation for the WPF C#/.NET host plugin, demonstrating the mechanics of how a schematic design is converted to an MVVM application which can be extended as a normal MVVM application.

The three primary elements of a Virtuoso host schematic are the host components, host component properties, and port connections. The components shown in the toolbox for a host are essentially classes which can be instantiated by dragging and dropping the component onto the schematic. Dragging and dropping the component onto the schematic adds a component instance to the application. What it means for that component instance to “be in the application” is defined by that component’s metadata.

The component metadata is responsible for providing “code snippets” for code sections that the host plugin understands. A code section is a distinct section of code in a source file where a code snippet can be inserted. Example code sections are below. These code sections are defined in the Virtuoso.Port.Common.eRENDERED_SECTION enumeration.

        USING_NAMESPACE = 0,

        INSTANTIATION = 1,

        INITIALIZATION = 2,

        CONNECTION = 3,

        FINALIZATION = 4,

        UIPROPERTY = 5,

        UIELEMENT = 6,

        CONVERTER = 7,

        SCHEMATICNODE = 8,

        NONE = 9,

Each component’s metadata provides the framework with a list of code snippet metadata, each one specifying a code section and a code snippet corresponding to that section. Taking the Knob control as an example, the component metadata for the Knob provides the framework with a snippet metadata indicating that the following code snippet should be emitted for the USING_NAMESPACE code section:

“using Virtuoso.Control.Knob;\r\n”

The result of this snippet metadata is that the Virtuoso.Control.Knob namespace is added at the top of the host’s main view model, so that subsequent references to the Knob control will be found in its corresponding assembly. The code emission or transformation that is applied based on the specified code section and code snippet is based on the convention and context of the particular host plugin: When the framework requests the code snippet metadata information from the component metadata, it is specifying the host language that the component is being instantiated in. For a different language, the Knob control may not report a snippet in the USING_NAMESPACE code section.

The convention of the host platform determines where in the host a snippet is emitted for a particular code section. Since the Knob control has a corresponding visual element, XAML code would also be emitted to the host’s main window view as per the UIELEMENT code section, as shown below.

<virtuoso:Knob

 x:Name="[instance name]" Canvas.Left="0" Canvas.Top="0" DataContext="{Binding [instance name]_ViewModel }" 

xmlns:virtuoso="http://www.virtuoso-software.com/ControlLibrary" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" />

The specific snippet to be emitted is evaluated at runtime when the host is being rendered, so the “[instance name]” above would be replaced with the actual instance name for the knob instance. The host platform code sections allow a component to emit code into any section as needed to realize the intended purpose of the declaration.

For MVVM, a component generally gets used in a host procedurally first by declaring the instance as a field or property of the host application’s main view model (INSTANTIATION), then constructing and initializing the actual component instance (INITIALIZATION), then executing code necessary to logically connect the component to other components as per the schematic’s netlist (CONNECTION), then finalizing the component (FINALIZATION). Since the Knob contains a visual element, the above XAML snippet would also be added to the host’s main view (UIELEMENT).

The declaration of the schematic design is “simultaneous”, in that for each code section, the component snippets are emitted into the section in no particular order. However, the code sections themselves do execute in a specific sequence at runtime based on the host platform. Even within the MVVM design pattern, there are multiple ways that the application as a whole can be assembled: In some cases, the view models are constructed first and the injected into the view as resolved dependencies, such as with Prism View Regions. In other cases, the views are constructed first and injected into the view model as resolved dependencies, such as with Microsoft’s WpfApplicationFramework.

Regardless of the implementation details of the host platform, in any implementation the host platform is responsible for providing the conventions by which a schematic design of components and connections can be realized. The figure below shows the host application design concept. The application is designed by defining a schematic of components and port connections in the schematic layer, which declaratively defines the logic of the application. Each schematic component may optionally have a corresponding visual element, which is conveyed on a separate visual layer.