.NET WinForms – Crear forma con barra de título personalizada

La primera aplicación que me tocó ver que no usaba la barra de título de Windows fue Winamp 2. Me parecía rara… y fea.

Pero la tendencia actual, al menos en aplicaciones para Windows, es que cada aplicación tenga el diseño que le venga en gana al programador. Lo podemos ver en los navegadores (todos queriéndose parecer a Chrome), Office 2007 en adelante, Adobe CS, FoxitPDF, y demás. También nosotros podemos hacer esto en nuestras aplicaciones en .NET.

Aquí cubriré lo más elemental. Cuestiones de diseño y el hacer que se vea bonito ya corre por cuenta de cada quien. Se los advierto: se verá feo, pero funcional (Y)

Creamos un proyecto nuevo en .NET (como lo deseen, aplicación o librería de clases). Añadimos una nueva forma al proyecto y la llamaremos myForm.

Lo primero que haremos será cambiar las siguientes propiedades de Form:

• ControlBox = False
• FormBorderStyle = Sizable
• Text = «»

ControlBox indica si se mostrarán los botones de minimizar, maximizar(restaurar) y cerrar. Text establece el título de la ventana. Haciendo estos cambios, la barra de título se oculta automáticamente.

Si no queremos dar la posibilidad de cambiar el tamaño de la ventana, entonces simplemente cambiamos FormBorderStyle a None, sin tener que modificar las otras opciones.

Después agregamos un Panel a la forma, que será la barra de título, con estas propiedades:

• (Name) = titleBar
• Dock = Top
• Size.Height = 25

Dentro de la barra, agregamos un Panel más, el cual contendrá los tres botones de control. La única propiedad que hay que modificar a este panel es Dock = Right.

Adentro, agregamos tres controles Button (o Image, si queremos darle un diseño, es mejor así), y los acomodamos dentro del Panel. Cada botón tendrá su propio evento Click definido de la siguiente forma:

private void minimize_Click(object sender, EventArgs e){
    this.WindowState = FormWindowState.Minimized;
}
private void maximize_Click(object sender, EventArgs e){
    this.WindowState = 
        (this.WindowState == FormWindowState.Maximized ?
            FormWindowState.Normal :
            FormWindowState.Maximized);
}
private void close_Click(object sender, EventArgs e){
    this.Close();
}

A titleBar, le agregamos un Label con las siguientes propiedades:

• (Name) = title
• Dock = Fill
• TextAlign = MiddleLeft

Este Label abarcará toda la barra de título, por lo que le agregaremos las funciones de maximizar/restaurar con doble clic (seleccionamos para DoubleClick el mismo evento del botón maximize) y el de arrastrar ventana, modificando los eventos MouseDown, MouseMove y MouseUp:

private Point pos = Point.Empty;
private bool move = false;
private void title_MouseDown(object sender, MouseEventArgs e) {
    pos = new Point(e.X, e.Y);
    move = true;
}
private void title_MouseUp(object sender, MouseEventArgs e) {
    move = false;
}
private void title_MouseMove(object sender, MouseEventArgs e) {
    if (move)
        this.Location = new Point((this.Left + e.X - pos.X),
            (this.Top + e.Y - pos.Y));
}

Además de todo esto, tendríamos que crear propiedades para modificar ciertos aspectos de la ventana. Por ejemplo:

public string Title {
    get { return title.Text; }
    set { title.Text = value; }
}

¿Por qué no usar la propiedad Text de Form? Porque esta propiedad es de las que, como ya mencioné en otro post, realiza cambios internamente, y uno de ellos es ocultar la barra de título cuando el texto está vacío y el ControlBox oculto. Por lo tanto, no podemos sobreescribir esta propiedad.

El resto de cosas que se puedan modificar lo haremos con las propiedades que necesitemos: cambiar el color de fondo de la barra, el estilo del texto, etc.

¿Y cómo hago que todos mis forms tengan lo mismo sin copy-paste?

Sólo requiere un pequeño paso: cambiar la clase de la que heredan nuestros Forms.

Cuando creamos un formulario nuevo, en realidad lo que se está haciendo es crear una clase que herede de Form. Por lo tanto, un formulario en realidad es una clase de la cual puede heredar cualquier otra clase.

Solamente tenemos que cambiar la clase de la cual heredan nuestros formularios.

public partial class Form1 : myForm {
    public Form1() {
        InitializeComponent();
    }
}

Eso es todo. Form1 aplicará todas las propiedades que establecimos en myForm, además de la barra y controles que utilizamos.

Claro que esto es casi nada comparado con lo que hacen DevExpress, ComponentOne y otros, pero como mencioné al principio, es un ejemplo muy básico, y podría ser suficiente para algunos.

¿Qué? ¿No fue suficiente la explicación? ¿Te dio flojera leerlo? ¡¡¡Pues léelo!!! No, no es cierto. Aquí está una aplicación de ejemplo en C#, para que lo chequen en vivo y a todo color:

*Actualización (16/06/2017)

Subí el ejemplo a un repositorio de GitHub. Está hecho con Visual Studio 2015, pero para .NET Framework 2.0, por lo que no sería problema tomar las clases y agregarlas a un proyecto en versiones menores de VS.

Código fuente (VS2015/.NET 2.0)