How to implement Sciter in C#

While CefSharp has long been a popular open-source solution for creating graphical user interfaces using HTML, CSS, and JavaScript, many companies use Sciter for the UI in their commercial applications. Sciter is an embeddable HTML/CSS/script engine designed for modern UI development, allowing web designers and developers to create sleek desktop applications using their web development skills.

This tutorial will guide you through the steps to integrate Sciter into your WinForms application using C#.

Step 1: Download Sciter Binaries

1. Visit the Sciter website and go to the Downloads page.
2. Click Download SDK to get the SDK (around 50MB, but you’ll only need about 12MB for this C# integration).
3. Extract the downloaded ZIP file, and navigate to the bin folder.
4. Copy the appropriate files based on your platform:
   • For 64-bit Windows, copy the contents of /bin/64.
   • For 32-bit Windows, copy the contents of /bin/32.
5. Paste the copied files into the bin/Debug and bin/Release folders of your WinForms project

Ensure you follow this step carefully to avoid errors, such as:

System.TypeInitializationException: The type initializer for 'SciterSharp.SciterWindow' threw an exception.

Step 2: Install the SciterSharpWindows NuGet Package

1. Open your WinForms project in Visual Studio.

2. In the Solution Explorer, right-click your project and select Manage NuGet Packages.

3. Search for SciterSharpWindows in the NuGet manager and install it.

   This will add the SciterSharp library to your project, enabling the necessary bindings for Sciter in C#.

Step 3: Add Sciter Control to Your Form

In your main form class, add the necessary using directive for SciterSharp:

using SciterSharp.WinForms;

In the Form_Load event, create an instance of the SciterControl, set it up to handle the control's creation event, and add it to the form. We'll make the Sciter control fill the entire form by setting its Dock property to Fill.

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

namespace Demo
{
    public partial class Form1 : Form
    {
        // Create a class-accessible 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
            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)
        {
            // Load HTML content into the Sciter control
            sciterElement.SciterWnd.LoadHtml(@"
                <h1 style='background-color:#03a9f4;color:white;'>
                    Hello, Sciter!
                </h1>
            ");
        }
    }
}

Now, run your application.

The Sciter control will be embedded in your WinForms application, displaying a "Hello, Sciter!" message in a styled <h1> element.