デザイナー ファイル

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

Intro

アクティビティ定義ファイルだけで完全なアクティビティを作成することもできますが、ほとんどの場合、デザイナーまたは UI を追加することでユーザー エクスペリエンスが向上します。デザイナーは、XML ベースの言語である 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>を取得します。 これらのプレフィックスは、後でファイルで役立つコンポーネントを参照するために使用されます。

リソース

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

<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 つのレイアウトがあります。この例では、Grid パネルを使用してコントロールを保持します。Grid では、最初にいくつかの行と列、およびそれらの高さと幅を定義します。まず、行と列を 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 つ追加します。まず、1 つ目の数字用の Grid の定義の後に Label を追加します。

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

次に、ユーザーの入力を許可する ExpressionTextBox を追加します。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"されます。 最終的な結果は次のようになります。

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

いずれかのテキストボックスをクリックしようとすると、応答しないことがわかります。これは、ExpressionTextBox の動作が通常の TextBox とは異なるためです。TextBox でサポートされているのは String 型の入力ですが、ExpressionTextBox ではユーザーは複雑な 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>