Posted by: Cirilo Meggiolaro | 03/29/2009

Tip of the day #166 – Setting the look and feel for WWF custom activities

Tip #165 demonstrated how to create custom activities that you may use on your Windows Workflow Foundation (WWF) workflows.

Sometimes is hard to find a specific custom activity when you work with large and several activities in a workflow because of its default color, icon and so on. Let’s take a look today how to improve the look and feel of a custom activity. We are going to use the same project we created on Tip #165 so if you haven’t created your custom activity yet is a good time to create it.

How to..

Add a toolbox icon

  • Open the Activity Library project;
  • Include a bitmap icon to your Activity Library project;
  • Change the bitmap’s Build Action property on Properties window to Embedded Resource;
  • Open the code for the custom activity by right-clicking the activity file and select View Code;
  • Add the ToolboxBitmap attribute to your activity class passing as parameter the activity class

[ToolboxBitmap(typeof(ConsoleWriteLineActivity), “ImageName”)]

  • Compile the project. You’ll see that the icon is displayed on both the toolbox and the workflow’s activity. If you can’t view, check if the image is a bitmap and if it is in the root level of your project.
Picture 1 - The custom activity in the toolbox

Picture 1 - The custom activity in the toolbox

Set colors and borders

Create a new class classed ConsoleWriteLineActivityDesigner;

This class will inherit from the ActivityDesigner class that is our start point for our custom design;

public class ConsoleWriteLineActivityDesigner : ActivityDesigner
{ }

Create a new class called ConsoleWriteLineActivityDesignerTheme. This class is responsible for setting the drawing properties and will inherit from the ActivityDesignerTheme class;

public class ConsoleWriteLineActivityDesignerTheme : ActivityDesignerTheme
{ }

Now let’s link our designer class to the theme class by adding the ActivityDesignerThemeAttribute to the designer class. Your designer class must be similar to the following:

[ActivityDesignerTheme(typeof(ConsoleWriteLineActivityDesignerTheme))]
public class ConsoleWriteLineActivityDesigner : ActivityDesigner

{ }

Create a class constructor for the designer theme class that accepts a WorkflowTheme object as parameter and sends this parameter to the base class:

public ConsoleWriteLineActivityDesignerTheme(WorkflowTheme theme)
: base(theme)
{ }

Since you have added the constructor to the designer theme class you may define the drawing properties value inside the constructor. The following properties are available:

  • Color BackColorEnd: Gets or sets the System.Drawing.Color to end with when using a color gradient for the background color;
  • Color BackColorStart: Gets or sets the starting color of the background when using a color gradient on the background;
  • LinearGradientMode BackgroundStyle: Gets or sets the background style;
  • Font BoldFont: Gets the font for the theme;
  • Color BorderColor: Gets or sets the BorderColor for the theme;
  • Pen BorderPen: Gets the BorderPen for the theme;
  • DashStyle BorderStyle: Gets or sets the style used for the border;
  • int BorderWidth: Gets the width of the border in pixels;
  • DesignerGeometry DesignerGeometry: Gets the geometry of the designer;
  • Image DesignerImage: Gets the image associated with the designer;
  • string DesignerImagePath: Gets or sets the image path for the designer;
  • Font Font: Gets the font of the text used by the theme;
  • Color ForeColor: Gets or sets the color of the foreground;
  • Brush ForegroundBrush: Gets the Brush object associated with the theme;
  • Pen ForegroundPen: Gets the Pen used for painting the foreground of the theme;
  • Size ImageSize: Gets the size of the image of the theme;
  • Size Size: Gets the size of the designer.

The following code snippet shows some properties being defined inside the designer theme class:

public ConsoleWriteLineActivityDesignerTheme(WorkflowTheme theme)
: base(theme)
{
    this.BackgroundStyle = System.Drawing.Drawing2D.LinearGradientMode.Vertical;
    this.BorderColor = Color.Gray;
    this.BackColorStart = Color.LightSteelBlue;
    this.BackColorEnd = Color.LightSkyBlue;
}

The last step you need to execute is to tell the ConsoleWriteLineActivity class that you want to use the theme we’ve just created. To achieve that, add a Designer Attribute to the class:

[Designer(typeof(ConsoleWriteLineActivityDesigner), typeof(IDesigner))]

Compile the code. You will see that your custom activity is displayed with a custom design as the following picture shows:

Picture 2 - The custom activity with custom look and feel.

Picture 2 - The custom activity with custom look and feel.


Responses

  1. Cirilo speaks WWF!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: