Microsoft Expression Blend 4 Extensibility

Summary

 

Blend 4 and Visual Studio 2010 share a common set of extension points that will allow creators of custom controls, behaviors, and effects to author a rich design time-experience, using a shared set of APIs. In addition, the same set of APIs can also be used to target both WPF and Silverlight controls. So our goal is that you write your controls and design-time experience once, and they work in either product. We still recommend only using controls in Blend if the manufacturer has designed and more importantly tested those controls in Blend.

 

The most commonly used extension points are:

· Adorners for controls

o Adorners represents a FrameworkElement that decorates a UIElement. Adorners are added according to an AdornerProvider's policy. You can add a policy to an AdornerProvider by adding a UsesItemPolicyAttribute to the class definition.

· Custom context menus commands

o Defines a set of menu items that are shown in a context menu. Inherit from the ContextMenuProvider class when you want to add a context menu item to a particular context menu. By applying policies, such as the PrimarySelectionPolicy and the SelectionParentPolicy, you can control when the context menu provider is created.

· DesignModeValueProvider

o Captures property changes that are made by the user in the designer and provides new values at design time. When a user changes a property value of an object in the designer, that value is typically set on the object in the designer. By using the DesignModeValueProvider class, you can insert your own logic into this process. For example, although you want the user to be able to set the visible property of a control to false, the control should still be visible at design time.

· Default Initializers (Ability to set properties when controls are instantiated from the asset library)

o The DefaultInitializer extension is invoked when the user adds an object from the Toolbox to the design surface. Derive from the DefaultInitializer class to configure default initial values for your object. For example, you might add some default content to a button control or set a panel's width and height to a constant value, so that it does not collapse to zero size when it is added to the design surface. When created from the Toolbox, the element's property values appear in XAML view. (Note: Do not set default initial values in an element's constructor. The designer may not call your constructor, and in this case your default initial values are not set at design time. Instead, use the DefaultInitializer class or the ClearValue method to set default initial values. )

o

 

· All of the ModelItem features, such as selection and manipulation.

o Represents a single item in the editing model. The ModelItem class represents a single item in the editing model. An item can be anything from a window or a control down to a color or an integer. You may access the item’s properties through its Properties collection and make changes to the values of the properties. A ModelItem is essentially a wrapper around the designer’s underlying data model. You can access the underlying model through the GetCurrentValue method. Always use the CreateItem method to create new objects on the design surface. This is because many raw instances cannot be parsed into model items. Once a value is set in the model, you should only interact with it through the model. The instance backing the model can be rebuilt by the framework at any time, which invalidates any references you have cached.

· Property Window Extensibility

o Enables custom property editors to display in the Properties window. The Microsoft.Windows.Design.PropertyEditing namespace provides classes for implementing custom value editors for designers. Value editors are usually displayed in a designer's Properties window. The following list shows the base implementations for the commonly used value editors.

o PropertyValueEditor: An inline editor that is hosted in the same physical space as the view in the hosting Properties window.

o ExtendedPropertyValueEditor: An editor that is not normally hosted in-place. This is the equivalent of the drop-down style editor in the System.ComponentModel architecture.

o DialogPropertyValueEditor: An editor that is implemented in its own dialog box.

o

 

· Selection/object manipulation APIs

o A very rich API-set to manipulate the XAML for your controls (so you could set property values or add new content)

· Item templates:

o We support the same formats as Visual Studio, with some very minor modifications to suite our user experience. User project and item templates can be copied into C:\users\username\Documents\Expression\Blend 3\ProjectTemplates and \ItemTemplates respectively. Blend does not support wizards yet.

· The Blend Asset Library (this is similar to the toolbox in Visual Studio):

o Ability to register your custom controls. For example, to register a control library Foo.dll, all you need to do is to add the path to the control library as a value of the following registry key - HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Expression\Blend\v3.0\Toolbox\Silverlight\v3.0\MyCustomControlLibraryKey. If this were a WPF library, the key you would setup is HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Expression\Blend\v3.0\Toolbox\WPF\v3.5\MyCustomControlLibraryKey

o Adding an asset adds necessary assemblies to your project

o Support for custom control icons

o Setting custom properties on your control when they get instantiated - DefaultInitializer.

 

Blend Integration Example

 

Here (https://home.comcast.net/~unnir/samples/InkControl.zip) is a quick sample (WPF only though it would be very easy to port this as-is to Silverlight) that will allow you to get started on the following new extension points we have added to Blend. This sample demonstrates

a) How to specify metadata for your controls
b) How to use DefaultInitializer that allows you to set properties when a control in instantiated from the Blend asset library
c) How to use Custom context menus
d) How to create an adorner for the control

