Controles Personalizados II

Introducción

En este artículo veremos como crear un control personalizado de un botón que cambia de apariencia, dependiendo de 2 estados: presionado o no presionado.

Figura Nº01: "Comportamiento Botón Personalizado"

En el articulo se hace referencia a "Controles Personalizados I", por lo que se recomienda una mirada para entender mejor lo que se describe.

 

1. Diseño

Para este caso en se pueden ver 4 Condiciones basicas: Botón en Reposo, Cursor Sobre Botón en Reposo, Botón Seleccionado y Cursor Sobre Botón Seleccionado. Sin embargo las últimas 2 pueden prestarse para confusión, por lo que es mejor considerarlas como una sola, con esto nos quedan 3 Condiciones Basicas (Ver tabla Nº01).

Condición	Descripción
Reposo	Es Cuando el Botón no ha sido seleccionado y el Cursor esta fuera del área del botón.
Sobre	Es Cuando el Botón no ha sido seleccionado y el Cursor esta dentro del área del botón.
Selección	Es Cuando el Botón ha sido seleccionado y el Cursor esta fuera/dentro del área del botón.

Tabla Nº01: "Estados del Botón Respecto del Cursor "

Lo que se quiere es tener en el cuadro de propiedades en la vista de diseño (Ver figura Nº02), efectuar los cambios pertinentes sin tener que recurrir a la programación de código y luego en cualquier momento consultar y obtener el estado en el que se encuentra el botón (presionado o no).

Figura Nº02: "Propiedades de ButtonHoverChange"

Como el control ButtonHoverChange que estamos creando, es a partir de un Button Normal, las características de: Align_Texto, Align_Imagen, Reposo_BackColor, Reposo_FontColor y Reposo_Image son equivalentes a las existentes en el conjunto de propiedades "Appearance", por lo que en la práctica da lo mismo definirlas en uno u otro lado. Para el diseño del control preferí agrupar (aunque fuera repitiendo) las características mencionadas para facilitar su uso.
Esto es el texto normal.

 

2. Generar Librería Personalizada

- Crear un Proyecto Librería de Clases "ButtonHoverChange".
- Borrar el Contenido dentro de Class1.vb
- Agregar Las siguientes Referencias: System.Windows.Form y System.Drawing.
- Cambiar el Nombre de Class1.vb a ButtonHoverChange.vb en el Explorador de Soluciones.
(*) Referencia Visual "Controles Personalizados I"

La idea en este control es ir definiendo las características del botón de acuerdo al estado y evento que vayan sucediéndose. Para facilitar la comprensión del código de la librería, es que lo he separado en 4 partes (Ver figura Nº03).

Figura Nº03: "Áreas del Código"

Estas 4 áreas están contenidas dentro de la clase Publica ButtonHoverChange que a su vez esta contenida en el espacio del mismo nombre. La descripción de las 4 áreas es la siguiente:

1. Declaración de Variables
Todas las variables a excepción de la variable estado, son de carácter privado y son usadas para guardar la característica asociada a la Propiedad Publica del mismo nombre, por ejemplo la variable _ReposoBackColor es donde se almacena el color inicial de la Propiedad Publica Reposo_BackColor(), y va ir cambiando del color inicial a los colores que el usuario seleccione a través de la Propiedad Publica.
En el caso de la variable estado, será donde almacenaremos a través de true o false, si el botón se encuentra presionado o no.

2. Propiedades Públicas
Se almacena la información de los estados del botón (Reposo, Sobre, Selección) y las características asociadas a cada estado.

3. Declaración de Eventos
De acuerdo a los eventos que sucedan con el botón, se varía el estado, y se cambia la apariencia del botón con las características almacenadas.

4. Función (Load)
Con cada cambio que efectúen los usuarios en las Propiedades Publicas, se llama a esta función con el objeto de cambiar las características de base en forma inmediata, según corresponda.

 

A continuación sigue un esquema del código en Visual Basic.NET y luego veremos algunas de las partes:

Option Explicit On
Imports System
Imports System.Windows.Forms
Imports System.Drawing

