Felice Pollano Blog - ReHosting

WF4 ReHosting: bind all together

Felice Pollano — Mon, 14 Mar 2011 20:16:50 GMT

This is the list of the posts related to Workflow4 Re-Hosting

Post 1	First drop, showing we can host the designer view in pure markup.
Post 2	Adding the activities bar into the game.
Post 3	Removing the blue gear, and adding the proper activity image.
Post 4	Showing the property editor grid.
Post 5	Default WorkflowView command routing.

Sample Project has a place on Codeplex.

WF4 Re-Hosting: command routing

Felice Pollano — Mon, 14 Mar 2011 11:13:09 GMT

There is an entire suite of command defined by the designer view:

DesignerView.CopyAsImageCommand;
DesignerView.CopyCommand;
DesignerView.CreateArgumentCommand;
DesignerView.CreateVariableCommand;
DesignerView.CreateWorkflowElementCommand;
DesignerView.CutCommand;
DesignerView.CycleThroughDesignerCommand;
DesignerView.DeleteBreakpointCommand;
DesignerView.DisableBreakpointCommand;
DesignerView.EnableBreakpointCommand;
DesignerView.ExpandAllCommand;
DesignerView.ExpandCommand;
DesignerView.ExpandInPlaceCommand;
DesignerView.FitToScreenCommand;
DesignerView.GoToParentCommand;
DesignerView.InsertBreakpointCommand;
DesignerView.PasteCommand;
DesignerView.RedoCommand;
DesignerView.ResetZoomCommand;
DesignerView.SaveAsImageCommand;
DesignerView.SelectAllCommand;
DesignerView.ToggleArgumentDesignerCommand;
DesignerView.ToggleImportsDesignerCommand;
DesignerView.ToggleMiniMapCommand;
DesignerView.ToggleSelectionCommand;
DesignerView.ToggleVariableDesignerCommand;
DesignerView.UndoCommand;
DesignerView.ZoomInCommand;
DesignerView.ZoomOutCommand;

But since the view is internal in the designer it is not automatic binding commands form the UI to the underlying target. So our hosting solution propose an attached property, to route the command to the view in a way suitable in pure markup too. The property we create is called DesignerCommandTarget, and is used as below:

 1: <Button Style="{StaticResource
toolButton}" ToolTip="Zoom In" Command="wfview:DesignerView.ZoomInCommand"

 2:  host:HostingHelper.DesignerCommandTarget="{StaticResource
wfHost}"

 3: >

 4:  <Image Source="Assets/zoom_in.png"></Image>

 5: </Button>

6:

So we basically bind the command to the button by using Command, as usual, but we set the DesignerCommandTarget to our hosting instance, that is defined in the resource. In order to have the commands exposed by the designer in XAML, we added the wfview namespace reference as underlined below:

 1: <Window x:Class="WF4Host.MainWindow"

 2:  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 3:  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 4:  xmlns:toolbox="clr-namespace:System.Activities.Presentation.Toolbox;assembly=System.Activities.Presentation"

 5:  xmlns:host="clr-namespace:WF4Host"

 6:  xmlns:custom="clr-namespace:MyActivities;assembly=MyActivities"

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

 8:  xmlns:wfview="clr-namespace:System.Activities.Presentation.View;assembly=System.Activities.Presentation"

 9:  xmlns:activities="clr-namespace:System.Activities.Statements;assembly=System.Activities"

 10:  Title="MainWindow" Height="650" Width="825"

 11:  Icon="Assets/App.ico"

 12:  TextOptions.TextFormattingMode="Display"

13:

 14:  >

Command routing is very simple, and it is shown below:

 1:  protected static void OnCommandTargetChanged(DependencyObject
depo, DependencyPropertyChangedEventArgs depa)

 2:  {

 3:  var
src = depo as ICommandSource;

 4:  if (null !=
src && depa.NewValue != null )

 5:  {

 6:  var
ctargetdescr = DependencyPropertyDescriptor.FromName("CommandTarget"

 7:  ,
depo.GetType()

 8:  , depo.GetType()

 9:  ,true);

 10:  ctargetdescr.SetValue(depo

 11: ,
(depa.NewValue as HostingHelper).Designer.Context.Services.GetService<DesignerView>());

 12:  }

 13:  }

Every time we attach the property we check if the target is a CommandSource, so basically the strategy works for any object implementing this interface. If this pre condition is satisfied, we simply bind the WorkflowDesigner view as a CommandTarget for that source. In this way commands from our UI behave as they are defined inside the workflow, and we don’t need to write any code behind to custom wire them.

Our example application now looks like this:

Code for this post is hosted here.

WF4 Re-Hosting: let’s show the property grid

Felice Pollano — Mon, 07 Mar 2011 20:41:30 GMT

Showing the property grid is achieved using the same strategy we used to show the main editor, since it is a View internally exposed by the WorkflowDesigner. So we can decide where to put the property grid in XAML only in order to be blend friendly. Let’s have a look at the XAML:

 1:  <toolbox:ToolboxControl Grid.Column="0" Grid.Row="1" host:ToolboxItemSource.CategorySource="{StaticResource
GeneralTools}"/>

 2:  <GridSplitter ResizeDirection="Columns" Grid.RowSpan="3" Grid.Column="1" Grid.Row="1" Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

 3:  <host:MainViewPresenter HostingHelper="{StaticResource
wfHost}" Grid.RowSpan="3" Grid.Column="2" Grid.Row="1"/>

 4:  <GridSplitter ResizeDirection="Rows" Grid.Column="0" Grid.Row="2" Height="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>

 5:  <host:PropertyViewPresenter HostingHelper="{StaticResource
wfHost}" Grid.Column="0" Grid.Row="3"/>

Here we have all the graphical widget composing the designer as XAML tags. At line 5 we actually present the property editor. As a noise there is also some splitter we add in order to have a better usable interface. Code for the presenter is quite the same as the one we use to present the main view. So similar that could be refactor in some base class, but it is not done at the moment.

What we have right now is this:

A little problem appear to be the cursor over the splitter. For some weird reason the WF controls seems to stole the mouse cursor management and there is no way out to change it.

A poor man workaround is to make the splitter turn to bold when the mouse hover on it:

       <Style TargetType="GridSplitter">

            <Style.Triggers>

                <Trigger Property="IsMouseOver" Value="true">

                    <Setter Property="Background" Value="Black"/>

                 </Trigger>

            </Style.Triggers>

        </Style>

As usual the code so far can be found here.