使用绑定¶

使用绑定将属性或属性字段的值设置为来自另一个属性、属性字段或数据源的值。

绑定可以让节点、渲染通道、2D 效果、状态、状态对象和样式自动更新其属性的值，以响应属性值的变化或某外部事件的发生。

最简单的绑定是将节点的一个属性绑定到其自身的一个属性。您还可以将一个节点的属性和属性字段绑定到几个不同节点的属性和属性字段。请参阅：

创建简单绑定
绑定其他节点的属性
修改您绑定的属性的值

要在源属性的值发生变化时更改目标属性的值，反之亦然，使用双向绑定。

请参阅创建双向绑定。

复杂绑定表达式使用不同的变量和绑定函数。请参阅创建更复杂的绑定。

材质类型有其自己的特殊类型的绑定，用于统一变量和临时变量。请参阅材质类型绑定。

蓝色类型标记由绑定控制的属性。

当您为属性创建绑定时，来自该绑定的值将覆盖您在 Properties 中为该属性设置的值。

小技巧

在 Kanzi Studio 的 Properties 窗口中，带有 Bindings 的属性以蓝色字体标记，并且旁边显示 Binding 图标：

../../_images/binding-overrides-property-value.png

橙色字体标记具有多个覆盖源的属性：

../../_images/property-value-invalid-override.png

如果一个属性有多个覆盖源，只有优先级最高的那个会生效。请参阅属性系统。

使用绑定时请记住：

只有绑定到相似数据类型才有效。例如，您只能将颜色绑定到颜色，vector2 绑定到 vector2，等等。请参阅类型转换。
绑定取最后一个表达式的值，无论是赋值、一元还是二元运算，又或者只是常量值或变量本身。
在绑定中，您可以在四种基本类型之间转换字符串：整数、浮点、布尔值和字符串。

整数、浮点数和布尔值之间的转换为隐式，并取决于使用该值的属性类型。与字符串之间的相互转换为显式。

请参阅 Bindings expressions 参考。

要获得 Binding Editor 中错误消息及其解释的列表，请参阅排除绑定故障。

通过完成以下教程之一学习如何使用绑定：

将一个节点的旋转属性字段绑定到某个属性以创建仪表指针，通过属性可以控制指针。请参阅教程：创建仪表。
将一个节点的位置或大小绑定到另一个节点的位置或大小。请参阅教程：制作具有动态布局的应用程序。
将节点的旋转属性字段绑定到 Scroll View 节点的 Scroll Position 属性，以使用滑动手势旋转节点。请参阅教程：旋转 3D 模型。

小技巧

在 Kanzi Studio 的 Node Tree 窗口中，当状态机、绑定、数据源绑定或动画覆盖了某个节点中部分属性的值时，该节点旁边会显示一个指示灯。

要在 Kanzi Studio 工程中导航至覆盖的源，请右键点击覆盖指示灯，然后在上下文菜单中选择要导航至的源。

创建简单绑定¶

最简单的绑定是将节点的一个属性绑定到其自身的另一个属性。您还可以使用绑定运算符和函数来修改结果，并向同一节点添加多个绑定。

要创建简单绑定：

在 Node Tree 中，创建或选择您要绑定其属性的节点。

例如，创建一个 Button 2D 节点，并在 Properties 中添加和设置：
- Background Brush 到您用于填充 Button 2D 节点的 Color Brush、Texture Brush 或 Material Brush。请参阅调整 2D 节点的外观。
- Horizontal Alignment 和 Vertical Alignment 到 Center
- Layout Width 设置按钮的宽度。
- Render Transformation
  
  您在这个过程中使用此属性层以设置按钮的位置。
在 Properties 中，单击 + Add Binding。在 Binding Editor 中设置：
- 将 Property 到您要绑定的属性。
  
  例如，要绑定高度，请选择 Layout Height。
- 将（可选） Property Field 到您要绑定的属性字段。
  
  要绑定到整个属性，请将 Property Field 保持为 Whole property。
在 Expression 编辑器中，输入绑定表达式。

例如，要将高度绑定到同一节点的宽度，请输入：
```
{@./Node.Width}
```
单击 Save 以应用绑定并关闭 Binding Editor。

当您通过更改 Layout Width 属性的值来更改节点的宽度时，节点的高度也会相同地变化，并且按钮始终是正方形的。

小技巧

当您在 Binding Editor 中为绑定编写表达式时，向表达式中添加节点及其属性的最快且最准确的方法是将它们从 Properties 拖动到 Binding Editor 中的 Expression 编辑器。
小技巧

您可以通过以下方式应用绑定：
- 要在不关闭 Binding Editor 的情况下应用绑定，请单击 Apply。
  
  当您只编辑绑定表达式时，可以通过按下键盘上的 Shift 和 Enter 键来应用绑定。
- 要应用绑定并关闭 Binding Editor，请单击 Save。
将另一个绑定添加到相同的节点。

例如：
1. 在 Properties 中，单击 + Add Binding。在 Binding Editor 中设置：
  - Property 到 Layout Width
  - Expression 到
    abs({@./Node2D.RenderTransformation}.translationX * 0.5)
  单击 Save。
  
  小技巧
  
  您可以右键单击某个属性并选择 Create Binding，开始为该属性创建绑定。
  
  这样，您会自动将该属性添加到 Binding Editor 中。
  
  您将节点的宽度绑定到 Render Transformation 属性 Translation X 属性字段绝对值的一半。
  
  使用 abs 函数来计算绝对值。请参阅 Bindings expressions 参考中的 abs（绝对值）。
  
  小技巧
  
  要快速将函数调用添加到绑定表达式中，在 Binding Editor 中单击 Enter Operation 并选择您要调用的函数。
2. （可选）在 Properties 中，右键单击 Layout Width 属性，然后选择 Remove。
  
  您可以删除 Layout Width 属性，因为绑定控制该属性。
  
  小技巧
  
  要查看属性的绑定，请右键单击该属性并选择 Show Bindings。在 Show Bindings 窗口中，您可以添加、编辑和移除该属性类型的绑定。

当在 x 轴上移动按钮时，按钮的大小会发生变化。

绑定其他节点的属性¶

也可以绑定节点的属性和属性字段到其他节点的属性和属性字段。

要绑定其他节点的属性：

在 Node Tree 中创建或选择您要绑定其属性的节点。

例如，创建一个 Button 2D 节点，并在 Properties 中添加和设置：
- Background Brush 到您用于填充 Button 2D 节点的 Color Brush、Texture Brush 或 Material Brush。请参阅调整 2D 节点的外观。
- Horizontal Alignment 和 Vertical Alignment 到 Center
- Layout Width 和 Layout Height 用于设置按钮的大小。
- Render Transformation
  
  您在这个过程中使用此属性层以设置按钮的位置。
创建另一个节点，并绑定其中一个属性到您在上一步中创建的节点属性。

例如：
1. 在 Node Tree 按 Alt 并右键单击中，选择您创建的节点，选择 Text Block 2D，并在 Properties 中添加并将 Horizontal Alignment 和 Vertical Alignment 属性设置为 Center。
2. 在 Properties 中，单击 + Add Binding。在 Binding Editor 中设置：
  - Property 到 Text
  - Expression 到
    int({@../Node2D.RenderTransformation}.translationX)
    小技巧
    
    当在绑定表达式中使用 @ 符号并将其放在节点路径前面时，Kanzi Studio：
    - 检查路径是否有效，如果路径无效，则在 Binding Editor 中显示错误消息。
    - 每当节点树中源节点和目标节点之间的位置发生变化时，更新绑定表达式中的路径。
    使用 @ 符号，您只能在同一个预设内创建绑定，而不能在预设之间创建绑定。
  单击 Save。
  
  您将节点的 Text 属性绑定到其父节点的 Render Transformation 属性 Translation X 属性字段，并将值转换为整数。请参阅 Bindings expressions 参考中的类型转换。

当您更改在过程的第一步中创建的节点的 Render Transformation 属性 Translation X 属性字段的值时，Text Block 2D 节点中的文本会更改为显示节点在 x 轴上的当前位置。

修改您绑定的属性的值¶

您可以获取您想要绑定的属性的当前值并修改该值。

要修改您想要绑定的属性的值：

在 Node Tree 中创建或选择您要绑定其属性的节点。

例如，创建一个 Button 2D 节点，并在 Properties 中添加和设置：
- Background Brush 到您用于填充 Button 2D 节点的 Color Brush、Texture Brush 或 Material Brush。请参阅调整 2D 节点的外观。
- Horizontal Alignment 和 Vertical Alignment 到 Center
- Layout Width 和 Layout Height 用于设置按钮的大小。
- Render Transformation
  
  您在这个过程中使用此属性层以设置按钮的位置。
在 Properties 中，单击 + Add Binding。在 Binding Editor 中设置：
- 将 Property 到您想要绑定的属性。
  
  例如，要绑定其中一个 Render Transformation 属性字段，请选择 Render Transformation。
- 将 Property Field 到您要绑定的属性字段。
  
  例如，要绑定 y 轴上的 Translation 属性字段，选择 Translation Y。
- Expression 到
```
getCurrentValue().translationX
```
使用 getCurrentValue 绑定函数获取您通过此绑定修改的 Render Transformation 属性的值。Kanzi Studio 在 Bindings > Modifiers 中创建绑定。

当通过更改 Render Transformation 属性 Translation X 属性字段的值在 x 轴上移动节点时，节点在 y 轴上移动相同的距离。

创建到源绑定¶

使用到源绑定来设置：

在另一个项目项中，您设置为绑定推送目标的属性值。
一个属性值也会受到其他输入源的影响，例如用户输入。

例如，要创建一个更新 Toggle Button 切换状态的 to-source 绑定，请执行以下操作：

创建一个 Toggle Button 节点，其切换状态您希望通过绑定进行更新。

例如：
1. 在 Node Tree 中，创建一个 Stack Layout 2D 节点。
2. 从 Asset Packages > Factory Content 中，将 Toggle Button 拖到 Node Tree 上，并将其放在 Stack Layout 2D 节点上。请参阅 Factory Content 资源。
创建一个控件，以绑定 Toggle Button 节点的切换状态。

例如：
1. 从 Asset Packages > Factory Content 中，将 Slider 拖到 Node Tree 上，并将其放在 Stack Layout 2D 节点上。在 Properties 中，添加并设置滑块的最低值和最高值。请参阅使用来自 Factory Content 的滑块。。
2. （可选） In the Stack Layout 2D node, create a Text Block 2D node that shows the slider value.
选择 Toggle Button 节点。在 Properties 中，点击 + Add Binding，并在 Binding Editor 中设置：
- Binding Mode 到 To source
- Push Target 到 .
- Property 到 Toggle Button > Toggle State
- Expression 到返回您要设置为切换状态的值的表达式。
  
  例如，设置为指向
