Test your technical skills online, appear in Virtual Interview and be ready for job!
Twitter Twitter LinkedIn YouTube Google
Be Interview ready ! | Search
Make friends on DotNetFunda.com and expand your network!
Winners

Win Prizes

Announcements
Like us on Facebook
Sponsor
Top Articles Author
Thu, 17-Apr-2014 Authors
All Time Authors
Sourav.Kayal
39750
SheoNarayan
34800
Niladri.biswas
33350

Latest members | More ...


(Statistics delayed by 5 minutes)
Ads

Workflow Foundation 4.0 - Activity Designer

Ambily.raj
Posted by under WWF category on for Beginner level | Views : 63726 red flag
If you found plagiarised (copied) or inappropriate content,
please let us know the original source along with your correct email id (to communicate) for further action.
Rating: 5 out of 5
1 vote(s)

One of the major changes in Windows Workflow Foundation 4.0 is the Activity Designer. The new Activity Designer is based on WPF.

 Download source code for Workflow Foundation 4.0 - Activity Designer


Introduction

Visual Studio 2010 released with workflow foundation 4.0. Workflow Foundation 4.0 is introduced a significant amount of change from the previous versions of the technology. The change varies from the core of the workflow foundation, runtime and tools. Workflow foundation 4.0 re-architected to improve the performance and productivity of the WF.


One of the major changes is in Activity Designer. The new Activity Designer is based on WPF [Windows Presentation Framework], which gives lot of flexibility to the developer.  Creation of a custom look and feel using the new Activity Designer is very easy.

Activity Designer

Before starting with the new Activity Designer, let us create an Activity Designer Library. Create a project of type Activity Designer Library.   


 
Right click on the solution and Add an Activity Designer item to the project. 

 

Activity Designer will create two file; one .xaml file and another .xaml.cs file. Designer level customizations are mainly performed in .xaml file. We can do some customization like, when a property change, change the value of another property by tracking the designer events in .xaml.cs file. In this article, we will look into the customization using .xaml file only.

After adding the Activity Designer, add the custom activity class to the project. Following is the sample activity class derived from CodeActivity


    [Designer(typeof(ActivityDesigner1))]
    public class ActivityDesigner : CodeActivity
    {
        protected override void Execute(CodeActivityContext context)
        {
            throw new NotImplementedException();
        }
    }


The Designer attribute specified for the class bind the Activity with the specified Activity Designer.  Build the Project and add the Custom Activity to either FlowChart or Sequential workflow.

The default design of the activity is as follows


Activity with an Icon

We will start our customization by changing the icon associated with the Activity Designer. Specify the Icon under the ActivityDesigner.Icon tab and draw the icon using ImageDrawing.


<sap:ActivityDesigner.Icon>
        <DrawingBrush>
            <DrawingBrush.Drawing>
                <ImageDrawing>
                    <ImageDrawing.Rect>
                        <Rect Location="0,0" Size="16,16" ></Rect>
                    </ImageDrawing.Rect>
                    <ImageDrawing.ImageSource>
                        <BitmapImage UriSource="..\Resources\activityIcon.ico" ></BitmapImage>
                    </ImageDrawing.ImageSource>
                </ImageDrawing>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </sap:ActivityDesigner.Icon>


The new Activity Designer with custom Icon will look like


Activity with one Child Activity

Let us move to the next step, where we will create an activity which holds another activity. Our custom activity will work as a container for another activity. For defining a custom activity as container, we can use the WorkflowItemPresenter defined in System.Activities.Presentation namespace.


Inside the activity designer, define the WorkflowItemPresenter as


<sap:WorkflowItemPresenter AllowDrop="True" Name="InsideItem" HintText="Drop Item here" Item="{Binding Path=ModelItem.Child}">           
        </sap:WorkflowItemPresenter>  

Item attribute is bind to the child property of the corresponding Activity. Please refer the attached code for more details on the activity code.  

Prefix sap is defined as below


xmlns:sap="clr-namespace:System.Activities.Presentation;assembly=System.Activities.Presentation"

When you drag the custom activity, it will look like


Drag any built-in or custom activity to the newly created custom activity. Here we dropped one WriteLine activity into our custom activity.


Activity with Multiple Child Activities

There are many scenarios where we need to execute a set of activities in a sequence. For defining a custom activity just like Sequence activity to hold a number of other activities, we can use the WorkflowItemsPresenter defined under System.Activities.Presentation.


