WF4.0 實戰（二十三）：自訂工作流活動設計器外觀的兩種實作方式

自訂 WF4 活動外觀有兩種方式：[Designer] 屬性硬編碼指定，與透過 IRegisterMetadata 註冊關聯。兩者各有優劣，微軟內建活動採用後者。

方式一：[Designer] 屬性直接指定

[Designer(typeof(CustomWriteLineDesigner))]
public sealed class CustomWriteLine : CodeActivity
{
    [RequiredArgument]
    public InArgument<string> Text { get; set; }

    protected override void Execute(CodeActivityContext context)
    {
        Console.WriteLine(context.GetValue(this.Text));
    }
}

或使用字串形式指定組件限定名稱：

[Designer("MyActivityDesigner.CustomWriteLineDesigner,MyActivityDesigner")]

CustomWriteLineDesigner XAML

繼承 sap:ActivityDesigner，使用 ExpressionTextBox 綁定引數，並自訂圖示：

<sap:ActivityDesigner x:Class="MyActivityDesigner.CustomWriteLineDesigner"
    xmlns:sap="clr-namespace:System.Activities.Presentation;assembly=System.Activities.Presentation"
    xmlns:sapv="clr-namespace:System.Activities.Presentation.View;assembly=System.Activities.Presentation"
    xmlns:sadc="clr-namespace:System.Activities.Presentation.Converters;assembly=System.Activities.Presentation">
    <sap:ActivityDesigner.Resources>
        <sadc:ArgumentToExpressionConverter x:Key="argConverter"/>
    </sap:ActivityDesigner.Resources>
    <sap:ActivityDesigner.Icon>
        <DrawingBrush>
            <DrawingBrush.Drawing>
                <ImageDrawing>
                    <ImageDrawing.Rect><Rect Location="0,0" Size="16,16"/></ImageDrawing.Rect>
                    <ImageDrawing.ImageSource><BitmapImage UriSource="WriteLine.jpg"/></ImageDrawing.ImageSource>
                </ImageDrawing>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </sap:ActivityDesigner.Icon>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="Text " Padding="0,2,4,2"/>
        <sapv:ExpressionTextBox Grid.Column="1" Width="200"
            Expression="{Binding Path=ModelItem.Text, Mode=TwoWay, 
                Converter={StaticResource argConverter}, ConverterParameter=In}"
            OwnerActivity="{Binding Path=ModelItem}" />
    </Grid>
</sap:ActivityDesigner>

方式二：Metadata 註冊機制（微軟內建做法）

專案結構分離：MyActivityDesignerTwo (邏輯) + MyActivityDesignerTwo.Design (UI)。

移除 Designer 屬性的活動類別

public sealed class CustomWriteLine : CodeActivity
{
    [RequiredArgument]
    public InArgument<string> Text { get; set; }
    protected override void Execute(CodeActivityContext context)
        => Console.WriteLine(context.GetValue(this.Text));
}

DesignerMetadata 註冊關聯

public class DesignerMetadata : IRegisterMetadata
{
    public void Register()
    {
        var builder = new AttributeTableBuilder();
        var t = typeof(CustomWriteLine);
        builder.AddCustomAttributes(t, new DesignerAttribute(typeof(CustomWriteLineDesigner)));
        MetadataStore.AddAttributeTable(builder.CreateTable());
    }
}

關鍵：輸出路徑統一

將 Design 專案輸出路徑設定為與邏輯專案相同目錄，設計器即可自動發現並載入。

效果比較

自訂活動寬度較大，屬性文字完整顯示，設計器更直觀，適合提供給非技術使用者操作。

原始碼下載：MyActivityDesigner.rar