Click here to Skip to main content
13,251,399 members (51,979 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

4.1K views
3 bookmarked
Posted 19 Jan 2017

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

, 19 Jan 2017
Rate this:
Please Sign up or sign in to vote.
A lightweight HTML control for WPF

Introduction

This short tutorial explains how to add a Sciter-based control to a WPF 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 WPF app. To work with Sciter in C#, we need SciterSharp library which offers .NET bindings over the official C/C++ SDK headers, of which 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 WPF 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 WPF + 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.rs/Bootstrap/Download
  2. Type the title of your project
  3. Select the radiobox WPF 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 - Toolbox Based

If you prefer the traditional way of drag'n'droping 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.

You have to manually install SciterSharp and add sciter.dll to your project.

  1. Open or create or a new WPF project.
  2. Install SciterSharp NuGeT:
    PM> Install-Package SciterSharpWindows
  3. Add sciter.dll to your project (right-click the project and 'Add / Existing item..').
  4. Note: You must add the appropriated x86 or x64 version of sciter.dll (from Sciter's SDK) depending on the Platform target' you choose for your project in its Properties / Build tab.
  5. 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, else you will get a TypeInitializationException.
  6. Add the SciterControl.cs class file to your project, with the following content, and make sure to Build Solution:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Runtime.InteropServices;
    using System.Text;
    using System.Threading.Tasks;
    using System.Windows.Interop;
    using SciterSharp;
    
    namespace SciterBootstrap
    {
        class SciterControlHost : HwndHost
        {
            private SciterWindow _wnd;
    
            protected override HandleRef BuildWindowCore(HandleRef hwndParent)
            {
                _wnd = new SciterWindow();
                _wnd.CreateChildWindow(hwndParent.Handle);
                _wnd.LoadHtml("<h1 style=color:blue>Sciter Hello World!</h1>");
    
                return new HandleRef(this, _wnd._hwnd);
            }
    
            protected override void DestroyWindowCore(HandleRef hwnd)
            {
                _wnd.Destroy();
            }
        }
    }
  7. After compiling, double-click MainWindow.xaml. Check the Toolbox, it should reveal the SciterControl item:

  8. Drag'n'drop from the toolbox to the designer, duuuuu...

    Note however that it ends not being truly WYSIWYG since you will not be 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:

  9. Compile and run, output should look like:

Note that in SciterControl.cs is where we load the HTML of this Sciter control, that is, the Sciter Hello World! text.

Method 3 - Code Based

Instead of using the Toolbox, you can create a SciterControl instance and add it programmatically as a child of yours to your Main window.

  1. Follow Method 2, but instead of using the Toolbox/designer, you are going to do it programmatically in file MaindWindow.xaml.cs
  2. Your MaindWindow.xaml.cs should look like:
    public partial class MainWindow : Window
    {
        private SciterControlHost _sciterControl = new SciterControlHost();
    
        public MainWindow()
        {
            InitializeComponent();
    
            // Here we are adding the Sciter control as a child of the Grid
            SciterBorderHost.Child = _sciterControl;
        }
    }

Epilogue

Visit my blog at http://misoftware.rs 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)

Share

About the Author

Ramon F. Mendes
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.rs/

You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.171114.1 | Last Updated 20 Jan 2017
Article Copyright 2017 by Ramon F. Mendes
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid