Tuesday, 12 June 2012

Redesigning the Decision activity

In a couple of recent posts on Morphing Conditional Activities and Constraining Dropped Activities I’ve been steadily redesigning the Decision activity so that it is easier to use by non-programmers. There was one thing I left out which was re-styling the designer so that it looks and works a bit more like other activities. I’ll address that in this post.

Where I left off was an activity that looks like the following (I’ve added two red rectangles to indicate the parent and child activities here)…

image

That’s OK, however the title bar of the decision activity is looking a bit minimal. The issue here is that this name is, by default, not bound to the display name of the inner activity, and so it displays nothing. What would be preferable is to have the title bar look and work like the other standard activities, and for that there’s a fair bit of work to do.

There are two classes you can derive your activity designers from in .NET – most derive from ActivityDesigner which provides the standard look and feel as shown above, and if you wish to have more control over what is displayed (where more control == do it all yourself) then you can derive from WorkflowViewElement.

Having looked at the XAML for the inbuilt activity designer class (using Reflector) I felt it was not possible to use this, primarily because there was no way I could see to alter the binding on the caption bar. So, I created my own and along the way made some tweaks.

First off I started with a grid comprising 2 rows as follows…

image

The second row simply contained a WorkflowItemPresenter that will display the conditional activity dropped into place. The top row had to be further split into three columns, the left hand side for the decision icon, the middle for the display name of the child activity and the right for the validation error/warning icon.

Note: The inbuilt activity designer also includes UI for debugging, and also UI for expand/contract. I omitted the first part as the application I’m working on does not permit you to interactively debug a workflow, and I did not wish to expand or contract this activity so left this out of the designer.

So, my designer now looks something like this…

image

The icons for all of the standard activities are contained within the System.Activities.Presentation assembly as a resource, so I added in this and a couple other standard resource dictionaries to my activity XAML.

The validation icon needs to be displayed if the child activity has a validation warning or error. The activity we’re designing is the FlowDecision, and the Condition property is the one that holds the child activity, so we can use a binding syntax of ModelItem.Condition.ValidationState to check whether the child activity is (or is not) valid. Similarly, the ModelItem.Condition.ValidationMessage property path gets the error(s) associated with the child activity.

So, we have the Icons done, now for the name.

In the standard Activity designer, the name is actually formed using two controls, a textblock that displays the read-only name, and a textbox that is displayed when you click into the name, or when you tab into it using the keyboard. I wanted the same behaviour on my control so crufted up a couple of controls and hooked to a couple of events in order to get this working as expected. If you use the standard activity designer to rename an activity, you may notice that the textbox is not positioned exactly the same as the textblock, so when you enter edit mode the text will shift slightly. This annoys me something chronic, so I made sure that with my designer both items line up correctly, so there is no perceptible shift in the text when moving in and out of edit mode.

With that in place my activity is complete. Now I see the following on screen…

image

There’s some more going on in the XAML to ensure that the outline updates appropriately when selected, and this uses the standard colour resources so fits in with the colour scheme. Feel free to download the code and have a poke around.

No comments: