如何实现页面的交互

前文中，我们学习了如何绘制页面及对话框。很显然，一个再美观的页面如果没有交互也会显得“死气沉沉”，更不用说使用体验了。本文将介绍如何在Phoenix框架下实现页面交互。

在进行具体的交互实现之前，需要先了解一些交互的基础知识：

以Lua为后台

对WPF有所了解的用户应该知道，xaml文件的后台逻辑是用cs文件进行编写的。在 Phoenix 平台中，为了统一脚本语言的编程和降低学习成本，我们选择了以 Lua 为后台。

在使用 Lua 后台脚本之前，需了解一些基本规则。
- Lua 后台脚本除了 Main.xaml 文件每个xaml文件都可以配，但是不一定要配。
- Lua 后台脚本的命名要与其对应页面(或对话框)的名字匹配。比如：
```
--页面及页面后台脚本文件命名
CustomPage.xaml
CustomPage.xaml.lua

--对话框及对话框后台脚本文件命名
CustomDialog.xaml
CustomDialog.xaml.lua
```
- 主页面调用的函数可以写在 \UI\Scripts\Scripts.lua里
基本的交互有哪些
- 各种触发操作，即事件。包括：
  - 单击（Click）
  - 双击（MouseDoubleClick）
  - 快捷（HotKey）
- 动态显示数据
  
  显示坐标、文件等。

有了这些基本概念之后，就可以开始我们的交互实现之旅了。

基于逻辑判断增加页面事件

有一些逻辑是页面代码无法处理的，譬如很多的逻辑判断。此时，使用UI来实现这些逻辑判断，并不是一个好的方案。因此，我们提供了UI的后台脚本来处理这些需求，通过调用页面后台函数来实现不同页面或UI控件之间的逻辑判断。

请参考以下步骤，在Lua后台脚本中定义函数，并在目标页面中调用函数：

在 \UI\Pages 文件夹下创建 CustomPage.xaml.lua 文件，用于定义函数。

示例代码如下：
```
CustomPage = {
    ShowDialog = function()
        Input.ShowDialog("NcStudio", "Pages\DialogBox\CustomDialog.xaml", nil)
    end
}
```
注意：这里我们使用到了Input库函数，这是UI框架为Lua后台脚本提供的库，其中的一些API函数很基础，用户必须掌握一些常用的。

在目标页面中使用 EventCallMainLuaFunctionBehavior(事件调用Lua函数行为)调用函数。

事件调用Lua函数行为语法为：

<ui:EventCallLuaFunctionBehavior Function=""  EventName="" />

示例代码如下：

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:ui="http://weihong.phoenix.ui.interactions"
    mc:Ignorable="d"
    x:Name="UserControl"
    >
    <Button Height="117" Content="Hello Dialog!" Width="337" FontSize="48" Foreground="Blue" >
        <i:Interaction.Behaviors>
            <ui:EventCallLuaFunctionBehavior Function="CustomPage.ShowDialog"  EventName="Click"/>
        </i:Interaction.Behaviors>
    </Button>
</UserControl>

结果显示如下：

Dlalog

ShowDlalog

至此，用户学会了如何通过调用函数的方式增加页面上各种基于逻辑判断的交互事件。

显示动态数据

显示动态数据是用户在界面开发中非常常用的需求，在WPF中提出了 Binding(绑定)的概念，使用非常方便。Phoenix 平台在此基础上提供了 DynamicBindingBehavior(动态绑定行为)来满足这种需求。

请参考以下步骤，呈现数据：

选择控件的显示属性及需要绑定的数据源(即寻址)。

控件的显示属性，如TextBlock的Text属性。数据源，即寻址，比如Phoenix.G.Axes[0].Position

通过 DynamicBindingBehavior(动态绑定行为)进行绑定。

动态绑定行为语法：

<ui:DynamicBindingBehavior Path="" UpdateInterval = "" Property="" />

示例代码如下：

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:ui="http://weihong.phoenix.ui.interactions"
    mc:Ignorable="d"
    x:Name="UserControl"
    >
    <TextBlock Height="117"  Width="337" FontSize="48" >
        <i:Interaction.Behaviors>
            <ui:DynamicBindingBehavior Path="Phoenix.G.Axes[0].Position"
                UpdateInterval = "100"
                Property="Text" />
        </i:Interaction.Behaviors>
    </TextBlock>
</UserControl>

结果显示如下：

Binding

注意：显示不全是大多数软件要面对的问题。对于控件的宽度和字符串长度的问题，在后续的文档中我们会介绍解决这个问题的办法。

小结

页面交互肯定不止本文中所述这些，但是这两种是非常常用的，也是能解决大多数问题的。如果有其他的需求，详细可以参考常用UI行为库

同样的，被调用的函数中逻辑也不会那么简单，其他支持可以参考 Input库

相关文档