Adding Controls to an Activity Designer

We will learn how to add a control (E.g. a text box) to customize the Activity Designer and then bind the control to one of the properties of the activity.

1. Open Microsoft Visual Studio 2010 from Start | All Programs | Microsoft Visual Studio 2010 | Microsoft Visual Studio 2010.
2. Open the project from last post Creating a Basic Activity Designer. At this point we have a solution with two projects: one containing the Prompt activity to customize and the other with the Workflow designer hosted in a WPF application.
3. Add a StackPanel to the Activity Designer and place the ViewBox control inside. To do this, open BasicDesignerWithStyling.xaml (located under the CustomActivities project) and add the following code in the XAML view :
   
   XAML
   <StackPanel>

       <Viewbox x:Name="Group" Width="75"  >

           ...

       </Viewbox>

   </StackPanel>
4. Add a TextBox to the Activity Designer. To do this, add the following code(shown in bold) below the Viewbox control:
   
   XAML
   <StackPanel>

       <Viewbox x:Name="Group" Width="75"  >

           ...

       </Viewbox>

       <TextBox Text="{Binding Path=ModelItem.Text, Mode=TwoWay}" />

   </StackPanel>
5. Press CTRL+S to save the changes.
6. Press CTRL+F5 to run the application.



Adding a Prompt activity

7. Drag a Prompt activity from the Toolbox and drop it over the Sequence surface. The designer window should look similar to the following figure:
8. Enter some text in the activity text box, for example: “Hello World”. Then click over the Prompt activity surface. The PropertyInspector should reflect the new value of the activity’s Text property.

   

   Changing Prompt activity Text property