```
{@../Slider/RangeConcept.Value} == 0 ? 0 : 1
```
  此绑定使用条件运算符来切换 Toggle Button：
  - 当 Slider 的值为零时关闭。
  - 当 Slider 的值不为零时开启。
  请参阅？（条件）。
小技巧

您可以右键单击某个属性并选择 Create Binding，开始为该属性创建绑定。

这样，您会自动将该属性添加到 Binding Editor 中。

现在，当在 Preview 中时，您：

将滑块调整为大于零的值，Kanzi 在切换按钮上切换。
将滑块调整为零，Kanzi 关闭切换按钮。
切换切换按钮，滑块会保持其值。

这使用户能够调整设置的值，并快速启用和禁用该设置。例如，您可以创建一个音量控制。

../../_images/preview-toggle-state-slider-control.gif

创建双向绑定¶

要在源属性的值发生变化时更改目标属性的值，反之亦然，使用双向绑定。

例如，使用双向绑定使用户能够通过单击 List Box 节点中的项目或使用滑块来选择列表框中的项目。

要在两个节点的属性之间创建双向绑定：

创建您想要在其间绑定属性的两个节点中的第一个节点。

例如：从 Asset Packages > Factory Content 将 Cover Flow 拖到 Preview。请参阅 Factory Content 资源。

在 Cover Flow > Scene > Trajectory List Box 3D 节点中，Selection Behavior 属性被设置为 Bring Center。这样，当用户点击该列表框中的一个项目时，列表框会将该项目移到列表框的中心。
创建您要在其间绑定属性的两个节点中的第二个节点。

例如：
1. 从 Asset Packages > Factory Content 将 Slider 拖到 Preview。请参阅使用来自 Factory Content 的滑块。。
2. 在 Node Tree 中选择 Slider 节点，在 Properties 中点击 + Add Binding，并在 Binding Editor 中设置：
  - Property 到 Maximum Value
  - Expression 到
    {@../Cover Flow/Scene/Trajectory List Box 3D/ListBoxConcept.ItemCount} - 1
  您将 Slider 节点的最高值绑定到 Trajectory List Box 3D 节点中最后一个项目的索引。Slider 节点的最低值默认情况下为 0。这样，您可以将 Slider 节点中的值范围设置为与 Trajectory List Box 3D 节点中的项目数量匹配。
要在您创建的节点的属性之间创建双向绑定，请在 Node Tree 中选择 Slider 节点，在 Properties 中单击 + Add Binding，并在 Binding Editor 中设置：
- Binding Mode 到 Two way
- 将 Property 到您想要绑定的属性。
  
  例如，将其设为 Value。
- 将 Source 到您要绑定目标属性的属性。
  
  例如，将其设置为 List Box 节点的 Selected Item Index 属性：
```
{@../Cover Flow/Scene/Trajectory List Box 3D/ListBoxConcept.SelectedItemIndex}
```
您将 Slider 节点的 Value 属性绑定到 Trajectory List Box 3D 节点的 Selected Item Index 属性。这样，您就在滑块旋钮的位置和列表框中选定的项目之间创建了双向连接。

在 Preview 中，当您移动滑块旋钮时，列表框中选定的项目会更改，而当您单击列表框中的项目时，滑块旋钮会移动。

创建更复杂的绑定¶

更复杂的绑定需要将一个节点的属性绑定到其他节点的属性，或者使用多个变量和绑定函数。在此示例中，您创建一个带有滑块的颜色选择器。

../../_images/bindings-color-wheel-complete.gif

要创建更复杂的绑定：

创建一个滑块，其环形旋钮沿着色轮移动：
1. 在 Assets 中，单击 Import Assets 并导入显示色轮和环形滑块旋钮的图像。
  
  例如，保存并导入这些图像。
2. 在 Prefabs 中，创建一个 Slider 2D 预设，并将其命名为 Color Picker。在 Properties 中，添加并设置：
  - Layout Width 和 Layout Height 以匹配显示色轮的图像的尺寸。
    
    例如，将其设为 700。
  - Horizontal Alignment 和 Vertical Alignment 到 Center
3. 将 Color Picker 预设件拖到 Node Tree 上，并将其放在 RootNode 节点上。
  
  通过这种方式，您可以在节点树中实例化预设，以便您可以在 Preview 中跟踪滑块的创建。
4. 在 Prefabs > Color Picker 预设中：
  1. 创建一个 Image 节点，该节点显示色轮并直观地表示滑块旋钮移动的轨道。在 Properties 中，添加并设置 Horizontal Alignment 和 Vertical Alignment 属性为 Center。
  2. 创建一个 Trajectory Layout 2D 节点，作为移动滑块旋钮的轨道。在 Properties 中，添加并设置：
    - Layout Width 和 Layout Height 之间的差异是显示色轮和滑块旋钮的图像尺寸之间的差异。
      
      例如，将其设为 665。
    - Horizontal Alignment 和 Vertical Alignment 到 Center
    这样即可定位色盘上的轨迹布局。
    
    小技巧
    
    要查看轨迹，在 Preview 中单击以进入 Analyze 模式，右键单击，然后选择 Debug objects。
  3. 在 Trajectory Layout 2D 节点中，创建一个 Image 节点，您将其用作滑块旋钮的视觉表示。
