WEBfactory 2010

After adding the Expression.Design project to the solution, the most important part is the referencing the right DLL files. In order for the Property Browser to work, add the following references to the new Expression.Design project:

The new references added to SilverlightControlLibrary.Expression.Design

Next, in the SilverlightControlLibrary.Expression.Design project, we need to create two Classes: CustomAttributeTableBuilder.cs and MetadataRegistration.cs. Right-click on the SilverlightControlLibrary.Expression.Design project and select Add > Class.... Add the two required classes. The already existing class Class1.cs can be deleted.

First we must specify the usings:

using System;
using System.ComponentModel;
using Microsoft.Windows.Design.Metadata;
using Microsoft.Windows.Design.PropertyEditing;
using WFDesignExtensions;

Make the CustomAttributeTableBuilder class internal and inherit the AttributeTableBuilder base class:

internal class CustomAttributeTableBuilder : AttributeTableBuilder
{
}

Create the CustomAttributeTableBuilder internal constructor that will hold the property browsers:

internal CustomAttributeTableBuilder()
{
}

Add the SignalName property browser in the constructor:

internal CustomAttributeTableBuilder()
{
    this.AddMemberAttributes(typeof(SampleControl), "SignalName",
        new DescriptionAttribute("Gets or sets the signal name."),
        new DisplayNameAttribute("SignalName"),
        new CategoryAttribute("Sample Category"),
        new PropertyOrderAttribute(PropertyOrder.Default),
        PropertyValueEditor.CreateEditorAttribute(typeof(SignalBrowserEditor)));
}

Now create the AddMemberAttributes method and declare the type attributes:

private void AddMemberAttributes(Type type, string memberName, params Attribute[] attribs)
{
    base.AddCallback(type, builder => builder.AddCustomAttributes(memberName, attribs));
}

Also create the AddTypeAttributes method and declare the member attributes:

private void AddTypeAttributes(Type type, params Attribute[] attribs)
{
    base.AddCallback(type, builder => builder.AddCustomAttributes(attribs));
}

Replace the existing usings with the following:

using Microsoft.Windows.Design.Metadata;

Declare the assembly:

[assembly: ProvideMetadata(typeof(SilverlightControlLibrary.Expression.Design.MetadataRegistration))]

Make the MetadataRegistration class public and inherit the IProvideAttributeTable base class:

public class MetadataRegistration : IProvideAttributeTable
{
}

Declare a private attributeTable variable of AttributeTable type:

private AttributeTable attributeTable;

Create the public AttributeTable method that will create a new attribute table if none exists:

public AttributeTable AttributeTable
{
    get
    {
        if (attributeTable == null)
        {
            attributeTable = new CustomAttributeTableBuilder().CreateTable();
        }
        return attributeTable;
    }
}

Build the solution. After the build is complete, we need to copy some dll files from the build directories in a standard folder structure, that will be recognized by Expression Blend:

From the SilverlightControlLibrary/Bin/Debug copy the SilverlightControlLibrary.dll file to another folder of your choice.

From the SilverlightControlLibrary.Expression.Design/Bin/Debug copy SilverlightControlLibrary.Expression.Design.dll, WFDesignExtensions.dll and WFDesignExtensions.PropertyEditorsMwd40.dll and paste them in a folder named Design, inside the folder where SilverlightControlLibrary.dll is.

In order to use the control and its property browsers in a Expression Blend project, you will need to reference the SilverlightControlLibrary.dll file. The dll files inside the Design folder will be automatically recognized by Expression Blend and used appropriately.