More on the Asset Library

In Blend 3, we completely re-designed the Asset Library which is still used now in Blend 4. Here are some of the highlights of the new asset library:

a) Categorization for various assets makes discoverability easier.

b) Searchability allows for quick location of an asset across categories like Controls, Effects and Behaviors.

c) Freely dockable anywhere in the UI. We also have left the popup mode unchanged for quick one-time access to assets.

d) Extensible - you can register your own assets that make it easy for inclusion into the projects on an on-demand basis. Adding an asset like a Control or a Behavior will add all necessary references required for the functioning of the project automatically.

e) List and Grid modes for the display of assets.

Registering your own library (or sets of libraries) in the asset tool is very simple. All you have to do is to setup a registry key that points to a folder containing the libraries. As an example, the Silverlight SDK registers itself into the Blend asset tool using the following key/value pair on a 64-bit machine:
Key: HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Expression\Blend\3.0\Toolbox\Silverlight\v3.0\Silverlight SDK Client Libraries
Value: c:\Program Files (x86)\Microsoft SDKs\Silverlight\v3.0\Libraries\Client\

For a WPF example, the following is the way the WPF ToolKit registers itself on a 32-bit machine:
Key: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Expression\Blend\3.0\Toolbox\WPF\v3.0\WPFToolkit
Value: C:\Program Files\WPF Toolkit\v3.5.40320.1

There are a few things you can customize around the display of assets:

The Icon: For supplying a custom icon, all you need to do is to add an image to the control library (preferably its design-time library that helps keep the size of the library small) that uses the namespace qualified name of the control for its name. For example, say you had a custom control Foo. The icon would be then called FoosNamespace.Foo.png. Few things to keep in mind: Use EmbeddedResource as the build item for the Image. Blend's asset library only supports PNGs. If you wanted a 24x24 and 12x12 version of icons (since we use these two standard sizes in various places of our UI), all you have to do is to name the PNGs as follows: FoosNamespace.Foo.SmallIcon.PNG, and FoosNamespace.Foo.LargeIcon.PNG. The SmallIcon/LargeIcon part don't actually matter - you can pick a string of your choice, and we will dynamically determine and pick up the appropriate icon for display.

Description: You can use the DescriptionAttribute to change the string that is displayed as a tooltip for the asset.

Asset Library availability: If you wanted to prevent a particular asset from being visble in the Asset Library, you could use the ToolBoxBrowsable attribute as a part of the metadata specification for that asset in the design-time library.

Location in the category hierarchy: Again done via a newly introduced attribute (ToolBoxCategoryAttribute) that you can supply via a design-time library.

.

Credits

Credits: Much of this content plagiarized from Unni’s Blog at https://blogs.msdn.com/b/unnir/

More information

For more on Expression Extensibility see

a) MSDN documentation - https://msdn.microsoft.com/en-us/library/bb546938.aspx

b) An overview of the extensibility as it works in VS - https://code.msdn.microsoft.com/DesignerExtensbility

Some other authoritative Blogs in this area include:

A) Karl Shifflet’s blog - https://karlshifflett.wordpress.com/2009/11/20/extensibility-series-wpf-silverlight-design-time-code-sharing-part-i/

B) Ning Zhang’s blog - https://www.ningzhang.org/2009/04/30/register-silverlight-controls-with-visual-studio-and-blend/

C) Justin Angel’s blog - https://blogs.silverlight.net/blogs/justinangel/archive/2008/11/17/silverlight-design-time-extensibility.aspx