5. 在 Prefabs 中，选择 Trajectory Layout 2D 节点。在 Trajectory 属性旁边的 Properties 中，单击以转到该资源并设置：
  - 将 Radius 设置为 Trajectory Layout 2D 节点宽度的一半。
    
    例如，将其设为 332。
  - Angle 到 180。
    
    将轨迹起点设置为红色，色调为 0。
6. 创建一个别名，Kanzi 用于告诉滑块使用哪个轨迹作为滑块的轨道：
  1. 在 Prefabs 中，选择 Color Picker 预设。在 Dictionaries 中，点击 + Add Resource，选择 Create > Alias，并将别名命名为 $layout。
  2. 将 $layout 别名设置为指向 Color Picker 预设中的 Trajectory Layout 2D 节点。
7. 在 Prefabs 中，选择 Knob 节点。在 Properties 中，点击 + Add Binding，并在 Binding Editor 中设置：
  - Property 到 Trajectory Override Offset
  - Expression 到
    {@../../RangeConcept.NormalizedValue}
  单击 Save。
  
  此绑定使滑块旋钮沿定义滑轨的轨迹移动。

存储用户在色轮上选择的颜色：

在 Library > Property Types 中，创建一个属性类型并设置：
- Name 到 ColorPicker.Color
- Data Type 到 Color

在 Prefabs 中，选择 Color Picker 预设。在 Properties 中，单击 + Add Binding，并在 Binding Editor 中，设置：

Property 到 ColorPicker.Color

Expression 到

# This binding expression calculates the color of the color wheel
# in the position defined by the value of the slider.

# The color wheel shows a continuous range of colors in the HSL color space.
# Create a variable that you use to store the color value and set the
# initial values of the color channels:
# - Hue to 0
# - Saturation to 1
# - Lightness to 0.5
# - Alpha to 1
hslVector = Vector4(0, 1, 0.5, 1)

# Set the hue of the color to the value of the slider in the 0...1 range.
# For example, value 0 corresponds to red, and value 0.5 to cyan.
hslVector.x = {@./RangeConcept.Value}

# Convert the color from HSL to sRGB color space.
srgbColor = Color4(hslToSrgb(hslVector))

# Convert the color from sRGB to linear color space and return the color.
# A binding takes the value of the last expression, whether it is an assignment,
# unary or binary operation, or just a constant value or variable itself.
sRGBToLinear(srgbColor)

单击 Save。

您将 ColorPicker.Color 属性绑定到根据滑块的 Value 属性计算的颜色值。要在颜色空间之间进行转换，使用 hslToSrgb 和 sRGBToLinear 绑定函数。

../../_images/binding-color-picker-color.png

创建显示当前选定颜色的色样：
1. 在 Node Tree 中，创建一个 Empty Node 2D 节点并将其命名为 Color Swatch。在 Properties 中，添加并设置：
  - Foreground Brush 并选择 + Color Brush。
  - Layout Width 和 Layout Height 到 300。
  - Horizontal Alignment 和 Vertical Alignment 到 Center
  使用此节点显示用户通过滑块在色盘中选择的颜色。
2. 在 Node Tree 中，选择 Color Swatch 节点。在 Properties 中，点击 + Add Binding，并在 Binding Editor 中设置：
  - Binding Mode 到 To source
  - Push Target 到 .Node2D.ForegroundBrush
  - Property 到 Brush Color
  - Expression 到
    {@../Color Picker/ColorPicker.Color}
  单击 Save。
  
  通过这种方式，您为 Color Swatch 节点的 Foreground Brush 使用的画笔设置 Brush Color 属性的值。您将 Color Picker 节点中 Brush Color 属性的值绑定到 ColorPicker.Color 属性的值。
  
  小技巧
  
  您可以右键单击某个属性并选择 Create Binding，开始为该属性创建绑定。
  
  这样，您会自动将该属性添加到 Binding Editor 中。
在 Preview 中，当您沿着色轮拖动旋钮时，颜色样本会显示旋钮下的颜色。
（可选）将阴影应用到色轮、滑块旋钮和颜色样本：
1. 在 Library 中，按 Alt 并右键单击 Effects 并选择 Shadow Effect 2D。
  
  Shadow Effect 2D 效果为 2D 节点中内容的视觉形状应用阴影。请参阅使用 Shadow Effect 2D 效果。
2. 从 Library > Effects > 2D Effects 中，将 Shadow Effect 2D 效果拖到 Prefabs 上，并将其放在显示色轮的节点上。
  
  通过这种方式，您可以在该节点中将 Effect Prefab 属性设置为 Shadow Effect 2D 效果。
3. 为显示滑块旋钮和颜色样本的节点重复上一步骤。
4. 调整阴影效果的外观。
  
  例如：在 Library > Effects > 2D Effects 中，选择 Shadow Effect 2D 效果。在 Properties 中，添加并设置：
  - Shadow Blur Radius 到 5
  - Shadow Distance 到 2
  - Shadow Color 为完全不透明的黑色。
5. 在 Prefabs 中，选择 Color Picker 预设。在 Properties 中，将 Layout Width 和 Layout Height 属性设置为在布局中留出足够空间以容纳阴影的值。
  
  例如，将 Layout Width 和 Layout Height 设置为 710。

使用绑定加载资源¶