Namespace ButtonHoverChange

   Public Class ButtonHoverChange

      Inherits Button

      'Declaración de Variables
      [+][Variables]

      'Propiedades Publicas
      [+][Reposo]
      [+][Sobre]
      [+][Seleccion]
      [+][Alineacion]

      'Declaración de Eventos
      [+][Eventos]

      'Función (Load) 
      [+][Funciones]

      End Class

End Namespace

Para finalizar veremos en detalle una propiedad publica, una declaración de eventos y la función load, esto con el objeto de no extender innecesariamente el articulo, si se quiere se puede consultar directamente todo el código fuente desde el archivo zip.

 

Código Fuente de la Propiedad Publica [+][Reposo]

Public Property Reposo_BackColor() As Color
       Get
                   Return _ReposoBackColor
       End Get
       Set(ByVal Value As Color)
       _ReposoBackColor = Value
             load()
             Invalidate()
       End Set
End Property

A través de esta instancia (Public Property) se exponen los campos directamente al programador en modo de diseño del VB.NET, con las propiedades Get y Set, se leen o asigna los valores resultantes a la variable _ReposoBackColor. Ademas, cuando se asigna (Set) se llama a la función load( ). Finalmente, para variar la apariencia visual, se debe invocar Invalidate para volver a dibujar el control, en el modo de diseño.

 

Código Fuente de la Declaración de Eventos [+][Eventos]

Private Sub _MouseEnter(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.MouseEnter
             If Not estado Then
                            MyBase.BackColor = _SobreBackColor
                            MyBase.Image = _SobreImage
                            MyBase.ForeColor = _SobreFontColor
             Else
                            MyBase.BackColor = _SeleccionBackColor
                            MyBase.Image = _SeleccionImage
                            MyBase.ForeColor = _SeleccionFontColor
             End If
End Sub

El único comentario aquí, es que a través de MyBase hace referencia a la clase sobre la que se esta trabajando, que en este caso es Public Class ButtonHoverChange, y el control que insertamos al comienzo Inherits Button.

 

Código Fuente de Función Load()

Function load()
     
     
      MyBase.Image = _ReposoImage
                MyBase.ImageAlign = _ImageAlign
                MyBase.BackColor = _ReposoBackColor
                MyBase.ForeColor = _ReposoFontColor
                MyBase.TextAlign = _TextAlign
End Function

Funciona igual que lo descrito para la Declaración de Eventos. Esta función es llamada cada vez que se cambia una propiedad pública, actualizando el estado de las propiedades del control.

 

3. Incluir Nuestra Librería Personalizada ButtonHoverChange en nuestros Proyectos (*)

Primero creamos un nuevo proyecto (para probar nuestro control) o abrimos un proyecto donde queramos incluir el control personalizado.
- Seleccionamos agregar un nuevo ítem al ToolBox.
- Buscamos y Seleccionamos el archivo ButtonHoverChange.dll
- Aceptamos y ya nos quedara en el ToolBox el Control ButtonHoverChange.
(*) Referencia Visual "Controles Personalizados I"

 

4. Usar ButtonHoverChange

Para usar simplemente arrastramos desde el ToolBox hasta nuestra pantalla de diseño el ButtonHoverChange y luego modificamos sus propiedades de acuerdo a nuestras necesidades.
En todo momento se puede llamar a ButtonHoverChange.estado, para averiguar si se encuentra presionado o no (true o false).

 

---

Espacios de nombres usados en el código de este artículo:

Imports System
Imports System.Windows.Forms
Imports System.Drawing

Fichero con la DLL : nelsonc_ButtonHoverChange_dll.zip - 2,86 KB

(MD5 checksum: 8BBE65AC158711D4CE1B0E7A2AC5660B)

Fichero con el Código: nelsonc_ButtonHoverChange_src.zip - 20,5 KB

(MD5 checksum: 589EB34B1800CB9C72FDD3BE140772F0)

Fichero con DLL Aplicada : nelsonc_ButtonHoverChange_dem.zip - 49,4 KB

(MD5 checksum: 8432CC8804F62E6A0058DBD590D76436)