Aprende a instalar y configurar Sciter en tu aplicación WinForms.

Cómo implementar Sciter (motor de interfaz de usuario de HTML y CSS ligero) en tu aplicación WinForms con C#

CefSharp será siempre la mejor solución de código abierto para crear interfaces gráficas de usuario con HTML, CSS y JavaScript . Sin embargo, en el aspecto comercial, hay muchas empresas que confían en Sciter para la interfaz de usuario de su aplicación . Sciter es un motor HTML / CSS / script integrable para el desarrollo de interfaces de usuario modernas. Sciter trae una pila de tecnologías web al desarrollo de UI de escritorio. Los diseñadores y desarrolladores web pueden reutilizar su experiencia y conocimientos para crear aplicaciones de escritorio de aspecto moderno.

¿Ventajas de Sciter en comparación con CefSharp? Bueno, una aplicación vacía que implemente CefSharp tendrá al menos 40 MB, mientras que Sciter solo tendrá unos 13 MB. Para implementar Sciter en su proyecto de C #, instalaremos los enlaces nativos de C # para Sciter creados por @MISoftware .

Requisitos

  1. No necesitará nada especial más que Visual Studio y el administrador de paquetes nuGet. nuGet está disponible por defecto desde Visual Studio> 2010, en este caso usaremos Visual Studio Community 2017.
  2. Seguiremos el tutorial con un proyecto ya existente, así que asegúrese de crear primero una aplicación WinForms C # vacía (o usar un proyecto existente).

1. Descarga los binarios de Sciter

Lo primero que necesitará para usar sciter es sciter en sí mismo porque los enlaces nativos no proporcionan la fuente de sciter. Abra el sitio web oficial de Sciter y vaya al área de descargas y haga clic en el botón Descargar SDK . 

Nota

No se preocupe por la descarga del SDK. Por lo general, es de unos 50 MB (con todas las plataformas iOS, Android, etc.), sin embargo, para C # necesitaremos copiar solo alrededor de 12 MB.

Desde el archivo zip, deberá copiar todo el contenido dentro de la carpeta bin de acuerdo con su plataforma:

Sciter Files

Eso significa que si tu proyecto WinForms está usando x64, copie el contenido de /bin/64o si está usando x86 copie el contenido de /bin/32. Todos los archivos del sciter ahora deben colocarse en las carpetas bin/Debugbin/Releasede su proyecto.

Asegúrese de realizar correctamente este paso; de lo contrario, más adelante, mientras intenta ejecutar su aplicación, obtendrá una excepción, a saber:

System.TypeInitializationException: el inicializador de tipo para 'SciterSharp.SciterWindow' arrojó una excepción.

2. Descargue SciterSharpWindows a través de nuGet

Como siguiente paso, debemos agregar los enlaces nativos para Sciter en su proyecto. Abra Visual Studio, abra su proyecto y vaya al explorador de soluciones en la esquina superior derecha de VS y haga clic derecho en su proyecto. En el menú desplegable, seleccione la opción Administrar paquetes NuGet:

Nuget Package Manager Project

Luego, en la ventana emergente, busca SciterSharpWindows e instala el paquete en tu proyecto:

Sciter NuGet Package

3. Agregue control a su formulario

A continuación, importe el tipo SciterSharp en su clase de formulario (en la parte superior de su clase):

using SciterSharp.WinForms;

Luego, en el evento formload de su formulario principal, proceda a crear el elemento Sciter pero antes, exponga el SciterElement en su clase para que sea accesible para otros métodos. Luego cree el elemento, agregue la devolución de llamada HandleCreated y añádalo al formulario. En este caso, lo representaremos en todo el formulario estableciendo la propiedad Dock del elemento en Rellenar:

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

namespace Sandbox
{
    public partial class Form1 : Form
    {
        // Crear un control sciter accesible para clases
        private SciterControl SciterElement;

        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            // Crea una nueva instancia del control sciter
            SciterElement = new SciterControl();
            // Configure la devolución de llamada una vez que el elemento esté listo para ser utilizado
            SciterElement.HandleCreated += SciterControl1_HandleCreated;

            // Agregue el control Sciter al formulario y rellénelo
            this.Controls.Add(SciterElement);
            SciterElement.Dock = DockStyle.Fill;
        }

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

El ejemplo anterior generaría el siguiente formulario:

Sciter Hello World C# WinForms

Y eso es ! Puede utilizar fácilmente Sciter en su aplicación WinForm para crear interfaces gráficas de usuario impresionantes e impresionantes. Para obtener más información sobre cómo funciona la interfaz scither JavaScript, CSS y HTML, consulte la documentación oficial del proyecto Sciter.

Que te diviertas ❤️!


Ingeniero de Software Senior en EPAM Anywhere. Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores