MarkLight以XML编写UI

# 写在前面

接触过 web 前端的人，应该都知道网页 以 Html+Css+Js 的形式构成，这种高度灵活的方式一直延续至今。当然后续推出了如 Vue 、 Rective 等前端框架和 Thymeleaf 、 Asp 等模板引擎。。。扯远了…

总之，我们可以借鉴 Web 的做法，使用类似的结构去编写 Unity Ui，如 Unity 的新 UI 系统 UIElement（UiToolkit ）也是这么做的。此文并不想介绍 UIElement，因为通过作者实际使用体验来说，UIElement 还有很多路要走，可能在制作编辑器领域可以打破原先 Gui 的桎梏，然而在运行时下的 UI，MarkLight 则舒服许多。

# 关于 MarkLight

在 Ui 框架的领域中一直流行 MVVM 的设计，M 模型 V 视图 VM 视图模型 通过三者的配合，可以将表现层与逻辑层相分离，有利于解除耦合。MarkLight 同样是使用了这一套设计方案，通过 Xml 文件编写 View, 配合 ViewModel 的 C# 文件进行控制。同时吸纳了 Html 的优点，使用类 Css 的 Xml 文件可以对控件进行统一的样式配置，这让换肤和界面规范统一变得十分容易。

# 快速食用

首先我们可以通过包管理器或者其他方式，将 MarkLight 导入项目中。

此时我们创建如下文件夹：

# 创建一个视图 View

右键 ->Create->View 创建一个名为 MainMenu 的 xml

给新创建的 Xml，写入如下内容：

<MainMenu>

    <Region Width="25%" Alignment="Left" BackgroundColor="#353535">

        <Group Spacing="10px">

            <Button Text="Play" Click="Play" />

            <Button Text="Options" Click="Options"/>

            <Button Id="btn" Text="Quit" Click="Quit"/>

            <Button Text="测试" Click="Test"/>

        </Group>

    </Region>

    <Region Width="75%" Alignment="Right" BackgroundColor="#949494">

    </Region>

</MainMenu>

右键 ->Create->View 创建一个名为 MainMenuScene 的 xml 作为根 Ui

<MainMenuScene>

    <UserInterface Width="1024" Height="768">

        <MainMenu />

    </UserInterface>

    <EventSystem />

</MainMenuScene>

创建一个空物体改名 UIRoot 并为其添加如下脚本，设置 MainView 为 MainMenuScene，Default Theme 为 Flat。

此时你将会看到场景中多了 UI，并且在 UIRoot 下生成了许多子物体。

# 绑定 ViewModel

在 ViewModels 文件夹下创建一个 MainMenu.cs 文件

public class MainMenu: UIView

{

        public void Play()

        {

            print("Play");

        }

        public void Options()

        {

            print("Options");

        }

        public void Quit()

        {

            print("Quit");

        }

    }

在其中添加方法可以绑定到 Button 的 Click 事件。

++ PS：在 MarkLight 中使用名称强相关进行绑定，所以所有的文件名、方法名都需要一致。 ++