デザイナー ファイル

大事な： このドキュメントは、UiPath Activity Creator for Visual Studio の非推奨バージョンを指します。 新しいドキュメントについては、 こちらをご覧ください。

Intro

アクティビティ定義ファイルだけで完全なアクティビティを作成することもできますが、デザイナーまたは UI を追加することで、ユーザー エクスペリエンスはほぼ常に向上します。 デザイナーは XAML ベースの言語 (詳しくはこちらをご覧ください)で書かれ、Windows Presentation Foundation (WPF) アプリケーションのフロントエンドの作成に使用されます。

ChildActivityDesigner.xaml ファイルに移動して、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="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="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>

クラス定義

すべてのデザイナーには、クラスが宣言され、名前空間のサプリメンタルがインポートされるトップレベルのコンポーネントが 1 つ含まれています。 この例では、このようなすべてのコンポーネントの基本クラスである ActivityDesigner クラスを拡張しています。

<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:<prefix>を取得します。 これらのプレフィックスは、後でファイルで役立つコンポーネントを参照するために使用されます。

リソース

リソース とは、再利用可能なコンポーネント、スタイル、または XAML ファイル内でリソース 検証 コンポーネントを介して利用可能にされるデータです。 この例では、2 種類のリソースが提供されています。スタイルのディクショナリ (Generic.xaml) です。 変換コンポーネント (ActivityIconConverter) と、

<a href="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 は、デザイナーの外観の一貫性を保つのに役立つ標準の UiPath スタイルを含む別の ResourceDictionary です。 このファイル内を参照すると、次のスタイルが表示されます。これは、すべての ComboBox オブジェクトの標準の高さを設定します。 XAML ファイルにこのディクショナリを含まれているため、すべてのコンボ ボックスの既定の高さは 23px になります。

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

2. ActivityIconConverter は Shared フォルダーを介して提供されるユーティリティ クラスで、すべてのアクティビティアイコンを標準的な方法で指定できます。 詳しくは、以下の「アイコン」セクションをご覧ください。

   
   

   

   
   

アイコン

すべての UiPath アクティビティで見られるアイコンのように、XAML 形式のデザイナー ファイルに直接追加することもできますが、それらを 1 つの専用のファイルに追加し、前述の ActivityIconConverter を使用して各アクティビティにプルするのが推奨されます。 この方法では、メイン デザイナー ファイルに多くの場合、アイコン コードが整理されないままです。

Icons.xaml

デザイン プロジェクト内で、[Themes > Icons.xaml] に移動します。

このファイルには、親スコープと子アクティビティのアイコンを保持し、そのようにラベル付けされている 2 つのコード ブロックがあります。 各アイコンの内容は明らかに変化しますが、定数を維持しなければならないのは x:Key 属性であり、フォームを <Activity Name>Iconします。子アクティビティのアイコン コードは、例えば次のような形式です。

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

デザイナー ファイル

デザイナー ファイル ChildActivityDesigner.xamlに戻ります。 次のコード ブロックは、デザイナーにアイコンを追加する役割を担っており、パッケージ内のすべてのアクティビティで一定です。 Icons.xaml でアクティビティと同じ名前のキーを検索して、その XAML コードを現在のファイルに追加します。 ConverterParameter がデザイナー プロジェクトを名前で参照している点にご注意ください。

<a href="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>

コンポーネントを追加する

今回のリリースではデザイナーの権限を持つようになったものの、まだ設定は空白です。 このフィールドを展開するために、子アクティビティの各入力に 1 つずつ、2 つのテキスト フィールドを追加します。

Activity Decorator

まず、アクティビティに UiPath の外観と操作感を付与します。 デザインを変更するには、デザイナーのアイコン コードのすぐ下に ActivityDecoratorControl を追加します。 Visual Studio では UiPath.Shared.Activities.Design.Controls 名前空間のインポートを求めることがありますが、インポート可能でない場合は、ファイルの先頭のクラス定義にも追加します。

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

デザイナー コンポーネントはすべて ActivityDecoratorControlにラップする必要があります。これにより、大きなデザイナーを最小化してメッセージ「ダブルクリックして表示する」をその場に表示するなど、標準的な動作が可能です。 以下のような詳細情報は小さいものの、組み合わせて、アクティビティ パッケージ全体に UiPath の操作性を与えます。

パッケージをリビルドすると、パッケージがわずかに異なって表示されます。

グリッド レイアウト

次に、ラベルやテキスト フィールドを魅力的な方法で表示できるようにアクティビティのレイアウトを設定します。 WPFには 6つの主要なレイアウトがありますが、今後はグリッドパネルを使用してコントロールを保持します。 グリッドは、まず複数の行と列をそれぞれ、その高さと幅とともに定義することによって機能します。 まず、2 つの行と 2 つの列を定義します。

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

