设计器文件

重要提示：

本文档指的是适用于 Visual Studio 的 UiPath Activity Creator 的已弃用版本。请在此处查看新文档。

简介

仅使用活动定义文件即可创建完整的活动，但添加设计器或用户界面几乎总是可以增强用户体验。设计器采用 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="https://docs.uipath.com/zh-CN/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/zh-CN/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="https://docs.uipath.com/zh-CN/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 文件中，因此所有下拉框的默认高度都为 23 像素。

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

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

   

图标

与所有 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="https://docs.uipath.com/zh-CN/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>

添加组件

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

活动修饰符

首先为活动指定 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="https://docs.uipath.com/zh-CN/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/zh-CN/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>