{"id":1267,"date":"2023-11-01T19:35:44","date_gmt":"2023-11-01T18:35:44","guid":{"rendered":"https:\/\/easyrevitapi.com\/?p=1267"},"modified":"2024-04-29T10:29:23","modified_gmt":"2024-04-29T08:29:23","slug":"m-v-vm-pattern-for-revit-part-2","status":"publish","type":"post","link":"https:\/\/easyrevitapi.com\/index.php\/2023\/11\/01\/m-v-vm-pattern-for-revit-part-2\/","title":{"rendered":"M-V-VM Pattern for Revit, part 2"},"content":{"rendered":"\n

As a Revit API developer, the M<\/mark>odel-V<\/mark>iew-V<\/mark>iewM<\/mark>odel pattern is essential to learn if you’re looking to build more complex and scalable add-ins. In the first article<\/a> of this three-part series, I have presented this pattern’s main principles and key points. I propose now to share an M-V-VM based implementation I use for making Revit Add-ins.<\/p>\n\n\n\n

In this second article, we will build a simple add-in to explain the M-V-VM key concepts in a clear way. We will focus on how to set up the add-in’s main structure, and how to make the View<\/strong><\/mark> layer displays the data processed by the Model<\/strong><\/mark> layer. The third and final part to come will focus on how to collect and process the user’s input using M-V-VM.<\/p>\n\n\n\n

We will use Visual Studio, C#, the XAML markup language and the WPF framework. If you are completely new to Revit’s add-in development, I would recommend you first watch the Revit + WPF tutorial series<\/a> by Abderrahmane Mazri<\/a>. They provide a clear explanation about how to set up a Revit add-in project. <\/p>\n\n\n\n

The entire project setup used in this series can be retrieved on GitHub<\/a>.
<\/p>\n\n\n\n

Setting up the add-in’s main parts<\/h4>\n\n\n\n

Let’s start by introducing the context of our add-in project. In Revit, an element has multiple parameters, each of them being either a family, type, or instance parameter. For updating a wall’s width, for example, you need to update the wall’s type which holds this property.<\/p>\n\n\n\n

We want to build a simple add-in that retrieves the width of each of the wall types available in a Revit project file. It should display these types to the users for selection, and then return the related width. <\/p>\n\n\n\n

We start by creating our add-in’s project in Visual Studio, and set the following structure :

<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The ExternalCommand <\/mark>class enables our add-in to communicate with the Revit software. Its ExternalCommand.Execute()<\/mark> method is our add-in’s entry point. It is the place where the Revit API provides us with the data contained in the Revit project file.<\/p>\n\n\n\n

Within this method, we will later retrieve the Document <\/mark>class. It contains the Revit project data, and more specifically, the Revit project wall types we need. Therefore, the Document <\/mark>class belongs to the Model<\/strong> layer<\/span>. <\/p>\n\n\n\n

As its name suggests, the ViewModel<\/mark> class represents the intermediate layer between the Model <\/strong><\/mark>and the View<\/strong><\/mark>. It will reference the data stored in the Document<\/mark> object, which it will present to the add-ins’ window for display.<\/p>\n\n\n\n

Finally, we create a WPF window named MainWindow<\/mark>, composed of both a XAML file and a C# file (code behind)<\/em>. Both of these files logically belong<\/span><\/span> to the View <\/strong>layer.<\/span><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

We want to keep this window very simple. It contains a combo box control for displaying the available wall types, a button for confirming and processing the selection and a label that displays the returned wall type’s width. <\/p>\n\n\n\n

Defining the add-in’s main layout<\/h4>\n\n\n\n

So far we have defined and created the add-in’s main components. We have described three classes, each belonging to a different layer of the M-V-VM pattern. Yet, no links have been set between them for the information to be exchanged. <\/p>\n\n\n\n

How would the ViewModel <\/mark>object retrieve and store the wall types from the Document <\/mark>object ? And how would they be transmitted from the ViewModel <\/mark>to the WPF window ? <\/p>\n\n\n\n

We can use the object-oriented concept of aggregation<\/span> to set up the links between these objects. Aggregation means that an object A<\/mark> (the container)<\/em> “has” or “owns” an object B<\/mark> (the part)<\/em>. Object A<\/mark> can therefore exploit the data or the functionality implemented by object B<\/mark>. <\/p>\n\n\n\n

The following graphic shows how our add-in could be structured using the aggregation<\/span> concept :<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Following this principle we define the MainWindow<\/mark> object as a container for the ViewModel<\/mark> object, storing it in its _viewModel <\/mark>field. Our Window will then exploit the states of the ViewModel<\/mark> <\/strong>object by displaying them to the user.<\/p>\n\n\n\n

The ViewModel <\/mark>object by itself is a container to the Document<\/mark> object. This way it will retrieve and store the data contained within our Revit project, before providing it to the add-in’s WPF window.<\/p>\n\n\n\n

By making the MainWindow <\/mark>the principal container, we establish a simple layout that allows the user to visualise and interact with the data contained in the Revit project file.<\/p>\n\n\n\n

Let’s now dive into the code of each class to better understand the details of the implementation :<\/p>\n\n\n\n



The MainWindow class<\/strong> (the window’s C# code behind)<\/em><\/p>\n\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
namespace<\/span> <\/span>WallTypesDisplayer<\/span><\/span>\n{<\/span><\/span>\n    <\/span>public<\/span> <\/span>partial<\/span> <\/span>class<\/span> <\/span>MainWindow<\/span> : <\/span>Window<\/span><\/span>\n    {<\/span><\/span>\n        <\/span>private<\/span> <\/span>ViewModel<\/span> _viewModel;<\/span><\/span>\n<\/span>\n        <\/span>public<\/span> <\/span>ViewModel<\/span> ViewModel { <\/span>get<\/span> { <\/span>return<\/span> <\/span>_viewModel<\/span>; } }<\/span><\/span>\n<\/span>\n        <\/span>public<\/span> <\/span>MainWindow<\/span>(<\/span>ViewModel<\/span> vModel)<\/span><\/span>\n        {<\/span><\/span>\n            <\/span>InitializeComponent<\/span>();<\/span><\/span>\n<\/span>\n            <\/span>this<\/span>.<\/span>_viewModel<\/span> <\/span>=<\/span> <\/span>vModel<\/span>;<\/span><\/span>\n            <\/span>DataContext<\/span> <\/span>=<\/span> <\/span>this<\/span>.<\/span>_viewModel<\/span>;<\/span><\/span>\n        }<\/span><\/span>\n    }<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
In its constructor, the MainWindow <\/mark>class establishes the aggregation link with the ViewModel <\/mark>object and defines it as its DataContext<\/span>. The data context means the source of the data displayed by the window.<\/p>\n\n\n\n


The ViewModel class<\/strong> <\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
namespace<\/span> <\/span>WallTypesDisplayer<\/span>.<\/span>ProjectViewModel<\/span> <\/span><\/span>\n{<\/span><\/span>\n    <\/span>public<\/span> <\/span>class<\/span> <\/span>ViewModel<\/span><\/span>\n    {<\/span><\/span>\n        <\/span>private<\/span> <\/span>Document<\/span> _revitDocument;<\/span><\/span>\n        <\/span>public<\/span> <\/span>Document<\/span> RevitDocument <\/span><\/span>\n        {<\/span><\/span>\n            <\/span>get<\/span> { <\/span>return<\/span> <\/span>_revitDocument<\/span>; }<\/span><\/span>\n            <\/span>set<\/span> { <\/span>_revitDocument<\/span> <\/span>=<\/span> <\/span>value<\/span>; }     <\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        <\/span>public<\/span> <\/span>ViewModel<\/span>(<\/span>Document<\/span> rvtDocument)<\/span><\/span>\n        {<\/span><\/span>\n            <\/span>this<\/span>.<\/span>RevitDocument<\/span> <\/span>=<\/span> <\/span>rvtDocument<\/span>;<\/span><\/span>\n        }<\/span><\/span>\n    }<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
The ViewModel <\/mark>class uses its constructor to establish the aggregation link with the Document <\/mark>object.<\/p>\n\n\n\n


The ExternalCommand<\/strong> class<\/strong> (entry point of the Add-in)<\/em>
<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
namespace<\/span> <\/span>WallTypesDisplayer<\/span><\/span>\n{<\/span><\/span>\n    [<\/span>TransactionAttribute<\/span>(<\/span>TransactionMode<\/span>.<\/span>Manual<\/span>)]<\/span><\/span>\n    <\/span>public<\/span> <\/span>class<\/span> <\/span>ExternalCommand<\/span> : <\/span>IExternalCommand<\/span><\/span>\n    {<\/span><\/span>\n        <\/span>public<\/span> <\/span>Result<\/span> <\/span>Execute<\/span>(<\/span>ExternalCommandData<\/span> commandData, <\/span>ref<\/span> <\/span>string<\/span> message, <\/span>ElementSet<\/span> elements)<\/span><\/span>\n        {<\/span><\/span>\n            <\/span>Document<\/span> revitDocument <\/span>=<\/span> <\/span>commandData<\/span>.<\/span>Application<\/span>.<\/span>ActiveUIDocument<\/span>.<\/span>Document<\/span>;<\/span><\/span>\n            <\/span>ViewModel<\/span> viewModel <\/span>=<\/span> <\/span>new<\/span> <\/span>ViewModel<\/span>(<\/span>revitDocument<\/span>);<\/span><\/span>\n            <\/span>MainWindow<\/span> mainView <\/span>=<\/span> <\/span>new<\/span> <\/span>MainWindow<\/span>(<\/span>viewModel<\/span>);<\/span><\/span>\n            <\/span><\/span>\n            <\/span>mainView<\/span>.<\/span>ShowDialog<\/span>();          <\/span><\/span>\n            <\/span>return<\/span> <\/span>Result<\/span>.<\/span>Succeeded<\/span>;<\/span><\/span>\n        }<\/span><\/span>\n    }<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Once we have defined the MainWindow <\/mark>and ViewModel <\/mark>classes, we instantiate them following the aggregation principle within the add-in’s entry point and launch the add-in’s window. As a reminder, commandData <\/mark>is the object containing all the data provided by the Revit API.<\/p>\n\n\n\n

<\/p>\n\n\n\n
Filtering and displaying the wall types<\/h4>\n\n\n\n
Now that we set up the add-in’s main layout, we need to display the Revit project’s wall types in the windows’s combo box. Therefore, we need to figure out two things : how to extract a list of the wall types from the Document<\/mark> class (Model<\/strong>), and how to link these types to the window’s combo box (View<\/strong>).<\/p>\n\n\n\n
We will first create a new class named DocumentTypesExtractor<\/mark> and implement a DocumentTypesExtractor.ExtractWallTypes()<\/mark> method. As its name indicates, it returns a list of WallType <\/mark>objects contained in a Document <\/mark>object. This class processes elements of the Revit project database and logically belongs to the Model<\/strong> layer.<\/p>\n\n\n\n
Following the add-in’s layout logic, we attribute a new field to the ViewModel <\/mark>class :  _revitDocumentWallTypes<\/mark>. This field will store the list of the WallType <\/mark>objects as returned by DocumentTypesExtractor.ExtractWallTypes()<\/mark>.

Finally, we will set a data binding<\/span> between the _revitDocumentWallTypes <\/mark>field and the window’s combo box. This will enable the window to read and display the collected wall types.<\/p>\n\n\n\n
We may then update our layout graphic as the following : <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Data binding in WPF<\/span> is a fundamental technique that establishes a connection between a WPF control (UI element) and a corresponding field in a class. Like a bridge, it allows the data to flow between these two elements for automated update and display. <\/p>\n\n\n\n
The layout graphic gives an overview of our add-in’s architecture and data flow. It shows how the Model<\/strong>, the ViewModel <\/strong>and the View <\/strong>communicate in order to retrieve, store and display the project’s wall types. <\/p>\n\n\n\n
Let’s now focus on the implementation details of our add-in’s update.

<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n
The DocumentTypesExtractor<\/strong> class<\/strong><\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
namespace<\/span> <\/span>WallTypesDisplayer<\/span>.<\/span>Model<\/span><\/span>\n{<\/span><\/span>\n    <\/span>public<\/span> <\/span>class<\/span> <\/span>DocumentTypesExtractor<\/span><\/span>\n    {<\/span><\/span>\n        <\/span>public<\/span> <\/span>static<\/span> <\/span>List<\/span><<\/span>WallType<\/span>> <\/span>ExtractWallTypes<\/span>(<\/span>Document<\/span> rvtDocument) <\/span><\/span>\n        {<\/span><\/span>\n            <\/span>IList<\/span><<\/span>Element<\/span>> documentWallTypes <\/span>=<\/span> <\/span>new<\/span> <\/span>FilteredElementCollector<\/span>(<\/span>rvtDocument<\/span>).<\/span>OfClass<\/span>(<\/span>typeof<\/span>(<\/span>WallType<\/span>)).<\/span>ToElements<\/span>();<\/span><\/span>\n            <\/span>return<\/span> <\/span>documentWallTypes<\/span>.<\/span>Cast<\/span><<\/span>WallType<\/span>>().<\/span>ToList<\/span>();        <\/span><\/span>\n        }<\/span><\/span>\n    }<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
To keep the implementation simple, we define DocumentTypesExtractor.ExtractWallTypes(<\/mark>) as a static method. This means we won’t need to instantiate a DocumentTypesExtractor<\/mark> object to execute it. <\/p>\n\n\n\n
Note that while the FilteredElementCollector <\/mark>class returns a list of Element <\/mark>objects, these elements are, in fact, of the WallType <\/mark>type. This aligns with the inheritance hierarchy in the Revit API : the WallType<\/mark> class is a specialized type that inherits from the more general Element <\/mark>class.<\/p>\n\n\n\n
To ensure the method’s return type accurately reflects this, a type cast<\/span> is used, explicitly converting the elements to WallType <\/mark>objects. This cast reinforces the method’s purpose and provides a clear and coherent representation of the data it retrieves<\/p>\n\n\n\n
<\/p>\n\n\n\n


The ViewModel class<\/strong> (Updated)<\/em><\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
namespace<\/span> <\/span>WallTypesDisplayer<\/span>.<\/span>ProjectViewModel<\/span> <\/span><\/span>\n{<\/span><\/span>\n    <\/span>public<\/span> <\/span>class<\/span> <\/span>ViewModel<\/span><\/span>\n    {<\/span><\/span>\n        <\/span>private<\/span> <\/span>Document<\/span> _revitDocument;<\/span><\/span>\n        <\/span>public<\/span> <\/span>Document<\/span> RevitDocument <\/span><\/span>\n        {<\/span><\/span>\n            <\/span>get<\/span> { <\/span>return<\/span> <\/span>_revitDocument<\/span>; }<\/span><\/span>\n            <\/span>set<\/span> { <\/span>_revitDocument<\/span> <\/span>=<\/span> <\/span>value<\/span>; }     <\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        <\/span>private<\/span> <\/span>List<\/span><<\/span>WallType<\/span>> _revitDocumentWallTypes;<\/span><\/span>\n        <\/span>public<\/span> <\/span>List<\/span><<\/span>WallType<\/span>> RevitDocumentWallTypes<\/span><\/span>\n        {<\/span><\/span>\n            <\/span>get<\/span> { <\/span>return<\/span> <\/span>_revitDocumentWallTypes<\/span>; }<\/span><\/span>\n            <\/span>set<\/span> { <\/span>_revitDocumentWallTypes<\/span> <\/span>=<\/span> <\/span>value<\/span>; }<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n<\/span>\n        <\/span>public<\/span> <\/span>ViewModel<\/span>(<\/span>Document<\/span> rvtDocument)<\/span><\/span>\n        {<\/span><\/span>\n            <\/span>this<\/span>.<\/span>RevitDocument<\/span> <\/span>=<\/span> <\/span>rvtDocument<\/span>;<\/span><\/span>\n            <\/span>this<\/span>.<\/span>RevitDocumentWallTypes<\/span> <\/span>=<\/span> <\/span>DocumentTypesExtractor<\/span>.<\/span>ExtractWallTypes<\/span>(<\/span>this<\/span>.<\/span>RevitDocument<\/span> );<\/span><\/span>\n        }<\/span><\/span>\n    }<\/span><\/span>\n}<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
We enhance the ViewModel <\/mark>class by introducing the _revitDocumentWallTypes <\/mark>field. Subsequently, we employ the class constructor to assign this field with the result obtained from the DocumentTypesExtractor.ExtractWallTypes()<\/mark> static method. This configuration retrieves the data from the Model <\/strong>and stores it in the VewModel <\/strong>while keeping the code simple. <\/strong><\/p>\n\n\n\n


<\/p>\n\n\n\n
The window’s XAML code<\/strong><\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<<\/span>Window<\/span> <\/span>x:Class<\/span>=<\/span>"WallTypesDisplayer.MainWindow"<\/span><\/span>\n             <\/span>xmlns<\/span>=<\/span>"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation"<\/span><\/span>\n             <\/span>xmlns:x<\/span>=<\/span>"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml"<\/span><\/span>\n             <\/span>xmlns:mc<\/span>=<\/span>"http:\/\/schemas.openxmlformats.org\/markup-compatibility\/2006"<\/span> <\/span><\/span>\n             <\/span>xmlns:d<\/span>=<\/span>"http:\/\/schemas.microsoft.com\/expression\/blend\/2008"<\/span> <\/span><\/span>\n             <\/span>xmlns:local<\/span>=<\/span>"clr-namespace:WallTypesDisplayer"<\/span><\/span>\n             <\/span>mc:Ignorable<\/span>=<\/span>"d"<\/span> <\/span><\/span>\n        <\/span><\/span>\n             <\/span>Height<\/span>= <\/span>"330"<\/span> <\/span><\/span>\n             <\/span>Width<\/span>=<\/span>"500"<\/span> <\/span><\/span>\n><\/span><\/span>\n    <\/span><<\/span>Grid<\/span>><\/span><\/span>\n        <\/span><<\/span>ComboBox<\/span> <\/span>ItemsSource<\/span> =<\/span>"{Binding RevitDocumentWallTypes}"<\/span> <\/span>DisplayMemberPath<\/span>=<\/span>"Name"<\/span> <\/span>HorizontalAlignment<\/span>=<\/span>"Left"<\/span> <\/span>Height<\/span>=<\/span>"19"<\/span> <\/span>Margin<\/span>=<\/span>"206,130,0,0"<\/span> <\/span>VerticalAlignment<\/span>=<\/span>"Top"<\/span> <\/span>Width<\/span>=<\/span>"232"<\/span>\/><\/span><\/span>\n        <\/span><<\/span>Label<\/span> <\/span>HorizontalAlignment<\/span>=<\/span>"Left"<\/span> <\/span>Height<\/span>=<\/span>"26"<\/span> <\/span>Margin<\/span>=<\/span>"206,163,0,0"<\/span> <\/span>VerticalAlignment<\/span>=<\/span>"Top"<\/span> <\/span>Width<\/span>=<\/span>"232"<\/span> <\/span>Foreground<\/span>=<\/span>"Black"<\/span> <\/span>FontWeight<\/span>=<\/span>"SemiBold"<\/span>\/><\/span><\/span>\n        <\/span><<\/span>Button<\/span> <\/span>Content<\/span>=<\/span>"Return type width"<\/span> <\/span>HorizontalAlignment<\/span>=<\/span>"Left"<\/span> <\/span>Height<\/span>=<\/span>"23"<\/span> <\/span>Margin<\/span>=<\/span>"202,242,0,0"<\/span> <\/span>VerticalAlignment<\/span>=<\/span>"Top"<\/span> <\/span>Width<\/span>=<\/span>"153"<\/span> <\/span>RenderTransformOrigin<\/span>=<\/span>"0.5,0.5"<\/span>><\/<\/span>Button<\/span>><\/span><\/span>\n        <\/span><<\/span>TextBlock<\/span> <\/span>HorizontalAlignment<\/span>=<\/span>"Left"<\/span> <\/span>Height<\/span>=<\/span>"19"<\/span> <\/span>Margin<\/span>=<\/span>"49,130,0,0"<\/span> <\/span>TextWrapping<\/span>=<\/span>"Wrap"<\/span> <\/span>VerticalAlignment<\/span>=<\/span>"Top"<\/span> <\/span>Width<\/span>=<\/span>"136"<\/span> <\/span>FontWeight<\/span>=<\/span>"DemiBold"<\/span>><<\/span>Run<\/span> <\/span>Text<\/span>=<\/span>"Document "<\/span>\/><<\/span>Run<\/span> <\/span>Language<\/span>=<\/span>"fr-fr"<\/span> <\/span>Text<\/span>=<\/span>"w"<\/span>\/><<\/span>Run<\/span> <\/span>Text<\/span>=<\/span>"all "<\/span>\/><<\/span>Run<\/span> <\/span>Language<\/span>=<\/span>"fr-fr"<\/span> <\/span>Text<\/span>=<\/span>"t"<\/span>\/><<\/span>Run<\/span> <\/span>Text<\/span>=<\/span>"ypes"<\/span>\/><<\/span>Run<\/span> <\/span>Text<\/span>=<\/span>" :"<\/span>\/><\/<\/span>TextBlock<\/span>><\/span><\/span>\n        <\/span><<\/span>TextBlock<\/span> <\/span>HorizontalAlignment<\/span>=<\/span>"Left"<\/span> <\/span>Height<\/span>=<\/span>"45"<\/span> <\/span>Margin<\/span>=<\/span>"45,30,0,0"<\/span> <\/span>TextWrapping<\/span>=<\/span>"Wrap"<\/span> <\/span>VerticalAlignment<\/span>=<\/span>"Top"<\/span> <\/span>Width<\/span>=<\/span>"294"<\/span> <\/span>FontSize<\/span>=<\/span>"28"<\/span> <\/span>FontWeight<\/span>=<\/span>"Light"<\/span>><<\/span>Run<\/span> <\/span>Text<\/span>=<\/span>"W"<\/span>\/><<\/span>Run<\/span> <\/span>Text<\/span>=<\/span>"all"<\/span>\/><<\/span>Run<\/span> <\/span>Text<\/span>=<\/span>" types"<\/span>\/><<\/span>Run<\/span> <\/span>Text<\/span>=<\/span>" "<\/span>\/><<\/span>Run<\/span> <\/span>Language<\/span>=<\/span>"fr-fr"<\/span> <\/span>Text<\/span>=<\/span>"width"<\/span>\/><\/<\/span>TextBlock<\/span>><\/span><\/span>\n        <\/span><<\/span>TextBlock<\/span> <\/span>HorizontalAlignment<\/span>=<\/span>"Left"<\/span> <\/span>Height<\/span>=<\/span>"18"<\/span> <\/span>Margin<\/span>=<\/span>"49,168,0,0"<\/span> <\/span>TextWrapping<\/span>=<\/span>"Wrap"<\/span> <\/span>VerticalAlignment<\/span>=<\/span>"Top"<\/span> <\/span>Width<\/span>=<\/span>"136"<\/span> <\/span>FontWeight<\/span>=<\/span>"DemiBold"<\/span>><<\/span>Run<\/span> <\/span>Text<\/span>=<\/span>"Wall "<\/span>\/><<\/span>Run<\/span> <\/span>Language<\/span>=<\/span>"fr-fr"<\/span> <\/span>Text<\/span>=<\/span>"t"<\/span>\/><<\/span>Run<\/span> <\/span>Text<\/span>=<\/span>"ype"<\/span>\/><<\/span>Run<\/span> <\/span>Text<\/span>=<\/span>" width "<\/span>\/><<\/span>Run<\/span> <\/span>Text<\/span>=<\/span>"(mm)"<\/span>\/><<\/span>Run<\/span> <\/span>Text<\/span>=<\/span>" "<\/span>\/><<\/span>Run<\/span> <\/span>Text<\/span>=<\/span>":"<\/span>\/><\/<\/span>TextBlock<\/span>><\/span><\/span>\n<\/span>\n    <\/span><\/<\/span>Grid<\/span>><\/span><\/span>\n<\/<\/span>Window<\/span>><\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
As we’ve seen previously, the add-in’s window is linked to the ViewModel <\/mark>object by specifying it as its data context<\/span> (in the windows’s code behind), and by using a data binding<\/span> link. More precisely, the window’s combo box should display the content of the ViewModel<\/mark>‘s _revitDocumentWallTypes <\/mark>field.<\/p>\n\n\n\n
The data binding is made possible by assigning the value “{Binding RevitDocumentWallTypes}”<\/mark> to the ItemsSource <\/mark>property in the ComboBox markup. Note that in WPF, the windows’s data is always bound to a class’ public property. RevitDocumentWallTypes<\/mark> is here a reference to the ViewModel<\/mark>.RevitDocumentWallTypes <\/mark>public property, which by itself encapsulates the ViewModel<\/mark>._revitDocumentWallTypes <\/mark>private field.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Finally, a WallType <\/mark><\/mark>object by itself is composed of multiple data layers. Therefore, we need to inform the window which of these layers is to be displayed. In this case, we want to show the user the names of the available wall types, and will attribute the value “Name”<\/mark>, a string type<\/span> property of the WallType<\/mark><\/mark> class, to the combo box’s DisplayMemberPath<\/mark> property.<\/p>\n\n\n\n
Having set this implementation, our add-in’s window will display the Revit project’s available wall types in its combo box.<\/p>\n\n\n\n
Conclusion<\/h4>\n\n\n\n
In this second article part, we’ve explored the implementation of the M-V-VM pattern fundamental principles for Autodesk Revit add-in development. We’ve detailed the design choices and focused on the data flow from the Model to the ViewModel and the View.<\/p>\n\n\n\n
In the upcoming third and final part of this series, we’ll focus on user interaction. We’ll see how users can select their desired wall type, how this choice is processed, and how the result is presented. Hopefully, you will have an  overall view about the basic implementation of the MVVM pattern for making Revit add-ins. Stay tuned \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"
As a Revit API developer, the Model-View-ViewModel pattern is essential to learn if you’re looking to build more complex and scalable add-ins. In the first article of this three-part series, I have presented this pattern’s main principles and key points. I propose now to share an M-V-VM based implementation I use for making Revit Add-ins. […]<\/p>\n","protected":false},"author":1,"featured_media":1819,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-1267","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-design"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/easyrevitapi.com\/index.php\/wp-json\/wp\/v2\/posts\/1267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/easyrevitapi.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/easyrevitapi.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/easyrevitapi.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/easyrevitapi.com\/index.php\/wp-json\/wp\/v2\/comments?post=1267"}],"version-history":[{"count":309,"href":"https:\/\/easyrevitapi.com\/index.php\/wp-json\/wp\/v2\/posts\/1267\/revisions"}],"predecessor-version":[{"id":1813,"href":"https:\/\/easyrevitapi.com\/index.php\/wp-json\/wp\/v2\/posts\/1267\/revisions\/1813"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/easyrevitapi.com\/index.php\/wp-json\/wp\/v2\/media\/1819"}],"wp:attachment":[{"href":"https:\/\/easyrevitapi.com\/index.php\/wp-json\/wp\/v2\/media?parent=1267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/easyrevitapi.com\/index.php\/wp-json\/wp\/v2\/categories?post=1267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/easyrevitapi.com\/index.php\/wp-json\/wp\/v2\/tags?post=1267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}