高さと幅には実際の値が含まれていないことに注意してください。代わりにワイルドカード文字 (*) を使用します。 正確な数値を自由に指定できますが、この表記により、各セルはその周辺のセルに関連して動的にサイズ変更できます。 RowDefinition の高さはどちらも * ので、存在する分だけ垂直空間が消費されます。ただし、 ColumnDefinition の幅は * 3*、最初の列は幅に沿って利用可能な空白の 25% を消費し、2 番目の列は 75% の空白を消費します。

テキストボックスを追加する

これでレイアウトが設定されました。子アクティビティの 2 つの入力プロパティ ([1 つ目の数値] と [2 つ目の数値]) にユーザーがアクセスできるテキストボックスを 2 つ追加します。 最初の数値のグリッド定義の後に ラベル を追加することから始めます。

この Labelには、3 つのプロパティが設定されています。

• Grid.Row: 上で定義したグリッドの最初の行にラベルを配置します。
• Grid.Column: 上で定義したグリッドの最初の列にラベルを配置します。
• Content: ラベルに表示されるテキストを設定します。

WPF 要素で使用できるプロパティの完全なリストについては、こちらをご覧ください 。

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

次に、ユーザー入力を許可する 式テキスト ボックス を追加します。 Visual Studio から要求されない場合は、クラス定義にさらに 2 つの名前空間を手動で追加する必要があります。

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

この ExpressionTextBoxには 4 つのプロパティが設定されています。

• Grid.Row: 上で定義したグリッドの最初の行にラベルを配置します。
• Grid.Column: 上で定義したグリッドの 2 番目 の列にラベルを配置します。
• HintText: テキストボックスが空の場合、およびユーザーがこのフィールド上でホバーしたときにテキスト ボックスに表示されるツールチップ テキストを設定します。
• ExpressionType: このフィールドで許可されるデータ型を設定します。このプロパティは int 型の数値であるため、 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>

パッケージをリビルドすると次のようになります。

[2 番目の数値] プロパティに別の Label と ExpressionTextBox を追加します。これらのコントロールが Grid.Row="1"されます。 最終的な結果は次のようになります。

デザイナーをアクティビティにバインドする

いずれかのテキストボックスをクリックすると、テキスト ボックスが反応しないことがわかります。 これは、[ 式テキストボックス] の 動作が通常の テキストボックスと異なっているのでです。 テキストボックス String 入力がサポートされている場所で、ExpressionTextBoxes を使用すると、複雑な VB.Net 式 (例: Int32.MaxValue、 2+2、 SomeUiPathVariable) で、この値をアクティビティ内のプロパティにバインドできます。

デザイナー フィールドをアクティビティのプロパティにバインドするには、各 ExpressionTextBoxに 2 つのプロパティを追加します。

• OwnerActivity: デザイナーがアクティビティ ファイルにリンクするために使用する ViewModel を指定します。ここでは、常に ModelItem を指定します。
• Expression: このフィールドをバインドするアクティビティのプロパティを指定します。主なコンポーネントが 4 つあります。
• Binding: バインドするアクティビティ プロパティを名前で指定します。ModelItem にアクティビティのコンテンツが保持されている場合、 ModelItem.FirstNumber は First Number プロパティに直接リンクします。
• Converter: 異なる型のオブジェクトを変換するクラスを提供します。 この場合、デザイナー フィールドには intが保持されますが、アクティビティプロパティは InArgument<int>型であるため、それらの間のバインドを処理する標準の ArgumentToExpressionConverter を追加します。
• ConverterParameter: このフィールドをバインドする引数の型を指定します。 この場合、 InArgument<> プロパティにバインドするため、ConverterParameter は Inされますが、 InOut と Out もオプションです。
• Mode: デザイナーのフィールドの変更によってアクティビティのプロパティの更新がトリガーされるか (またはその逆も可能) を指定します。これを TwoWay に設定すると、ユーザーはデザイナー、またはプロパティのいずれかを更新できます。その他すべてのオプションについては、こちらをご覧ください。

ResourceDictionary に次の行を追加し、クラス定義に clr-namespace:System.Activities.Presentation.Converters;assembly=System.Activities.Presentation 名前空間をインポートして、 ArgumentToExpressionConverter をインポートします。

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

子アクティビティ デザイナーとコードはすべて、すべて以下のように表示されます。 各フィールドに値を入力し、対応するプロパティがどのように更新されるかを確認します。

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