Creating Flexible, Engaging, and Testable User
Interfaces for Autodesk Product Extensions
Henry Jackson Odeh Engineers, Inc.
CP2999 So youre building .NET add-ons for your Autodesk applications, such as AutoCAD or
Autodesk Revit software? This class will show you what you can do to take your applications to the
next level using the flexible and powerful Windows Presentation Foundation (WPF) framework from
Microsoft. Whether you're upgrading a Windows Forms app or just getting started with WPF, we will
cover the basics of the UI framework and the expressive XAML UI markup language. We will also cover
the Model View ViewModel (MVVM) pattern, which is a rapid, robust, and testable way of organizing
your code. Autodesk style and design guides will be covered along with how to integrate your
applications into product ribbons. Examples will be in C#, but XAML and the principles of WPF and
MVVM also apply to VB.NET development. Prior experience with Windows Forms or WPF is not
required.
Learning Objectives
At the end of this class, you will be able to:
Describe .NET's WPF framework classes and APIs
Take full advantage of the XAML markup language to create flexible and dynamic UIs
Implement the MVVM design pattern to create robust and testable UI code
Use the Autodesk style guides and API to integrate UIs with the main application
About the Speaker
Henry Jackson is an engineer and software developer with a passion for creating engaging
applications and tools using Microsoft's .NET technology. He has a background in structural
engineering and uses that expertise to create software for structural analysis, project
coordination, and structure visualization. At Odeh Engineers, Inc., a leading structural
engineering firm with a commitment to using BIM and cutting edge technology, Henry has
developed many extensions for Revit Structure to facilitate rapid and reliable structural design
and analysis.
Henry can be reached at
[email protected] Creating Flexible, Engaging, and Testable User Interfaces for Autodesk Product Extensions
2
Introduction
This class attempts to provide an introduction to creating user interfaces with Microsofts
Windows Presentation Foundation (WPF) framework. We will dive deeply to show how to use
WPF in realistic situations. We wont have time to cover every UI element available in the
framework or every feature of the runtime, but the goal is to give you an overall orientation of
WPF so that you can learn more and implement it in your own projects.
One of the most significant aspects to learning about WPF is being comfortable with the XML-
based markup language XAML (Extensible Application Markup Language), which is used to
build UIs, create styles, configure data binding, and more. In addition to being widely used in
WPF, XAML is now used in other Microsoft frameworks including the new Windows 8 runtime.
Finally, the class covers the Model View ViewModel design pattern that meshes nicely with
WPFs data binding and separation of concerns. MVVM is a more advanced technique and is
not required to create successful WPF application, but it provides some distinct advantages and
including it will constitute the most advanced portion of the class.
Its also important to acknowledge that our applications dont exist in a vacuum: software is
developed to tie into an existing ecosystem (e.g. an Autodesk product, Microsoft Windows, etc.).
The class will cover some best-practices for getting an application to fit in with its environment.
This includes the making the application look and feel as if it belongs and creating a design that
doesnt surprise or confuse the user.
Windows Presentation Foundation
WPF is an extensive framework developed and maintained by Microsoft for .NET UI
development. It represents advances over Windows Forms in a number of ways, including more
flexible styling and templating, super-easy animation, advanced data binding capabilities, the
XAML GUI markup language, and many others. WPF was ported to the web and Windows
Phone development as Silverlight, and XAML is now also being used by some of the new
Windows 8 development kits.
Controls / Elements
WPF ships with a large number of built-in controls that cover a wide range of UI uses, from
simple buttons and checkboxes to more complex elements like DataGrid and a Ribbon control.
Each new release of .NET includes more built-in controls.
There are also a few generic controls like Window and UserControl that can be subclassed by
the user to create a composite layout. (Generally, a developer will subclass Window to set up
the entire layout for a single UI window and subclass UserControl to create a reusable
composite control that can be used elsewhere.)
Other than subclassing Window and UserControl, its generally not required to subclass
controls or create new controls from scratch. WPF includes powerful styles and templates
capabilities that for the most part eliminate the requirement to create new classes.
Creating Flexible, Engaging, and Testable User Interfaces for Autodesk Product Extensions
3
Most of the built-in controls can be found in the System.Windows.Controls namespace, and
browsing the MSDN documents will give you a good sense of the included elements:
http://msdn.microsoft.com/en-us/library/system.windows.controls.aspx
Microsoft also publishes a collection of extra UI elements in their WPF Toolkit:
http://wpftoolkit.codeplex.com. The WPF toolkit is a sort of testing ground for Microsofts WPF
UI team, and some of the controls are eventually rolled into the regular .NET release.
Extensible Application Markup Language
XAML was created for building WPF UIs in a natural way. Its not strictly required for building
WPF UIsyou can do all the same things in code if you desirebut it provides a nice way to
structure the UI markup. XAML is declarative: i.e. it describes how the UI will end up, not the
steps required to assemble it. XAML also has the advantages of being source-control friendly
(its just text and so changes can be merged) and its easy for design tools like Microsofts
Expression Blend to work with a XAML file.
The extra materials zip file available for this class includes a C# project called
FirstNameLastNameWindow that creates a simple window shown below:
The window is created by the class MainWindow, which is a subclass of Window. The file is
created with two files, MainWindow.cs (called code-behind) and MainWindow.cs.xaml (the
XAML markup). Each of these files creates a portion of the MainWindow class (theyre both
declared as partial classes) which are combined to form a single class. This separation of code
and GUI markup is not unique to XAML but provides some nice features: e.g. it lets designers
and developers each work on a class without stepping on each others toes. It also allows for an
obvious separation of concerns between the view layout and the logic. As well talk about later
in the MVVM section, most of the code in the code-behind file can actually be moved even
further away from the view with the use of data binding, but code-behind provides an easy way
to work with the UI. E.g., code-behind can be used to handle events from the UI, update
elements using fields, etc.
Creating Flexible, Engaging, and Testable User Interfaces for Autodesk Product Extensions
4
In addition to using XAML to build user interfaces, its possible to create a Resource Dictionary,
which is a set of styles and common resources that can be used elsewhere. Resource
Dictionaries make it easy to give many different windows a common set of styles, for example.
They can also be swapped out at runtime to offer different application themes. This class wont
cover Resource Dictionaries, however.
Data Binding
Data binding provides a way to keep any two data-related items in sync. Its usually used to
keep a UI up-to-date with a backing data model, but it can also be used to bind different UI
elements together.
Binding can be done in code or using XAML. XAML is the preferred way of doing UI data
bindings, since it lets you declare the use of a UI element without getting bogged down in the
details of how its kept up-to-date. WPF and XAML have many options for setting up bindings,
including the direction, timing, conversion, etc.
MSDN has a good article that covers data binding in WPF: http://msdn.microsoft.com/en-
us/library/ms752347.aspx
The BindingDemo C# project in the course material also has several examples of data binding
between different UI elements.
What to Bind To
WPFs data binding needs to be able to watch a property for changes, so in order to create a
working data binding source you will have to use one of these techniques:
INotifyPropertyChanged is an interface that you can implement on a data binding
source. Your implementation must raise the PropertyChanged event whenever one of
your properties has changed. The PersonFilterExample C# example uses this
technique since it is relatively straightforward.
Dependency Properties are a more advanced and robust way of creating
watchable properties. This class wont cover them, but MSDN has extensive
documentation: http://msdn.microsoft.com/en-us/library/ms752914.aspx . Most of the
built-in WPF elements use Dependency Properties.
To bind to a collection (e.g. to have the items in a listbox populated
automatically), you should use a collection that implements INotifyCollectionChanged,
which raises events when the collection has changed. One common built-in collection
that implements this interface is ObservableCollection<T>.
IValueConverter
Value converters are a way of using data binding with different types. E.g. you can use value
converters to bind a string to a number; the converter specifies the relationship between the two
values. WPF comes with a few built-in converters, or you can write your own to do custom
Creating Flexible, Engaging, and Testable User Interfaces for Autodesk Product Extensions
5
conversions. The BindingDemo includes an example of how to bind a double and a colored
brush, for coloring a label.
Model View ViewModel
The Model View ViewModel pattern is a way of structuring code in order to clarify and simplify
maintenance of applications. MVVM divides code into three categories:
Model: this is the data part of the application. This would include databases, business logic, or
other data-focused code. It should be entirely view-agnostic and reusable across various
projects.
View: this is the part of the application that the user sees, e.g. windows, GUI elements. The bulk
of the view is done with XAML.
ViewModel: the ViewModel is a special type of object that is a model of the view. Typically
you have one ViewModel for each View. The ViewModel has properties for all the elements
displayed in the View, so that the View can bind to it. For example, if the view has a TextBox,
the ViewModel would have a corresponding string field. The ViewModel takes care of interfacing
with the View and the Model by sorting and aggregating the information in the Model in a way
that is useful for the View. This is important because there is not always a 1-to-1 relationship
between View code and Model code. E.g. a View might show information from several Model
classes, and its the job of the ViewModel to organize that information and expose it in a logical
fashion. The View can then bind directly to the ViewModels properties.
There are several advantages to using a ViewModel:
It makes it easy to use XAML binding to keep the View up-to-date. Without the ViewModel
intermediary layer, it is difficult to use data binding except in trivial cases.
Using a ViewModel gets all business logic code out of the UI classes, which is good for
portability and code maintenance.
The ViewModel is an ideal place to do automated testing, since it exposes exactly the same
data as the View but without any GUI elements.
The PersonFilterExample C# solution in the extra class materials includes an example of using
a ViewModel with the MVVM pattern. The MSDN Magazine also has an in-depth article covering
MVVM: http://msdn.microsoft.com/en-us/magazine/dd419663.aspx.
.NET also includes the Microsoft.TeamFoundation.MVVM namespace (in
Microsoft.TeamFoundation.Controls.dll) that include several classes that are designed to help
MVVM development. None of them are required to build a MVVM app, but perusing the
namespace may be helpful: http://msdn.microsoft.com/en-
us/library/microsoft.teamfoundation.mvvm.aspx. One notable inclusion is the RelayCommand
class, which is mentioned in the following ICommand section.
Creating Flexible, Engaging, and Testable User Interfaces for Autodesk Product Extensions
6
ICommand
The ICommand interface can be used for binding action UI elements (e.g. buttons, hyperlinks,
menu items) to an action in the ViewModel. This avoids using Click event handlers and lets all
the business logic stay in the ViewModel or Model.
WPF ships with several built-in Commands (e.g. Save, Open) but you will almost certainly want
to create your own commands. The easiest way to do that is to create a reusable ICommand
implementation. The Microsoft.TeamFoundation.MVVM namespace includes a RelayCommand
class. The PersonFilterExample C# solution in the extra class materials also includes a
sample RelayCommand implementation.
UI Design for Non-Designers
Its important to design applications that are as intuitive and natural for users as possible. One
easy way to do that, particularly if you are not a UI designer, is to follow UI conventions.
Microsoft and Autodesk both have published detailed UI layout guides to help follow
conventions:
Microsoft Layout Guide: http://msdn.microsoft.com/en-
us/library/windows/desktop/aa511279.aspx
Autodesk Revit User Interface Guidelines:
http://wikihelp.autodesk.com/Revit/enu/2013/Help/00006-API_Developer's_Guide/0170-
Appendic170/0206-API_User206
Product Ribbons
Integrating with product ribbons may be a natural way to follow existing UI conventions and let
your users easily work with your software.
The Revit SDK includes sample code for how to add an application to the Ribbon:
http://usa.autodesk.com/adsk/servlet/index?siteID=123112&id=2484975
AutoCAD also lets you add new tabs to the product ribbon: http://through-the-
interface.typepad.com/through_the_interface/2008/04/the-new-ribbonb.html
