The designer file

Important :

This document refers to a deprecated version of the UiPath Activity Creator for Visual Studio. Please see the new documentation here.

Introduction

A complete activity may be created with the activity definition file alone, but the user experience is almost always enhanced by adding a designer, or UI. Designers are written in XAML, an XML-based language (described in more detail here), and used to create front-ends for Windows Presentation Foundation (WPF) applications.

Navigate to the ChildActivityDesigner.xaml file and walk through section by section to better understand how to enhance your activity with a UI.

<sap:ActivityDesigner x:Class="MyCompany.MyProduct.Activities.Design.ChildActivityDesigner"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:sap="clr-namespace:System.Activities.Presentation;assembly=System.Activities.Presentation"
             xmlns:converters="clr-namespace:UiPath.Shared.Activities.Design.Converters">
    <a href="https://docs.uipath.com/fr/sap:ActivityDesigner.Resources">sap:ActivityDesigner.Resources</a>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="..\)\)Themes\)\)Generic.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <converters:ActivityIconConverter x:Key="ActivityIconConverter" />
        </ResourceDictionary>
    </sap:ActivityDesigner.Resources>
    <a href="https://docs.uipath.com/fr/sap:ActivityDesigner.Icon">sap:ActivityDesigner.Icon</a>
        <DrawingBrush Stretch="Uniform" Drawing="{Binding Path=ModelItem, Converter={StaticResource ActivityIconConverter}, ConverterParameter=pack://application:\)\),\)\),\)\),/MyCompany.MyProduct.Activities.Design;component/themes/icons.xaml}" />
    </sap:ActivityDesigner.Icon>
</sap:ActivityDesigner>

Class definition

All designers contain one top-level component in which a class is declared and supplemental namespaces are imported. This example extends the ActivityDesigner class, the base class for all such components.

<sap:ActivityDesigner x:Class="MyCompany.MyProduct.Activities.Design.ChildActivityDesigner"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:sap="clr-namespace:System.Activities.Presentation;assembly=System.Activities.Presentation"
             xmlns:converters="clr-namespace:UiPath.Shared.Activities.Design.Converters">

Notez que chacun des espaces de noms importés prend la forme xmlns:<prefix>. Ces préfixes sont utilisés ultérieurement dans le fichier pour référencer des composants utiles.

Ressources

Resources are reusable components, styles, or data made available for use in a XAML file via a ResourceDictionary component. In this example, two types of resources are provided--a dictionary of styles (Generic.xaml) and a converter component (ActivityIconConverter).

<a href="https://docs.uipath.com/fr/sap:ActivityDesigner.Resources">sap:ActivityDesigner.Resources</a>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="..\)\)Themes\)\)Generic.xaml" />
        </ResourceDictionary.MergedDictionaries>
        <converters:ActivityIconConverter x:Key="ActivityIconConverter" />
    </ResourceDictionary>
</sap:ActivityDesigner.Resources>

1. Generic.xaml is another ResourceDictionary containing standard UiPath styles that help keep the look of designers consistent. Peeking inside this file, you see the following style, which sets a standard height for all ComboBox objects. Because we've included this dictionary in our XAML file, all comboboxes will have a default height of 23px.

   <Style TargetType="{x:Type ComboBox}">
       <Setter Property="Height" Value="23" />
   </Style>
   

2. ActivityIconConverter is a utility class that is provided through the Shared folder and which allows all activity icons to be specified in a standard way. See the Icons section below for more details.

   

Icônes

Les icônes, comme celles que l’on voit sur toutes les activités UiPath, peuvent être ajoutées directement à un fichier Designer au format XAML, mais nous préférons les ajouter dans un fichier dédié et d’utiliser le ActivityIconConverter susmentionné pour les intégrer à chaque activité. De cette façon, le fichier principal du concepteur reste épuré par le code d'icônes souvent long.

Icons.xaml

Dans votre projet de conception, accédez à Thèmes > Icons.xaml.

Vous remarquerez que ce fichier contient deux blocs de code qui contiennent les icônes de l’activité parent et enfant et qui sont labellisés comme tels. Le contenu de chaque icône variera évidemment, mais ce qui doit rester constant, c'est l'attribut x:Key , qui prend la forme <Activity Name>Icon. Le code d'icône de l'activité enfant, par exemple, a le format suivant :

<DrawingBrush x:Key="ChildActivityIcon" Viewbox="0,0,52.706,14.497" ViewboxUnits="Absolute" Stretch="Uniform">
...
</DrawingBrush>

Designer file

Navigate back to your designer file, ChildActivityDesigner.xaml. The following block of code is responsible for adding an icon to the designer and is constant across all activities in the package. It functions by searching Icons.xaml for a key with the same name as the activity itself and adds that XAML code to the current file. Notice that the ConverterParameter references your Designer project by name.

<a href="https://docs.uipath.com/fr/sap:ActivityDesigner.Icon">sap:ActivityDesigner.Icon</a>
    <DrawingBrush Stretch="Uniform" Drawing="{Binding Path=ModelItem, Converter={StaticResource ActivityIconConverter}, ConverterParameter=pack://application:\)\),\)\),\)\),/MyCompany.MyProduct.Activities.Design;component/themes/icons.xaml}" />
