Changing the Icon on a custom activity designer
Note: This blog post is written using the .NET framework 4.0 Beta 2
When I create custom activity designers the icon that appears is usually one of the first things I want to change. Doing so in WF4 isn’t hard once you know where to look but if you don’t can be a bit of a challenge.
Suppose I have a simple write line activity like this:
[Designer(typeof(MyWriteLineDesigner))]
public sealed class MyWriteLine : CodeActivity
{
// Define an activity input argument of type string
public InArgument<string> Text { get; set; }
// If your activity returns a value, derive from CodeActivity<TResult>
// and return the value from the Execute method.
protected override void Execute(CodeActivityContext context)
{
// Obtain the runtime value of the Text input argument
string text = context.GetValue(this.Text);
Console.WriteLine(text);
}
}
I have used the Designer attribute to attach my own designer to this activity.
The standard designer looks like this:
<sap:ActivityDesigner x:Class="WorkflowConsoleApplication3.MyWriteLineDesigner"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sap="clr-namespace:System.Activities.Presentation;assembly=System.Activities.Presentation"
xmlns:sapv="clr-namespace:System.Activities.Presentation.View;assembly=System.Activities.Presentation">
<Grid>
</Grid>
</sap:ActivityDesigner>
And dropping that on a workflow designer surface results in the following:
So far so good except now I want to change the icon that appears at the top left of the designer.
The designer has an Icon property. Unfortunately the property sheet doesn’t do us a lot of good here.
In order to change the icon we need to add some XAML to the designer telling it what to draw. The new designer looks like this
<sap:ActivityDesigner x:Class="WorkflowConsoleApplication3.MyWriteLineDesigner"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sap="clr-namespace:System.Activities.Presentation;assembly=System.Activities.Presentation"
xmlns:sapv="clr-namespace:System.Activities.Presentation.View;assembly=System.Activities.Presentation">
<sap:ActivityDesigner.Icon>
<DrawingBrush>
<DrawingBrush.Drawing>
<ImageDrawing>
<ImageDrawing.Rect>
<Rect Location="0,0" Size="16,16" ></Rect>
</ImageDrawing.Rect>
<ImageDrawing.ImageSource>
<BitmapImage UriSource="Clipboard_edit.png" ></BitmapImage>
</ImageDrawing.ImageSource>
</ImageDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</sap:ActivityDesigner.Icon>
<Grid>
</Grid>
</sap:ActivityDesigner>
Inside of the sap:ActivityDesigner.Icon element we need to add a DrawingBrush using an BitmapImage pointing to a file. The file, Clipboard_edit.png in this case, has been added to the project and its Build Action has been changed to “Resource”.
Once this has been done and the project rebuild the new icon will show up on the design surface.
Sweet 