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:

image

 

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.

image

 

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”.



image image



Once this has been done and the project rebuild the new icon will show up on the design surface.



image



 



 



Sweet [:)]





Enjoy!

[f1]
[f2]

2 thoughts on “Changing the Icon on a custom activity designer

  1. Thanks – this was a really useful tip. I banged my head against this for a while before stumbling on this post. Not sure how this arcane mechanic got past the usability police, but maybe I am just a WPF newbie.

    Do you have any advice for getting the icon to show up in the toolbox? Even once I have this working the toolbox icon is still the generic activity icon.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>