您可以使用 Acquire 绑定函数，通过其资源 ID 加载资源，这些 ID 是您在字符串属性中定义的。

例如，您可以创建一个绑定，从数据源获取文本资源的资源 ID，加载文本资源，并设置一个 Text Block 节点以显示该文本资源的内容。如果您对该文本资源进行本地化，Text Block 会自动显示应用程序当前区域设置的资源值。如果您更改数据源中的数据，绑定函数将获取资源 ID 指向的资源，并更新文本。

请参阅获取。

要使用绑定加载资源：

在 Kanzi Studio 中创建您想在应用程序中显示的资源。

例如：在本地化表中，为列表菜单中的标签创建文本资源。请参阅本地化应用程序。
创建一个数据源，其中字符串数据对象设置您要在应用程序中显示的资源的资源 ID。请参阅定义数据源和使用数据源。

例如：
1. 在 Kanzi Studio 的 Quick Start 窗口中，点击 Projects 并选择 Tutorials 选项卡。在 Data sources 教程旁边，点击。
2. 在 Library 中右键单击 Kanzi Engine Plugins，选择 Import Kanzi Engine Plugin，然后导入 <KanziWorkspace>/Tutorials/Data sources/Completed/Application/lib/Win64/GL_vs2019_Release_DLL/XML_data_source.dll Kanzi Engine 插件。
3. 在 Data Sources 中创建数据源。
  
  您使用该数据源为 List Box 节点中的项提供数据。请参阅教程：从数据源获取应用程序数据。
```
<menu type="list">
    <items>
        <item>
            <name type="string">Sounds</name>
        </item>
        <item>
            <name type="string">DateTime</name>
        </item>
        <item>
            <name type="string">Car</name>
        </item>
        <item>
            <name type="string">Display</name>
        </item>
        <item>
            <name type="string">Language</name>
        </item>
    </items>
</menu>
```
加载资源：
1. 使用 acquire 绑定函数根据资源 ID 加载资源。
  
  例如，选择 Text Block 节点，在该节点中您希望显示资源 ID 指向的内容，在 Properties 中单击 + Add Binding，并在 Binding Editor 中设置：
  - Property 到 Text
  - Expression 到
    acquire({DataContext.item.name})
  您将 Text 属性绑定到文本资源的内容，该文本资源的资源 ID 是您在 name 字符串数据对象的 menu 列表项中的数据源中定义的。
  
  小技巧
  
  您可以右键单击某个属性并选择 Create Binding，开始为该属性创建绑定。
  
  这样，您会自动将该属性添加到 Binding Editor 中。
2. 创建显示内容的节点，该内容是数据源中的资源 ID 所指向的内容。
  
  例如，将数据源的数据填充到 List Box 节点中，并将包含您添加了加载资源绑定的节点的预设用作项目模板。请参阅使用列表数据对象。

当您切换应用程序的区域设置或更改数据源中的数据时，acquire 绑定函数获取资源 ID 指向的资源，并更新 List Box 节点中的内容。

在绑定中使用分段函数¶

您可以使用 animate 绑定函数，通过分段函数设置属性值的变化方式。

例如，您可以使用 Animate 函数将仪表中的指针在 0 到 100 之间的移动速度设置得比在大于 100 的值时更快。

请参阅动画化。

要在绑定中使用分段函数，请执行以下操作：

创建一个 Animation Data 项目。请参阅动画 (Animations)。

例如，创建一个名为 Speed curve 的 Animation Data 项目，其中包含四个关键帧点，这些点定义了三个不同的段。创建关键帧在：
- Time 0 与 Value 30
- Time 100 与 Value 180
- Time 260 与 Value 300
- Time 320 与 Value 330
您使用这些关键帧设置速度指针在不同速度下的旋转。例如，当速度为100时，您将指针的旋转设置为180度。
在 Node Tree 中，选择或创建一个节点，以便使用您在上一步的 Animation Data 项目中创建的分段函数的属性。

例如，要创建一个速度指针，创建一个 Empty Node 3D 节点，将其命名为 Speed Needle，向其添加一个显示速度指针的 Model 节点，并定位 Model，以便您可以使用 Empty Node 3D 绕着指针上的期望点旋转 Model。请参阅编辑节点的原点。
在 Library > Property Types 中创建用于控制指针位置的属性类型。

例如，创建一个名为 Speed 的属性类型，并将 Upper Bound 属性设置为 320。当您创建一个属性类型时，Kanzi Studio 默认情况下会创建一个带有滑块编辑器的自定义浮点属性类型。
在 Node Tree 中选择表示速度指针的 Empty Node 3D 节点，并在 Properties 中添加您在上一步中创建的属性类型。
在 Properties 中，单击 + Add Binding。在 Binding Editor 中设置：
- 将 Property 和 Property Field 设置为您要使用的属性和属性字段，以便在绑定中使用表达式定位速度指针。
  
  例如，设置：
  - Property 到 Render Transformation
  - Property Field 到 Rotation
    
    为要实现动画效果的每个属性字段创建绑定。
- Expression 到使用分段函数动画化速度指针位置变化的表达式。
  
  使用 animate 函数将您用于控制指针位置的属性类型绑定到您在第一步中创建的 Animation Data 项中定义的分段函数。请参阅动画化。
  
  要指向 Animation Data 项，请使用以下任一方法：
  - 资源 ID。请参阅向资源字典添加资源。
  - Kzb URL。要获取资源的 kzb URL，在 Library 中右键单击资源并选择 Copy .kzb URL。
  例如：
```
createRotationY(-animate({@./Speed}, "kzb://cluster/Animation Data/Speed curve"))
```
单击 Save。

当您更改 Speed Needle 节点中 Speed 属性的值时，指针会移动。您在 Animation Data 项 Speed curve 中定义的分段函数设置了指针的旋转。指针移动在：
- 当 Speed 属性的值在 0 到 100 之间时，增量最大。
- 当 Speed 属性的值在 100 到 260 之间时，较小的增量。
- 当 Speed 属性的值在 260 到 320 之间时的最小增量。

创建带绑定的动态 kzb URL¶

您可以使用绑定表达式，在工程中动态创建资源的 kzb URL。例如，您可以创建一个绑定，该绑定：

基于数据源的数据创建纹理的 kzb URL。
将应用程序中的图像设置为使用该纹理。

例如，要创建一个动态生成纹理 kzb URL 的绑定：

在 Node Tree 中，创建或选择一个节点，其属性类型您希望用作在项目中创建资源的 kzb URL 的输入。您还可以使用自定义属性类型或数据源。请参阅创建属性类型和使用数据源。

例如，使用 Asset Packages > Factory Content 中的 Slider，根据该滑块的值在您的项目中动态创建纹理的 kzb URL。请参阅使用来自 Factory Content 的滑块。。

如果您的项目包含名为 Image0 到 Image10 的纹理，您可以根据滑块的值将 Image 节点的 Image 属性设置为这些纹理之一。例如，当滑块的值为 5.0 时，您将 Image 属性设置为 Image5 纹理。
在 Node Tree 中创建或选择一个您希望绑定到动态创建的 kzb URL 的节点，并在 Properties 中单击 + Add Binding。

例如，创建一个 Image 节点，并向该节点添加绑定。
在 Binding Editor 集中：
- 将 Property 到您要绑定到动态 kzb URL 的属性。
  
  例如，将其设为 Image。
- Expression 到绑定表达式，在该表达式中创建指向项目中资源的 kzb URL。
  
  例如，如果您将 Property 设置为 Image，使用一个表达式来创建基于您在第一步中创建的滑块值的纹理的 kzb URL。
```
"kzb://<projectname>/Textures/Image" + string(int({@../Slider/RangeConcept.Value}))
```
单击 Save。

您将 Image 属性的值绑定到 kzb URL 的静态部分，该部分指向项目中的纹理，以及来自滑块的动态部分。在连接这两个部分之前，必须将来自滑块的浮点值转换为整数，然后再将其转换为字符串。当您更改滑块的值时，Image 属性的值也会随之改变。

小技巧

要获取资源的 kzb URL，在 Library 中右键单击资源并选择 Copy .kzb URL。

在 Preview 中，当您移动滑块旋钮时，Image 节点显示的纹理会根据滑块的值而变化。

使用绑定将文本拆分为多个部分¶

您可以使用绑定将文本拆分为多个部分，并访问文本的每个部分。例如，拆分从数据源获取的运行时数据。请参阅使用数据源。

您可以选择：

在 Node Tree 中按这些节点的顺序显示多个节点中的文本部分。

您将文本部分的集合存储在一个属性中，并在每个节点中，您希望显示文本的一部分，使用绑定来推进该集合的迭代，并显示迭代器中的第一个元素。

因为绑定按照 Kanzi 执行这些绑定的顺序迭代文本部分的集合，所以 Node Tree 中节点的顺序决定了每个节点显示文本的哪一部分。

当您以这种方式显示文本的各个部分时，如果您在 Kanzi Studio 中更改显示文本部分的节点中的任何属性值，Kanzi Studio Preview 会重新实例化该节点中的绑定，并将迭代推进到您拆分的文本末尾之外。当这种情况发生时，您必须重新启动 Preview 以查看正确的文本。

请参阅按节点树顺序显示多个节点中的文本部分。。
以任意顺序显示多个节点中的文本部分。

您将文本部分的位置存储在单独的属性中，并在每个节点中，您希望显示文本的一部分，使用绑定从存储在特定属性中的位置显示文本部分。

请参阅以任意顺序在多个节点中显示文本部分。。

按节点树顺序显示多个节点中的文本部分。¶

当您将文本拆分为多个部分时，可以按照这些节点在 Node Tree 中的顺序，在多个节点中显示这些部分。

在此示例中，您将包含联系信息的文本拆分，并在不同的 Text Block 节点中显示名字、姓氏和电话号码。该示例使用您在 Kanzi Studio 中创建的自定义文本属性，但您可以使用来自任何其他来源的文本。要了解如何创建从数据源接收数据的联系人列表，请参阅教程：使用 Grid List Box 创建联系人列表。。

要将文本拆分为多个部分，并按照这些节点在 Node Tree 中的顺序在多个节点中显示这些部分：

创建您想要拆分的文本。

例如：
1. 在 Library 按 Alt 并右键单击 Property Types 中，选择 Property Type，并在 New Property Type 窗口中将 Data Type 设置为 Text。
2. 在 Prefabs 中创建一个 Dock Layout 2D 节点，您可以使用它来定义联系人条目的布局，并从 Library 中将您创建的文本属性类型拖动到 Dock Layout 2D 节点。
3. 在 Prefabs 中选择 Dock Layout 2D 节点，并在 Properties 中将自定义文本属性设置为您要拆分的文本。在文本中使用特定字符来分隔文本的各个部分。
  
  此示例使用空格作为分隔符。
