如何使用C＃在WinForms应用程序中实现Sciter(轻量级HTML和CSS UI引擎)

本文概述

• 要求
• 1.下载Sciter二进制文件
• 2.通过nuGet下载SciterSharpWindows
• 3.将控件添加到表单

CefSharp将永远是使用HTML, CSS和JavaScript创建图形用户界面的最佳开源解决方案。但是, 在商业方面, 有许多公司依赖Sciter来为其应用程序提供UI。 Sciter是用于现代UI开发的可嵌入HTML / CSS / script引擎。 Sciter为桌面UI开发带来了一系列Web技术。 Web设计人员和开发人员可以重用他们的经验和专业知识来创建外观现代的桌面应用程序。

与CefSharp相比, Sciter的优势？嗯, 一个实现CefSharp的空应用程序至少要有40MB, 而Sciter只有13MB。为了在你的C＃项目上实现Sciter, 我们将为@MISoftware创建的Sciter安装本机C＃绑定。

要求

1. 除了Visual Studio和nuGet软件包管理器, 你不需要任何特殊的东西。 nuGet默认情况下可从Visual Studio> 2010获得, 在这种情况下, 我们将使用Visual Studio Community 2017。
2. 我们将在教程中使用现有项目, 因此请确保首先创建一个空的(或使用现有的项目)WinForms C＃应用程序。

1.下载Sciter二进制文件

使用Sciter的第一件事是Sciter本身, 因为本机绑定不提供Sciter的来源。打开Sciter的官方网站, 然后转到下载区域, 然后单击”下载SDK”按钮。

注意

不用担心SDK的下载文件大小。通常大约为50MB(在所有平台的iOS, Android等平台上), 但是对于C＃, 我们只需要复制大约12MB。

从zip文件中, 你将需要根据你的平台复制bin文件夹中的所有内容：

这意味着如果你的WinForms项目正在使用x64复制/ bin / 64的内容, 或者如果你正在使用x86复制/ bin / 32的内容。现在, 需要将Sciter中的所有文件都放在项目的bin / Debug和bin / Release文件夹中。

确保正确执行此步骤, 否则稍后在尝试运行应用程序时, 你将获得异常, 即：

System.TypeInitializationException：’SciterSharp.SciterWindow’的类型初始值设定项引发了异常。

2.通过nuGet下载SciterSharpWindows

下一步, 我们需要在你的项目中为Sciter添加本机绑定。打开Visual Studio, 打开你的项目, 然后转到VS右上角的解决方案资源管理器, 然后右键单击你的项目。从下拉列表中选择管理NuGet软件包选项：

然后在紧急窗口中, 搜索SciterSharpWindows并将该软件包安装在你的项目中：

3.将控件添加到表单

接下来, 将SciterSharp类型导入你的表单类中(在类的顶部)：

using SciterSharp.WinForms;

然后, 在主窗体的formload事件上, 继续创建Sciter元素, 但在此之前, 将SciterElement暴露在你的类上以使其可用于其他方法。然后创建元素, 添加HandleCreated回调并将其附加到表单。在这种情况下, 我们通过将元素的Dock属性设置为Fill来在整个表单上呈现它：

using System.Windows.Forms;
using System;
using SciterSharp.WinForms;

namespace Sandbox
{
    public partial class Form1 : Form
    {
        // Create a class-accesible sciter control
        private SciterControl SciterElement;

        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            // Create a new instance of the sciter control
            SciterElement = new SciterControl();
            // Set the callback once the element is ready to be used
            SciterElement.HandleCreated += SciterControl1_HandleCreated;

            // Add the Sciter Control to the Form and fill it
            this.Controls.Add(SciterElement);
            SciterElement.Dock = DockStyle.Fill;
        }

        private void SciterControl1_HandleCreated(object sender, EventArgs e)
        {
            // Initialize with some HTML
            SciterElement.SciterWnd.LoadHtml(@"
                <h1 style='background-color:#03a9f4;color:white;'>
                    Hello World
                </h1>
            ");
        }
    }
}

前面的示例将生成以下形式：

就是这样！你可以在WinForm应用程序中轻松使用Sciter来创建很棒的, 令人印象深刻的图形用户界面。有关更多JavaScript, CSS和HTML接口如何工作的信息, 请参考Sciter项目的官方文档。

编码愉快！