Aprende a crear una aplicación con pestañas estilo navegador con la biblioteca EasyTabs.


Aunque no muchas aplicaciones necesitan tal estructura de pestañas de la misma manera que lo hace un navegador, saber cómo hacerlo puede ser útil. El uso de un componente de este tipo puede ser bastante útil si desea crear su propio navegador integrado en su aplicación o si trabaja con algún tipo de aplicación de diseño que utiliza múltiples lienzos y el usuario puede modificarlos. En este artículo le mostraremos cómo implementar pestañas estilo navegador en su aplicación WinForms en C # usando el componente EasyTabs.

1. Instale EasyTabs

Para implementar dichas pestañas en su aplicación WinForms con C #, necesitará usar la biblioteca EasyTabs. EasyTabs es una biblioteca impresionante que le permite usar un componente .NET con un conjunto de pestañas en el espacio de la barra de título, similar a Chrome, Firefox, Trillian u otros navegadores web. Su código fuente está alojado en Github y es un ejemplo útil para comprender en profundidad cómo funciona la biblioteca . Para instalar este paquete en su proyecto en Visual Studio, vaya al explorador de soluciones y haga clic derecho en su proyecto. En la lista desplegable, seleccione la opción Administrar paquetes NuGet:

NuGet package manager project Visual Studio

En el Administrador, vaya a la pestaña de exploración y busque el paquete EasyTabs:

Install EasyTabs

Seleccione el primer paquete, a saber, EasyTabs de Luke Stratman e instálelo en su proyecto. Una vez que finalice la instalación, podrá utilizar el espacio de nombres EasyTabs en su código.

2. Cree un formulario de prueba simple

Las pestañas siguen el principio de que cada pestaña creada será una instancia de un formulario nativo, por lo que la que crearemos Form1será el contenido de cada pestaña creada. Puede cambiar este comportamiento con condicionales en el siguiente paso durante la creación del AppContainer, sin embargo, para que su aplicación funcione rápidamente y comprenda cómo funciona la biblioteca, le recomendamos que la pruebe con un formulario único y simple. 

En este ejemplo, nuestro Form1 es realmente simple y tiene muchos componentes nativos, pero no hacen nada:

Form Design Simple

Sin embargo, el especial está dentro del código. Su formulario debe tener el captador para la propiedad ParentTabs que devuelve el ParentForm, así que asegúrese de agregar la propiedad en el código fuente de su formulario:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

// 1. Usar pestañas fáciles
using EasyTabs;

namespace Sandbox
{
    public partial class Form1 : Form
    {
        // 2. Importante: Declare ParentTabs
        protected TitleBarTabs ParentTabs
        {
            get
            {
                return (ParentForm as TitleBarTabs);
            }
        }

        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {

        }
    }
}

Ahora este formulario se puede mostrar en una pestaña del contenedor.

3. Cree un formulario de contenedor de aplicaciones

A continuación, deberá crear un nuevo formulario en su aplicación que amplíe la interfaz de usuario de TitleBarTabs. Este formulario no existe teóricamente y no se puede ver solo, simplemente funciona como un contenedor para las pestañas que se agregarán más adelante en el Punto de entrada de su aplicación. Su contenido de código será muy simple y requiere una cosa simple, un método que le permite al usuario crear una nueva pestaña con otra instancia de formulario, en nuestro ejemplo cada pestaña creada por el usuario será una instancia del Form1 creado en el paso anterior , esto para probar su aplicación, puede cambiar el contenido de Form1 como se menciona más adelante.

Importante

El archivo CS obviamente debe ser una instancia de formulario, no una simple clase C #; de lo contrario, el InitializeComponentmétodo disponible en cada formulario no estará disponible y su código no se compilará. Esto se puede determinar durante la creación del formulario utilizando el asistente en el área Explorador de soluciones.

using System;
// Usar EasyTabs
using EasyTabs;

namespace YOUR_APPLICATION_NAMESPACE
{
    public partial class AppContainer : TitleBarTabs
    {
        public AppContainer()
        {
            InitializeComponent();

            AeroPeekEnabled = true;
            TabRenderer = new ChromeTabRenderer(this);
        }

        // Manejar el método CreateTab que permite al usuario crear una nueva pestaña
        // en tu aplicación al hacer clic
        public override TitleBarTab CreateTab()
        {
            return new TitleBarTab(this)
            {
                // El contenido será una instancia de otro formulario.
                // En nuestro ejemplo, crearemos una nueva instancia de Form1
                Content = new Form1
                {
                    Text = "New Tab"
                }
            };
        }

        // El resto de los eventos en tu aplicación aquí si necesitas .....
    }
}

Tenga en cuenta que si intenta ver el formulario AppContainer en el diseñador de Visual Studio, verá esto:

Designer Error EasyTabs

Obtendrá este error porque, como se explicó, el diseñador está tratando de dibujar algo que es abstracto (nuestro formulario es abstracto una vez que extiende el en TitleBarTabslugar de Form), por lo tanto, se lanzará una excepción solo si intenta ver el formulario en el diseñador, de lo contrario es totalmente válido.

4. Establezca el punto de entrada de su aplicación como AppContainer

Proceda a cambiar el código de su archivo Program.cs principal, es decir, el punto de entrada para su aplicación. Aquí debe indicar que la aplicación (una instancia de AppContainer) debe iniciarse usando el en TitleBarTabsApplicationContextlugar del predeterminado. Aquí indicará cuál será el contenido de la primera pestaña que se cree en su aplicación, ya que este es como se mencionó un simple tutorial, será también una instancia del Form1 creado en el paso 2:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Windows.Forms;
using EasyTabs;

namespace YOUR_APPLICATION_NAMESPACE
{
    static class Program
    {
        /// <summary>
        /// El principal punto de entrada a la aplicación.
        /// </summary>
        [STAThread]
        static void Main()
        {
            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);

            AppContainer container = new AppContainer();

            // Agregar la pestaña inicial
            container.Tabs.Add(
                // Nuestra Primera pestaña creada por defecto en la Aplicación tendrá como contenido el Form1
                new TitleBarTab(container)
                {
                    Content = new Form1
                    {
                        Text = "New Tab"
                    }
                }
            );

            // Establecer pestaña inicial la primera
            container.SelectedTabIndex = 0;

            // Crea pestañas e inicia la aplicación
            TitleBarTabsApplicationContext applicationContext = new TitleBarTabsApplicationContext();
            applicationContext.Start(container);
            Application.Run(applicationContext);
        }
    }
}

Como último paso, inicie su aplicación como de costumbre y, en lugar del aburrido formulario predeterminado, ahora podrá usar pestañas de estilo Chrome:

Chrome Style Tabs in WinForms C#

Que te diviertas ❤️!


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