Click here to Skip to main content
15,861,125 members
Articles / Desktop Programming / Windows Forms

WinForms + Sciter: Embeddable HTML/CSS/TIScript Control for Modern UI Development

Rate me:
Please Sign up or sign in to vote.
5.00/5 (13 votes)
17 Jan 2019CPOL3 min read 48.3K   16   21
A lightweight HTML control for WinForms

Introduction

This short tutorial explains how to add a Sciter-based control to a WinForms application. Sciter is a cross-platform/single-binary HTML engine, free for commercial use.

You can create entire applications solely with Sciter, or you can embed it as a child control of a WinForms app. To work with Sciter in C#, we need SciterSharp library which offers .NET bindings over the official C/C++ SDK headers, and I am the author.

If you are new to Sciter, read my introductory walkthrough article.

This article is a KISS explanation of how to use Sciter in WinForms as a child control. Three methods are presented, starting with the simplest one.

Make sure to have Sciter SDK (grab it here) because we need to add Sciter DLL to our project.

Method 1 - Sciter Bootstrap

Here we use Sciter Bootstrap, an on-line automation tool to create the WinForms + Sciter project for us. If you are starting from scratch, use this method. The project comes with SciterSharp NuGeT already installed, and with boilerplate code.

  1. Go to http://misoftware.com.br/Bootstrap/Download
  2. Type the title of your project
  3. Select the radiobox WinForms in the C# - Classic desktop section
  4. Click the Download button
  5. Extract and then just open the solution in Visual Studio
  6. Compile and Run!

Method 2 - Code Based

If you already have a WinForms project, or don't want to use Sciter Bootstrap, you have to manually install SciterSharp and add sciter.dll to your project.

  1. Open or create a new WinForms project.
  2. Install SciterSharp NuGeT:

    PM> Install-Package SciterSharpWindows

  3. Add sciter.dll to your project (right-click the project and 'Add / Existing item..').
    Note: You must add the appropriated x86 or x64 version of sciter.dll, depending on the 'Platform target' you choose for your project in its Properties / Build tab.
  4. In the properties window of sciter.dll, configure 'Copy to Output Directory' property to 'Copy Always', this way sciter DLL can be found when running the project:

    Image 1

  5. Edit the code-behind of Form1 (click Form1.cs and press F7), and make it to look like:
    C#
    using System;
    using System.Drawing;
    using System.Windows.Forms;
    using SciterSharp.WinForms;
    
    namespace ProcessTable
    {
        public partial class Form1 : Form
        {
            private SciterControl _sciter_ctrl;
    
            public Form1()
            {
                InitializeComponent();
    
                _sciter_ctrl = new SciterControl();
                _sciter_ctrl.Location = new Point(15, 15);
                _sciter_ctrl.Size = new Size(500, 350);
                _sciter_ctrl.HandleCreated += SciterControl1_HandleCreated;
    
                Controls.Add(_sciter_ctrl);
            }
    
            private void SciterControl1_HandleCreated(object sender, EventArgs e)
            {
                // do any needed initialization
                _sciter_ctrl.SciterWnd.LoadHtml("<h1>Hello World!</h1>");
            }
        }
    }

    Note that we are simply adding a SciterControl directly to the Controls collection of the main form. You might want to tweak the position, size and parent control if desired.

    For loading the actual HTML of our control, we need to wait for its window handle to be created, that's why initialization must be done at the HandleCreated event.

  6. Compile and run, output should look like:

    Image 2

Method 3 - Toolbox Based

If you prefer the traditional way of drag'n'dropping the control from the toolbox for WYSIWYG composing your UI, follow this method. In the designer, you can add as many controls as you want, and you can also dock the control in the parent.

This first requires to configure the Toolbox so SciterControl appears in the list.

  1. As in Method 2, you must install SciterSharp NuGeT and add sciter.dll to your project
  2. Open the designer of Form1
  3. Open the toolbox, right-click it and select Choose items, click 'Browse' and then locate SciterSharpWindows.dll; SciterControl should appear in the toolbox list.
  4. Drag'n'drop from the toolbox to the designer, duuuuu...

Note however that it ends not being truly WYSIWYG since you are not able to preview the Sciter control with the loaded HTML at compose time (naturally, you can only load it at runtime). Instead, what you get is the following:

Image 3

Note that in the image I've added two Sciter controls (the right one is docked) and they just show some instructions of what you should do to manage this control, like loading the HTML.

System.TypeInitializationException:

If you get this error in the designer:

Image 4

..that's because VS can't find sciter.dll. You need to download Sciter's SDK, and add /bin/32 folder to your PATH. You might need to restart Visual Studio.

Epilogue

Visit my blog at http://misoftware.com.br where I have a regular series of tutorials covering Sciter development in general.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
MI Software
Brazil Brazil
Ramon has a bachelor in Information Systems at University of Caxias do Sul. He started his career in the creative area, working with web design, and then evolved to work with a more hardcore area of control systems engineering while making C#/.NET systems to automate every kind of process. This was when he discovered his passion for the low-level world, working with C, C++ and D development.
Check my things at http://misoftware.com.br/

Comments and Discussions

 
QuestionIs this can actually run in VB.net form? Pin
Johnlee Ragucos Mejarito13-Jul-17 0:00
Johnlee Ragucos Mejarito13-Jul-17 0:00 
AnswerRe: Is this can actually run in VB.net form? Pin
Ramon F. Mendes11-Sep-17 5:07
Ramon F. Mendes11-Sep-17 5:07 
GeneralMy vote of 5 Pin
ChristianCalvet8-Mar-17 19:05
ChristianCalvet8-Mar-17 19:05 
Questionmisoftware.rs has stopped. Pin
eslipak4-Feb-17 11:53
professionaleslipak4-Feb-17 11:53 
AnswerRe: misoftware.rs has stopped. Pin
Ramon F. Mendes14-Feb-17 1:33
Ramon F. Mendes14-Feb-17 1:33 
GeneralRe: misoftware.rs has stopped. Pin
eslipak14-Feb-17 10:08
professionaleslipak14-Feb-17 10:08 
QuestionSell this puppy. What's the advantage? Pin
Michael Breeden5-Jan-17 8:23
Michael Breeden5-Jan-17 8:23 
AnswerRe: Sell this puppy. What's the advantage? Pin
Ramon F. Mendes9-Jan-17 5:01
Ramon F. Mendes9-Jan-17 5:01 
GeneralRe: Sell this puppy. What's the advantage? Pin
Michael Breeden9-Jan-17 7:05
Michael Breeden9-Jan-17 7:05 
GeneralRe: Sell this puppy. What's the advantage? Pin
Ramon F. Mendes9-Jan-17 7:31
Ramon F. Mendes9-Jan-17 7:31 
GeneralRe: Sell this puppy. What's the advantage? Pin
Michael Breeden9-Jan-17 8:13
Michael Breeden9-Jan-17 8:13 
GeneralRe: Sell this puppy. What's the advantage? Pin
Ramon F. Mendes9-Jan-17 9:32
Ramon F. Mendes9-Jan-17 9:32 
GeneralRe: Sell this puppy. What's the advantage? Pin
Michael Breeden9-Jan-17 9:33
Michael Breeden9-Jan-17 9:33 
GeneralRe: Sell this puppy. What's the advantage? Pin
Ramon F. Mendes9-Jan-17 9:36
Ramon F. Mendes9-Jan-17 9:36 
GeneralRe: Sell this puppy. What's the advantage? Pin
Michael Breeden9-Jan-17 14:07
Michael Breeden9-Jan-17 14:07 
GeneralRe: Sell this puppy. What's the advantage? Pin
BillWoodruff20-Jan-17 0:48
professionalBillWoodruff20-Jan-17 0:48 
QuestionWPF Pin
Patrick Blackman4-Jan-17 11:48
professionalPatrick Blackman4-Jan-17 11:48 
AnswerRe: WPF Pin
Ramon F. Mendes9-Jan-17 4:55
Ramon F. Mendes9-Jan-17 4:55 
AnswerRe: WPF Pin
Ramon F. Mendes9-Jan-17 9:32
Ramon F. Mendes9-Jan-17 9:32 
Questionimages Pin
Nelek1-Jan-17 2:29
protectorNelek1-Jan-17 2:29 
AnswerRe: images Pin
Ramon F. Mendes1-Jan-17 9:19
Ramon F. Mendes1-Jan-17 9:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.