Die Designerdatei

Wichtig:

Dieses Dokument bezieht sich auf eine veraltete Version von UiPath Activity Creator für Visual Studio. Die neue Dokumentation finden Sie hier.

Einführung

Eine vollständige Aktivität kann allein mit der Aktivitätsdefinitionsdatei erstellt werden, aber die Benutzererfahrung wird fast immer durch Hinzufügen eines Designers oder einer Benutzeroberfläche verbessert. Designer sind in XAML, einer XML-basierten Sprache (hier ausführlicher beschrieben) und werden zur Erstellung von Front-Ends für Windows Presentation Foundation (WPF)-Anwendungen verwendet.

Navigieren Sie zur Datei ChildrenActivityDesigner.xaml und gehen Sie Abschnitt für Abschnitt durch, um besser zu verstehen, wie Sie Ihre Aktivität mit einer Benutzeroberfläche verbessern können.

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

Klassendefinition

Alle Designer enthalten eine Komponente der obersten Ebene, in der eine Klasse deklariert und zusätzliche Namespaces importiert werden. Dieses Beispiel erweitert die ActivityDesigner- Klasse, die Basisklasse für alle diese Komponenten.

<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

Ressourcen sind wiederverwendbare Komponenten, Stile oder Daten, die über eine ResourceDictionary- Komponente für die Verwendung in einer XAML-Datei bereitgestellt werden. In diesem Beispiel werden zwei Arten von Ressourcen bereitgestellt – ein Wörterbuch von Stilen (Generic.xaml) und eine Konvertierungskomponente (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 ist eine weitere ResourceDictionary mit UiPath-Standardstilen, die dazu beitragen, das Erscheinungsbild von Designern konsistent zu halten. Wenn Sie in diese Datei werfen, sehen Sie den folgenden Stil, der eine Standardhöhe für alle ComboBox -Objekte festlegt. Da wir dieses Wörterbuch in unsere XAML-Datei aufgenommen haben, haben alle Kombinationsfelder eine Standardhöhe von 23px.

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

2. ActivityIconConverter ist eine Dienstprogrammklasse, die über den Ordner Shared bereitgestellt wird und es ermöglicht, alle Aktivitätssymbole auf standardmäßige Weise anzugeben. Weitere Informationen finden Sie im Abschnitt Symbole unten.

   

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>

Designerdatei

Navigieren Sie zurück zu Ihrer Designerdatei ChildrenActivityDesigner.xaml. Der folgende Codeblock ist für das Hinzufügen eines Symbols zum Designer verantwortlich und ist für alle Aktivitäten im Paket konstant. Es funktioniert durch die Suche ins.xaml nach einem Schlüssel mit dem gleichen Namen wie die Aktivität selbst und fügt diesen XAML-Code zur aktuellen Datei hinzu. Beachten Sie, dass ConverterParameter nach Namen auf Ihr Designerprojekt verweist.

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

Aktivitätsdesigner

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:

Rasterlayout

Als Nächstes legen wir das Layout der Aktivität so fest, dass Beschriftungen und Textfelder ansprechend angezeigt werden können. WPF hat 6 Hauptlayouts, aber wir werden ein Rasterbedienfeld verwenden, um unsere Steuerelemente zu speichern. Das Raster funktioniert, indem zuerst eine Anzahl von Zeilen und Spalten zusammen mit ihren Höhen bzw. Breiten definiert werden. Beginnen Sie mit der Definition von 2 Zeilen und 2 Spalten.

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

Fügen Sie ein Textfeld hinzu

Da das Layout nun festgelegt ist, fügen wir zwei Textfelder hinzu, mit denen der Benutzer auf die beiden Eingabeeigenschaften der untergeordneten Aktivität zugreifen kann – Erste Zahl und Zweite Zahl. Fügen Sie zunächst eine Beschriftung nach den Rasterdefinitionen für die erste Zahl hinzu.

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.

Eine vollständige Liste der Eigenschaften, die für WPF-Elemente verfügbar sind, finden Sie hier .

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

Als Nächstes fügen wir ein Ausdruckstextfeld hinzu, um Benutzereingaben zu ermöglichen. Wenn Visual Studio Sie nicht dazu auffordert, müssen Sie der Klassendefinition manuell zwei weitere Namespaces hinzufügen.

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.
• Raster.Spalte: Positioniert die Beschriftung in der zweiten Spalte des oben definierten Rasters.
• 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:

Binden Sie Designer an Aktivität

Versuchen Sie, auf eines Ihrer Textfelder zu klicken und Sie werden feststellen, dass sie nicht reagieren. Dies liegt daran, dass die ExpressionTextBox anders funktioniert als eine normale Textbox. Während Textfelder String -Eingaben unterstützen, ermöglichen Ausdruckstextfelder dem Benutzer die Eingabe komplexer VB.Net-Ausdrücke (z. B Int32.MaxValue, 2+2, SomeUiPathVariable) und können diesen Wert an eine Eigenschaft in Ihrer Aktivität binden.

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

• OwnerActivity: Gibt ein ViewModel an, das vom Designer zur Verknüpfung mit der Aktivitätsdatei verwendet wird. Für unsere Zwecke ist dies immer 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.
• Modus: Gibt an, ob Änderungen im Designerfeld Aktualisierungen auslösen oder die Aktivitätseigenschaft und umgekehrt. Legen Sie dies als TwoWay fest, damit der Benutzer entweder den Designer- oder den Eigenschaftenbereich aktualisieren kann. Alle anderen Optionen finden Sie hier.

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>