创建您想要显示文本部分的节点，并设置这些节点的布局和外观。

例如：在 Dock Layout 2D 节点中的 Prefabs 中，创建并排列所需数量的 Text Block 2D 节点，以显示您要拆分的文本的所有部分，并设置每个 Text Block 2D 节点的外观。请参阅使用 Dock Layout 节点和使用 Text Block 节点。

在 Library > Property Types 中创建一个属性类型，并将 Data Type 设置为 Range。

范围属性存储一组值。
创建一个绑定，将文本拆分为多个部分，并将这些部分存储在一个范围内。

例如：在 Prefabs 中选择 Dock Layout 2D 节点，在 Properties 中点击 + Add Binding，并在 Binding Editor 中设置：
- Property 到 MyRangeProperty
- Expression 到
```
splitString({@./MyTextProperty}, " ")
```
  splitString 函数将文本字符串拆分为子字符串集合，并将该集合作为范围迭代器返回。
单击 Save。

通过此绑定，您可以使用空格作为分隔符拆分 MyTextProperty 属性中的文本，并将该文本作为文本部分的集合存储在 MyRangeProperty 范围属性中。
在 Prefabs 中选择第一个 Text Block 2D 节点，在 Properties 中单击 + Add Binding，并在 Binding Editor 中设置：
- Property 到 Text
- Expression 到
```
string(evaluate({@../MyRangeProperty}))
```
  评估函数推进范围的迭代。通过将评估转换为字符串，您可以读取范围中的第一个元素。
单击 Save。

通过此绑定，您可以在 MyRangeProperty 中获取文本的第一部分。
在 Properties 中，右键单击您在上一步中添加的绑定，然后选择 Copy Binding。
将绑定粘贴到您创建的其他 Text Block 2D 节点。

小技巧

要在多个节点中创建相同的绑定，请在 Node Tree 中选择这些节点，然后在 Properties 中点击 + Add Binding，或者右键单击某个属性并选择 Create Binding。

在每个 Text Block 2D 节点中，您使用相同的绑定来推进范围的迭代。这样，您可以逐步浏览范围内的文本部分，并在每个 Text Block 2D 节点中显示一个部分。

Text Block 2D 节点中的绑定按照 Kanzi 执行这些绑定的顺序迭代范围。

请注意，如果您现在在 Kanzi Studio 中更改任何 Text Block 2D 节点中的任何属性值，Kanzi 会重新实例化该节点中的绑定，并将范围迭代推进到您拆分的文本末尾之外。要查看正确的文本，请重新启动 Preview。

以任意顺序在多个节点中显示文本部分。¶

当您将文本拆分为多个部分时，可以以任意顺序在多个节点中显示这些部分。

要将文本拆分为多个部分并设置在多个节点中显示这些部分的顺序：

创建您想要拆分的文本。

例如：
1. 在 Library 按 Alt 并右键单击 Property Types 中，选择 Property Type，并在 New Property Type 窗口中将 Data Type 设置为 Text。
2. 在 Prefabs 中创建一个 Dock Layout 2D 节点，您可以使用它来定义联系人条目的布局，并从 Library 中将您创建的文本属性类型拖动到 Dock Layout 2D 节点。
3. 在 Prefabs 中选择 Dock Layout 2D 节点，并在 Properties 中将自定义文本属性设置为您要拆分的文本。在文本中使用特定字符来分隔文本的各个部分。
  
  此示例使用空格作为分隔符。
创建您想要显示文本部分的节点，并设置这些节点的布局和外观。

例如：在 Dock Layout 2D 节点中的 Prefabs 中，创建并排列所需数量的 Text Block 2D 节点，以显示您要拆分的文本的所有部分，并设置每个 Text Block 2D 节点的外观。请参阅使用 Dock Layout 节点和使用 Text Block 节点。

在 Library > Property Types 中创建一个属性类型，并将 Data Type 设置为 Range。

范围属性存储一组值。
在 Library > Property Types 中，根据需要多次复制范围属性类型，以便为您要拆分的文本的每个部分创建一个属性类型。
创建绑定，将文本拆分为多个部分，并将每个部分存储在一个范围属性中。

例如：
1. 在 Prefabs 中选择 Dock Layout 2D 节点，在 Properties 中点击 + Add Binding，并在 Binding Editor 中设置：
  - 将 Property 应用于您创建的第一个范围属性。
    
    例如，将其设为 LocationRange1。
  - Expression 到
    evaluate(splitString({@./MyTextProperty}, " "))
    使用 splitString 函数将 MyTextProperty 属性中的文本拆分为子字符串集合，并将该集合作为范围返回。然后，使用评估函数推进该范围的迭代。
  单击 Save。
  
  通过此绑定，您在 LocationRange1 属性中存储一个范围迭代器，该迭代器包含您拆分的文本的所有部分，并指向该迭代器中的第一个元素。
2. 添加另一个绑定，在 Binding Editor 中设置：
  - 将 Property 应用于您创建的第二个范围属性。
    
    例如，将其设为 LocationRange2。
  - Expression 返回您在第一个范围属性中存储的范围迭代器的下一个位置。
    
    例如，设置为指向
    evaluate({./LocationRange1})
  单击 Save。
  
  通过此绑定，您将一个范围迭代器存储在 LocationRange2 范围属性中，该迭代器包含您拆分的文本中除第一部分之外的所有部分，并指向该迭代器中的第一个元素。