Below code segment define the WorkflowItemsPresenter with vertical orientation. It uses one small rectangle to separate two activities. Also the child activities dropped on the WorkflowItemsPresenter is bind to the Activities property defined in the activity.


<sap:WorkflowItemsPresenter Items="{Binding Path=ModelItem.Activities}" HintText="Insert Activities Here">
                <sap:WorkflowItemsPresenter.SpacerTemplate>
                    <DataTemplate>
                        <Rectangle Fill="#FF1F6F6F" Width="10" Height="10" />
                    </DataTemplate>
                </sap:WorkflowItemsPresenter.SpacerTemplate>
                <sap:WorkflowItemsPresenter.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Vertical"/>
                    </ItemsPanelTemplate>
                </sap:WorkflowItemsPresenter.ItemsPanel>
            </sap:WorkflowItemsPresenter>

When you drag the custom activity, it will look like



In the following example, we added two activities to our Custom activity; one Assign Activity and another WriteLine Activity.

   


Activity with User Control

As the activity designer is based on WPF, we can add any WPF user control to our activity.

We have a user control called WPFUserControl, which is included in the activity designer using the following code.

<local:WPFUserControl x:Name="customControl"></local:WPFUserControl> 

For more details about the user control, please refer the attached code sample.
Now the activity designer will look like


Activity with Custom Look and Feel

Here, we are going to re-define the look and feel of the activity designer.  In the following example, we defined a custom activity designer with rounded rectangle shape. Inside the custom activity, we placed one double Arrow and a TextBlock.

The main code used by the activity designer is as follows. Please refer the attached code sample for more details.

<ControlTemplate x:Key="CustomTemplate"> 
 
                <Border x:Name="border" BorderThickness="1"
                        BorderBrush="#FF582222"
                        Background="{DynamicResource {x:Static SystemColors.InfoBrushKey}}"
                        CornerRadius="4" Focusable="True"
                        >
                    <Grid>
                        <Canvas Width="80" Height="30" HorizontalAlignment="Center" Margin="8,8,8,8">
                         
                            <Polygon Points="4,20 14,0 14,10 94,10 94,0 104,20 94,40 94,30 14,30 14,40" Stroke="Black"
                                  StrokeThickness="3" StrokeLineJoin="Round" HorizontalAlignment="Center"
                                     VerticalAlignment="Center" Fill="#FF3C56AD"></Polygon>
                        </Canvas>
                        <TextBlock Text="    CustomActivity" HorizontalAlignment="Center"  VerticalAlignment="Center" Foreground="#FFECEE5F" FontStretch="UltraCondensed" TextTrimming="CharacterEllipsis" FontWeight="Bold" />
                    </Grid>
                </Border>
 
            </ControlTemplate>
<sap:ActivityDesigner.Style>
        <Style TargetType="{x:Type sap:ActivityDesigner}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=ShowExpanded}" Value="false">
                    <Setter Property="Template" Value="{StaticResource CustomTemplate}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </sap:ActivityDesigner.Style>


The new custom activity designer will look like


Conclusion

Workflow Foundation 4.0 is giving the full flexibility to redefine the look and feel of a custom activity. You can define the activity to represent the functionality of the activity. This will make the custom activities more readable and understandable in the workflow. Also, the workflow design looks more readable and clear.

Page copy protected against web site content infringement by Copyscape
Found interesting? Add this to:




About the Author

Ambily.raj

Full Name: Ambily KK
Member Level: Silver
Member Status: Member,Microsoft_MVP,MVP
Member Since: 5/18/2010 1:05:25 AM
Country: India
Thanks Ambily K K http://ambilykk.com/
http://ambilykk.com/

I have over 9 years of experience working on Microsoft Technologies. I am carrying the passion on Microsoft technologies specifically on web technologies such as ASP .Net and Ajax. My interests also include Office Open XML, Azure, Visual Studio 2010. Technology adoption and learning is my key strength and technology sharing is my passion.
Login to vote for this post.

Comments or Responses


Login to post response.

Comments / Responses
Select text & click toolbar to format. Formatting appears in viewmode only. HTML Tags are not allowed.
Bold Italic Underline Paragraph Title Code  Link 
 Wait ... Processing ..... please wait.

Comment using Facebook