The designer file

Wichtig:

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

Einführung

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/de/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/de/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">

Beachten Sie, dass jeder der importierten Namespaces das Format xmlns:<prefix> hat. Diese Präfixe werden später in der Datei verwendet, um auf nützliche Komponenten zu verweisen.

Ressourcen

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/de/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.

   

Symbole

Symbole, wie sie in allen UiPath-Aktivitäten zu sehen sind, können direkt zu einer Designerdatei im XAML-Format hinzugefügt werden, aber wir bevorzugen es, sie alle in einer dedizierten Datei hinzuzufügen und den oben genannten ActivityIconConverter zu verwenden, um sie in jede Aktivität zu ziehen. Auf diese Weise wird die Designer-Hauptdatei nicht von oft langem Symbolcode überlastet.

Icons.xaml

Navigieren Sie in Ihrem Designprojekt zu Designs > Icons.xaml.

Sie werden feststellen, dass sich in dieser Datei zwei Codeblöcke befinden, die die Symbole für den übergeordneten Scope und die untergeordnete Aktivität enthalten und als solche gekennzeichnet sind. Der Inhalt jedes Symbols variiert natürlich, aber was konstant bleiben muss, ist das Attribut x:Key , das die Form <Activity Name>Icon hat. Der Symbolcode der untergeordneten Aktivität hat beispielsweise das folgende Format:

<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/de/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>

Hinzufügen von Komponenten

Sie haben jetzt die Grundlage für einen Designer, aber sie ist noch völlig leer! Wir erweitern diese Aktivität und fügen zwei Textfelder hinzu, eines für jede Eingabe der untergeordneten Aktivität.

Activity decorator

Geben Sie der Aktivität zunächst ein UiPath-Look-and-Feel. Das ist ganz einfach, indem Sie Ihrem Designer direkt unter Ihrem Symbolcode ein ActivityDecoratorControl hinzufügen. Visual Studio kann Sie auffordern, den UiPath.Shared.Activities.Design.Controls -Namespace zu importieren, aber wenn nicht, fügen Sie dies auch zur Klassendefinition oben in der Datei hinzu.

<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>

Alle Designerkomponenten sollten in eine ActivityDecoratorControl werden, die Standardaktivitätsverhalten bietet, z. B. die Möglichkeit, einen großen Designer zu minimieren und die Meldung „Zum Anzeigen doppelklicken“ anzuzeigen. an dessen Stelle. Solche Details sind klein, aber zusammen geben sie dem gesamten Aktivitätspaket ein UiPath-Feeling.

Erstellen Sie Ihr Paket neu und Sie werden sehen, dass es jetzt etwas anders aussieht:

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>

Beachten Sie, dass die Höhen und Breiten keine tatsächlichen Werte enthalten, sondern Platzhalterzeichen (*) verwenden. Es steht Ihnen frei, genaue numerische Werte anzugeben, aber mit dieser Schreibweise kann die Größe jeder Zelle dynamisch in Bezug auf die Zellen in ihrer Umgebung angepasst werden. Die RowDefinition -Höhen sind beide * , sodass sie so viel vertikalen Platz wie vorhanden verbrauchen. Die ColumnDefinition Breiten sind jedoch * und 3*, d. h. die erste Spalte verbraucht 25 % aller verfügbaren Leerzeichen entlang der Breite und die zweite Spalte 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.

Für diesen Label sind 3 Eigenschaften festgelegt:

• Raster.Zeile: Positioniert die Beschriftung in der ersten Zeile des oben definierten Rasters.
• Raster.Spalte: Positioniert die Beschriftung in der ersten Spalte des oben definierten Rasters.
• Inhalt: Legt den Text fest, der in der Beschriftung angezeigt wird.

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"

Für ExpressionTextBox sind 4 Eigenschaften festgelegt:

• Raster.Zeile: Positioniert die Beschriftung in der ersten Zeile des oben definierten Rasters.
• Grid.Column: Positions the label in the second column of the Grid defined above.
• Hinweistext: Legt den Tooltip-Text fest, der innerhalb des Textfelds angezeigt wird, wenn es leer ist, und auch, wenn sich der Mauszeiger des Benutzers über dieses Feld bewegt.
• Ausdruckstyp: Legt den Datentyp fest, der in diesem Feld zulässig ist. Da unsere Eigenschaft eine Zahl vom Typ int ist, ist dies auf Int32 festgelegt.

  <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>
  

Erstellen Sie Ihr Paket neu; es sollte nun folgendermaßen aussehen:

Fügen Sie eine weitere Label und ExpressionTextBox für die Eigenschaft Zweite Zahl hinzu und denken Sie daran, dass sich diese Steuerelemente jetzt in Grid.Row="1" befinden. Das Endergebnis sollte folgendermaßen aussehen:

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.

Um Ihre Designerfelder an Ihre Aktivitätseigenschaften zu binden, fügen Sie zu jeder ExpressionTextBox 2 weitere Eigenschaften hinzu:

• OwnerActivity: Specifies a ViewModel used by the designer to link to the activity file. For our purposes, this will always be ModelItem.
• Ausdruck: Gibt die Aktivitätseigenschaft an, an die dieses Feld gebunden wird. Es gibt 4 Hauptkomponenten:
• Bindung: Gibt nach Name die Aktivitätseigenschaft an, an die gebunden werden soll. Wenn die ModelItem den Inhalt Ihrer Aktivität enthält, verlinkt ModelItem.FirstNumber direkt auf die Eigenschaft „First Number“.
• Konverter: Stellt eine Klasse zum Konvertieren zwischen Objekten verschiedener Typen bereit. In unserem Fall enthält das Designerfeld eine int, aber die Aktivitätseigenschaft ist vom Typ InArgument<int>, also fügen wir ein Standard- ArgumentToExpressionConverter hinzu, um die Bindung zwischen ihnen zu behandeln.
• KonverterParameter: Gibt den Typ des Arguments an, an das dieses Feld gebunden ist. In diesem Fall binden wir an InArgument<> -Eigenschaften, sodass der KonverterParameter auf In festgelegt ist, aber InOut und Out sind ebenfalls Optionen.
• 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.

Importieren Sie die ArgumentToExpressionConverter , indem Sie ResourceDictionary die folgende Zeile hinzufügen und den Namespace clr-namespace:System.Activities.Presentation.Converters;assembly=System.Activities.Presentation in Ihre Klassendefinition importieren.

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

Insgesamt sollten der Designer und Code Ihrer untergeordneten Aktivität wie folgt aussehen. Geben Sie Werte in jedes Feld ein und beachten Sie, wie die entsprechenden Eigenschaften aktualisiert werden.

<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/de/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/de/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>