How Do I Make UiPath Custom Activities Look Good?

Question

Background

I'm creating a set of custom activities that perform simple actions that aren't found in UiPath's core activity set. I'm planning on extending these activities to include some of my own image processing and Machine Learning algorithms.

Currently I'm starting out small and have created a NativeActivity that strips a MailMessage of its attachments. The problem is that in UiPath it looks like this:

Problem

I want to circulate this activity, so I really need to have it look much better than this! I have tried looking at sites that do WorkFlow Foundation activity designs, but each time I successfully compile, package and install my project it looks the same as above. I would like my activity to reflect the xaml design below:

<sap:ActivityDesigner x:Class="LarcAI.MailActivityDesigner.MailActivity"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="clr-namespace:System;assembly=mscorlib"
xmlns:sap="clr-namespace:System.Activities.Presentation;assembly=System.Activities.Presentation"
xmlns:sapv="clr-namespace:System.Activities.Presentation.View;assembly=System.Activities.Presentation"
xmlns:sapc="clr-namespace:System.Activities.Presentation.Converters;assembly=System.Activities.Presentation"
xmlns:Model="clr-namespace:System.Activities.Presentation.Model;assembly=System.Activities.Presentation"
xmlns:MailActivityLibrary="clr-namespace:LarcAI.MailActivity;assembly=MailActivityLibrary">
<sap:ActivityDesigner.Resources>
    <ResourceDictionary x:Uid="ResourceDictionary_1">
        <sapc:ArgumentToExpressionConverter x:Key="ArgumentToExpressionConverter" />
        <sapc:ModelToObjectValueConverter x:Key="ModelToObjectValueConverter" />

        <DataTemplate x:Key="Collapsed">
            <StackPanel Orientation="Horizontal">
                <TextBlock VerticalAlignment="Center" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="0" Margin="5" Text="Mail" />
                <sapv:ExpressionTextBox HintText="Enter a VB Expression" Expression="{Binding Path=ModelItem.Text, Mode=TwoWay, Converter={StaticResource ArgumentToExpressionConverter}, ConverterParameter=In }" ExpressionType="s:String" Grid.Row="0" Grid.Column="1" OwnerActivity="{Binding Path=ModelItem}" Width="300" Margin="0,5" MaxLines="1" />
            </StackPanel>
        </DataTemplate>

        <DataTemplate x:Key="Expanded">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>
                    <RowDefinition />
                </Grid.RowDefinitions>

                <TextBlock VerticalAlignment="Center" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="0" Margin="5" Text="Mail" />
                <sapv:ExpressionTextBox HintText="Enter a VB Expression" Expression="{Binding Path=ModelItem.Text, Mode=TwoWay, Converter={StaticResource ArgumentToExpressionConverter}, ConverterParameter=In }" ExpressionType="s:String" Grid.Row="0" Grid.Column="1" OwnerActivity="{Binding Path=ModelItem}" Width="300" Margin="0,5" MaxLines="1" />
            </Grid>
        </DataTemplate>

        <Style x:Key="ExpandOrCollapsedStyle" TargetType="{x:Type ContentPresenter}">
            <Setter Property="ContentTemplate" Value="{DynamicResource Expanded}" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=ShowExpanded}" Value="false">
                    <Setter Property="ContentTemplate" Value="{DynamicResource Collapsed}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>

    </ResourceDictionary>
</sap:ActivityDesigner.Resources>

<sap:ActivityDesigner.Icon>
    <DrawingBrush>
        <DrawingBrush.Drawing>
            <ImageDrawing>
                <ImageDrawing.Rect>
                    <Rect Location="0,0" Size="25,25" ></Rect>
                </ImageDrawing.Rect>
                <ImageDrawing.ImageSource>
                    <BitmapImage UriSource="Images/remove_attachment.png" />
                </ImageDrawing.ImageSource>
            </ImageDrawing>
        </DrawingBrush.Drawing>
    </DrawingBrush>
</sap:ActivityDesigner.Icon>

<Grid>
    <ContentPresenter Style="{DynamicResource ExpandOrCollapsedStyle}" Content="{Binding}" />
</Grid>

Help

If someone can please explain how to link a xaml file to my NativeActivities, preferably in a step-wise solution, that would be great!

score 2 · Answer 1 · answered Nov 23 '18 at 13:19

I found out something that might be helpful to you.

I wanted to create a variation of the log activity. If I copy the properties from the UiPath "Log Message" activity, and then add their LogDesigner class as attribute to my class, then I get the same look and feel of my custom activity as UiPath has on their native version.

[Designer(typeof(UiPath.Core.Activities.Design.LogDesigner))]
public class LogMessage : CodeActivity, IRegisterMetadata
{
    [Category("Input")]
    public UiPath.Core.Activities.CurentLogLevel Level { get; set; }

    [Category("Input")]
    public InArgument<System.String> Message { get; set; }

    [Category("Input")]
    public InArgument<System.String> LogFilePath { get; set; }

So my activity now looks like this in UiPath Studio:

I highlighted a new property I added to the activity (to show it's not the original).

I know it does not answer your question on how to link custom xaml to your activity, but maybe this information could be helpful as to avoid the default look of custom activities.

How Do I Make UiPath Custom Activities Look Good?

Background

Problem

Help

1 Answers1