设计器文件

重要提示： 本文档指的是 UiPath Activity Creator for Visual Studio 的已弃用版本。 请在 此处查看新文档。

简介

可以仅使用活动定义文件来创建完整的活动，但添加设计器或用户界面几乎总是会增强用户体验。 设计器以 XAML 编写，XAML 是一种基于 XML 的语言 (在此处进行更详细的说明) ，用于为 Windows Presentation Foundation (WPF) 应用程序创建前端。

导航至“ ChildActivityDesigner.xaml ”文件，并逐节演示，以更好地了解如何使用用户界面增强活动。

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

类定义

所有设计器都包含一个顶级组件，其中声明了一个类并导入了补充命名空间。 此示例扩展了“活动 设计器”类，这是所有此类组件的基类。

<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 文件中使用。 在此示例中，提供了两种类型的资源 - 样式字典 (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 是另一个 ResourceDictionary ，其中包含有助于保持设计器外观一致的标准 UiPath 样式。 查看此文件，您会看到以下样式，该样式为所有 ComboBox 对象设置了标准高度。 由于我们已将此字典包含在 XAML 文件中，因此所有组合框的默认高度都将为 23 像素。

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

2. ActivityIconConverter 是通过“共享”文件夹提供的实用程序类，可用于以标准方式指定所有活动图标。 有关更多详细信息，请参见下面的图标部分。

   
   

   

   
   

图标

与所有 UiPath 活动中的图标一样，可以将图标直接添加到 XAML 格式的设计器文件中，但我们的首选方法是将它们全部添加到一个专用文件中，并使用上述 ActivityIconConverter 将它们拉取到每个活动中。 通过这种方式，主设计器文件不会被通常很长的图标代码弄乱。

Icons.xaml

在“设计”项目中，导航到“主题”>“Icons.xaml”。

您会注意到，此文件中有两个代码块，分别保存“父作用域”和“子活动”的图标，并为其加上了类似标签。 每个图标的内容显然会有所不同，但必须保持不变的是 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>

添加组件

您现在已经掌握了设计器的基础知识，但它仍然完全空白！ 让我们通过添加两个文本字段来展开扩展，每个文本字段用于子活动的输入。

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％，第二列将占用 75％。

添加文本框

现在已经设置好布局，我们将添加两个文本框，用户可以使用这两个文本框访问“子活动”的两个输入属性 - “第一个数字”和“第二个数字”。 首先在第一个数字的网格定义后添加一个 标签 。

为此 Label设置了 3 个属性：

• Grid.Row：将标签放置在上面定义的网格的第一行中。
• Grid.Column：将标签放置在上面定义的网格的第一列中。
• “内容”：设置标签中显示的文本。

有关 WPF 元素可用属性的完整列表，请参阅此处 。

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

接下来，我们添加一个“表达式文本框”以供用户输入。 如果 Visual Studio 未提示您这样做，则必须在类定义中手动添加另外两个命名空间。

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

为此 ExpressionTextBox设置了 4 个属性:

• Grid.Row：将标签放置在上面定义的网格的第一行中。
• Grid.Column：将标签放置在上面定义的网格的 第二 列中。
• 提示文本：设置在文本框中为空以及用户将鼠标悬停在此字段上时显示的工具提示文本。
• “表达式类型”：设置此字段中允许的数据类型。 由于我们的属性是 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>

重建包，其现在应如下所示：

为“秒数” 属性再添加一个 Label 和 ExpressionTextBox ，请记住这些控件现在位于 Grid.Row="1"中。 最终结果应如下所示：

将设计器绑定到活动

尝试单击任一文本框，您会发现它们无响应。 这是因为“表达式 文本框”的工作方式与普通 文本框不同。 在文本框支持 String 输入的情况下，表达式文本框允许用户输入复杂的 VB.Net 表达式（例如 Int32.MaxValue 、 2+2 、 SomeUiPathVariable ），并且可以将此值绑定到活动中的属性。

要将设计器字段绑定到活动属性，请向每个 ExpressionTextBox添加另外 2 个属性：

• “所有者活动”：指定设计器用于链接到活动文件的 视图模型 。 就我们而言，这将 始终是“模型项目”。
• 表达式：提供此字段将绑定到的活动属性。 这里有 4 个主要组件：
• “绑定”：按名称指定要绑定的活动属性。 如果 ModelItem 包含活动的内容，则ModelItem.FirstNumber 将直接链接到“第一个数字”属性。
• Converter：提供用于在不同类型的对象之间转换的类。 在本例中，设计器字段包含 int ，但活动属性的类型为 InArgument<int> ，因此我们添加标准 ArgumentToExpressionConverter 来处理它们之间的绑定。
• ConverterParameter：指定此字段绑定到的参数类型。 在本例中，我们将绑定到 InArgument<> 属性，因此 ConverterParameter 为 In ，但 InOut 和 Out 也是选项。
• 模式：指示是在设计器字段中进行更改还是将触发活动属性的更改，反之亦然。 将此设置为 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>