</sap:ActivityDesigner.Icon>

Ajout de composants

Vous disposez désormais des bases d’un concepteur, mais elles sont encore complètement vides ! Développons cela en ajoutant deux champs de texte, un pour chacune des entrées de l’activité enfant.

Activity decorator

Commencez par donner une apparence UiPath à l'activité. Cela peut être facilement fait en ajoutant un ActivityDecoratorControl à votre concepteur immédiatement en dessous de votre code d'icône. Visual Studio peut vous inviter à importer l'espace de noms UiPath.Shared.Activities.Design.Controls , sinon, ajoutez-le également à la définition de classe en haut du fichier.

<sap:ActivityDesigner x:Class="MyCompany.MyProduct.Activities.Design.ChildActivityDesigner"
             ...
             xmlns:controls="clr-namespace:UiPath.Shared.Activities.Design.Controls">
<?comment-start?>
Resources
<?comment-end?>
<?comment-start?>
Icons
<?comment-end?>
    <controls:ActivityDecoratorControl Style="{StaticResource ActivityDecoratorStyle}">

    </controls:ActivityDecoratorControl>
</sap:ActivityDesigner>

Tous les composants d'un concepteur doivent être encapsulés dans une ActivityDecoratorControl, qui fournit des comportements d'activité standard tels que la possibilité de réduire un grand concepteur et d'afficher le message « Double-cliquez pour afficher. » à sa place. De tels détails sont infimes mais se combinent pour donner une touche UiPath à l'ensemble de l'activité.

Reconstruisez votre package et vous verrez qu'il est maintenant légèrement différent :

Grid layout

Next, let's set the layout of the activity so it can display labels and text fields in an appealing way. WPF has 6 main layouts, but we're going to use a Grid panel to hold our controls. The Grid works by first defining a number of rows and columns along with their heights and widths respectively. Start by defining 2 rows and 2 columns.

<controls:ActivityDecoratorControl Style="{StaticResource ActivityDecoratorStyle}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="3*"/>
        </Grid.ColumnDefinitions>
    </Grid>
</controls:ActivityDecoratorControl>

Notez que les hauteurs et les largeurs ne contiennent pas de valeurs réelles, mais utilisent à la place des caractères génériques (*). Vous êtes libre de spécifier des valeurs numériques exactes, mais cette notation permet à chaque cellule d'être dimensionnée dynamiquement par rapport à celles qui l'entourent. Les hauteurs de RowDefinition sont toutes les deux * , elles consomment donc autant d’espace vertical qu’il y en a. Les largeurs de ColumnDefinition , cependant, sont * et 3*, ce qui signifie que la première colonne consommera 25 % de tous les espaces disponibles le long de la largeur et la deuxième 75 %.

Add a textbox

Now that the layout is set, we'll add two textboxes with which the user can access the Child Activity's two input properties--First Number and Second Number. Start by adding a Label after the Grid definitions for the First Number.

Trois propriétés sont définies sur ce Label:

• Grid.Row : positionne le libellé dans la première ligne de la grille définie ci-dessus.
• Grille.Colonne : positionne le libellé dans la première colonne de la grille définie ci-dessus.
• Contenu : définit le texte qui apparaît dans le libellé.

See here for a complete list of properties available to WPF elements.

<Grid>
<?comment-start?>
Grid definitions
<?comment-end?>
    <Label Grid.Row="0" Grid.Column="0"
           Content="First Number" />
</Grid>

Next, let's add an ExpressionTextBox to allow for user input. If Visual Studio does not prompt you to do so, you must manually add two more namespaces to the class definition.

xmlns:view="http://schemas.microsoft.com/netfx/2009/xaml/activities/presentation"
xmlns:system="clr-namespace:System;assembly=mscorlib"

4 propriétés sont définies sur ce ExpressionTextBox:

• Grid.Row : positionne le libellé dans la première ligne de la grille définie ci-dessus.
• Grid.Column: Positions the label in the second column of the Grid defined above.
• HintText : définit le texte d'info-bulle qui apparaît dans la zone de texte lorsqu'elle est vide et également lorsque la souris de l'utilisateur survole ce champ.
• Type d'expression : définit le type de données autorisé dans ce champ. Étant donné que notre propriété est un nombre de type int, elle est définie sur Int32.

  <Grid>
  <?comment-start?>
  Grid definitions
  <?comment-end?>
      <Label Grid.Row="0" Grid.Column="0"
             Content="First Number" />
      <view:ExpressionTextBox Grid.Row="0" Grid.Column="1"
                              HintText="The first addend"
                              ExpressionType="system:Int32" />
  </Grid>
  

Reconstruisez votre package et il devrait maintenant ressembler à ceci :

Ajoutez un autre Label et ExpressionTextBox pour la propriété Second Number, en vous rappelant que ces commandes seront désormais dans Grid.Row="1". Le résultat final devrait ressembler à ceci :