3. 为您创建的每个范围属性类型添加绑定，并设置绑定表达式以推进您在前面的范围属性中存储的范围迭代器的迭代。
  
  例如，将 LocationRange3 绑定到推进您存储在 LocationRange2 属性中的范围迭代器的迭代的表达式，依此类推。
在每个您想显示部分文本的节点中，添加一个绑定以显示特定范围位置的第一个元素。

例如：
1. 在 Prefabs 中选择第一个 Text Block 2D 节点，在 Properties 中单击 + Add Binding，并在 Binding Editor 中设置：
  - Property 到 Text
  - Expression 到
    string({../LocationRange1})
    通过将范围的评估转换为字符串，您可以从范围中读取第一个元素。
  单击 Save。
  
  通过此绑定，您可以获取 LocationRange1 属性中的文本的第一部分。
2. 对每个 Text Block 2D 节点重复上一步，但在绑定表达式中更改您读取的范围属性。

格式化属性值的显示¶

使用 format 绑定函数来设置 Text Block 节点如何显示属性值。请参阅格式 (Format)。

使用 format，您可以：

将节点属性或数据源中的值插入到文本字符串中。
设置传递给函数的值在格式化文本中出现的顺序。请参阅在本地化字符串中设置文本顺序。
将浮点值截断为特定的小数位数。
为字符串内的格式化文本设置最小宽度。
当内容占用的空间小于最小宽度时，用空格或零填充剩余空间。请参阅格式化属性值的显示。
将格式化文本在可用空间内左对齐或右对齐。

要格式化属性值的显示：

在 Node Tree 中，创建您想要格式化其文本的 Text Block 节点。

例如，创建一个 Text Block 2D 节点并将其命名为 Stopwatch。

在此示例中，您使用 format 绑定函数来创建一个显示带前导零的分钟和秒的秒表。

请参阅使用 Text Block 节点。
在 Library > Property Types 中，创建一个属性类型，其 Data Type 为 Integer。将该属性类型添加到您在上一步中创建的节点。

例如，创建一个名为 Time 的属性类型，并将其添加到 Stopwatch 节点。

您使用此属性类型来保存秒表时间。

请参阅创建属性类型。
要增加秒表时间：
1. 在 Node Tree 中，选择显示秒表时间的节点。在 Node Components 中，按 Alt 并右键单击 Animation 并选择 Int Value Accumulator。
2. 在 Create Int Value Accumulator 对话框中，将 Target Property Type 设置为您在此过程中先前创建并添加到此节点的中间属性类型。
3. 在 Value Accumulator 设置中的 Node Components 中，设置：
  - Increment Size 到 1
  - 将 Minimum Value 设为 0。
  - Maximum Value 到 3599。
  - 将 Autoplay 设置为 enabled。
  - Bound Type 到 Loop
  - Increment Time Interval 到 1000
  通过这些设置，您可以为一个秒表配置值累加器，该秒表从0开始计数，计数到59分钟59秒，并在达到该时间后自动重新启动。
要了解如何随时间递增属性类型的值，请参阅增加属性类型的值。。

在 Node Tree 中，选择显示秒表时间的节点。在 Properties 中，单击 + Add Binding，并在 Binding Editor 中设置：

Property 到 Text

Expression 到

# Store the intermediate property value that tracks the elapsed seconds.
seconds = {@./MyApplication.Time}

# To get the number of minutes, divide seconds by 60.
minutes = seconds / 60

# Use the format function to pad empty space with zeroes and set the width
# to two characters.
# Use the modulo function to show seconds as a value between 0 and 59.
format("{:02}:{:02}", minutes, mod(seconds,60))

单击 Save。

要了解可用的占位符格式规则，请参阅日志消息参数格式规范。有关使用取模函数的信息，请参阅 mod（模数）。

../../_images/format-stopwatch-node-tree-project-structure.png

../../_images/format-stopwatch-add-binding.png

../../_images/format-stopwatch-binding-editor.png

在 Preview 中，秒表会自动开始计时。当分钟或秒为单个数字时，format 函数会将该值格式化为显示前导零。

要添加用于启动、暂停、恢复和停止秒表的控件，请参阅创建一个秒表。

将绑定用作属性继承的替代方法¶

您可以使用绑定作为属性继承的替代方法。您可以使用属性继承在父节点中定义一个属性，以便子节点继承该属性，但这仅在属性是可继承的并且允许所有子节点继承该属性时才有效。请参阅属性系统。

要将绑定用作属性继承的替代方法：

创建一个自定义属性，并将其添加到要为其创建绑定的那个节点中。
在 Node Tree 中选择您要添加绑定的节点，并在 Properties 中单击 + Add Binding。
在 Binding Editor 集中：
1. 将 Property 和 Property Field 绑定到您想要绑定的属性和特性。
2. 在 Expression 编辑器中输入表达式，以包含您在此过程开始时创建的自定义属性。
3. 单击 Save。

在 API 中使用绑定¶

有关详细信息，请参阅 Binding 类。

另请参阅¶

绑定 (Bindings)

自定义预设件的实例

Uniform bindings

Bindings expressions 参考

排除绑定故障

查找无效的项目项