Bind designer to activity

Try to click either of your textboxes and you'l find that they are non-responsive. This is because the ExpressionTextBox works differently than a normal Textbox. Where Textboxes support String inputs, ExpressionTextBoxes allow the user to enter complex VB.Net expressions (e.g. Int32.MaxValue, 2+2, SomeUiPathVariable) and can bind this value to a property in your activity.

Afin de lier vos champs de concepteur aux propriétés de votre activité, ajoutez 2 propriétés supplémentaires à chaque ExpressionTextBox:

• OwnerActivity: Specifies a ViewModel used by the designer to link to the activity file. For our purposes, this will always be ModelItem.
• Expression : fournit la propriété d'activité à laquelle ce champ sera lié. Il y a 4 composants principaux ici :
• Liaison : spécifie par le nom la propriété d'activité à lier. Si le ModelItem contient le contenu de votre activité, ModelItem.FirstNumber renvoie directement à la propriété Premier nombre.
• Convertisseur : fournit une classe pour convertir entre des objets de différents types. Dans notre cas, le champ du concepteur contient un int, mais la propriété d'activité est de type InArgument<int>, nous ajoutons donc une ArgumentToExpressionConverter standard pour gérer la liaison entre eux.
• ParamètresConvertisseur : spécifie le type d'argument auquel ce champ est lié. Dans ce cas, nous lions les propriétés InArgument<> , la valeur ConvertisseurParameter est donc In, mais InOut et Out sont également des options.
• Mode: Indicates whether changes in the designer field will trigger updates or the activity property and vice versa. Set this as TwoWay to allow the user to update either the designer or the properties pane. See here for all other options.

Importez le ArgumentToExpressionConverter en ajoutant la ligne suivante à votre ResourceDictionary et en important l'espace de noms clr-namespace:System.Activities.Presentation.Converters;assembly=System.Activities.Presentation dans votre définition de classe.

<converters1:ArgumentToExpressionConverter x:Key="ArgumentToExpressionConverter" />

Dans l'ensemble, votre concepteur et votre code d'activité enfant doivent apparaître comme ci-dessous. Saisissez des valeurs dans chaque champ et observez la mise à jour des propriétés correspondantes.

<sap:ActivityDesigner x:Class="MyCompany.MyProduct.Activities.Design.ChildActivityDesigner"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:sap="clr-namespace:System.Activities.Presentation;assembly=System.Activities.Presentation"
             xmlns:converters="clr-namespace:UiPath.Shared.Activities.Design.Converters"
             xmlns:converters1="clr-namespace:System.Activities.Presentation.Converters;assembly=System.Activities.Presentation"
             xmlns:controls="clr-namespace:UiPath.Shared.Activities.Design.Controls"
             xmlns:view="http://schemas.microsoft.com/netfx/2009/xaml/activities/presentation"
             xmlns:system="clr-namespace:System;assembly=mscorlib">
    <a href="https://docs.uipath.com/fr/sap:ActivityDesigner.Resources">sap:ActivityDesigner.Resources</a>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="..\)\)Themes\)\)Generic.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <converters1:ArgumentToExpressionConverter x:Key="ArgumentToExpressionConverter" />
            <converters:ActivityIconConverter x:Key="ActivityIconConverter" />
        </ResourceDictionary>
    </sap:ActivityDesigner.Resources>
    <a href="https://docs.uipath.com/fr/sap:ActivityDesigner.Icon">sap:ActivityDesigner.Icon</a>
        <DrawingBrush Stretch="Uniform" Drawing="{Binding Path=ModelItem, Converter={StaticResource ActivityIconConverter}, ConverterParameter=pack://application:\)\),\)\),\)\),/MyCompany.MyProduct.Activities.Design;component/themes/icons.xaml}" />
    </sap:ActivityDesigner.Icon>
    <controls:ActivityDecoratorControl Style="{StaticResource ActivityDecoratorStyle}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="3*"/>
            </Grid.ColumnDefinitions>
            <Label Grid.Row="0" Grid.Column="0"
                   Content="First Number" />
            <view:ExpressionTextBox Grid.Row="0"  Grid.Column="1"
                                    OwnerActivity="{Binding Path=ModelItem}"
                                    ExpressionType="system:Int32"
                                    HintText="The first addend"
                                    Expression="{Binding Path=ModelItem.FirstNumber,Converter={StaticResource ArgumentToExpressionConverter}, ConverterParameter=In, Mode=TwoWay}" />
            <Label Grid.Row="1" Grid.Column="0"
                   Content="Second Number" />
            <view:ExpressionTextBox Grid.Row="1"  Grid.Column="1"
                                    OwnerActivity="{Binding Path=ModelItem}"
                                    ExpressionType="system:Int32"
                                    HintText="The second addend"
                                    Expression="{Binding Path=ModelItem.SecondNumber,Converter={StaticResource ArgumentToExpressionConverter}, ConverterParameter=In, Mode=TwoWay}" />
        </Grid>
    </controls:ActivityDecoratorControl>
</sap:ActivityDesigner>