Controles Personalizados I

Introducción

Cuando creamos aplicaciones que requieren el ingreso de parámetros numéricos para efectuar cálculos, a veces necesitamos filtrar en la entrada de los controles TextBox, el ingreso solo de números o en su defecto números con decimales. Cuando se trata de unos pocas casillas el asunto se simplifica con el uso de subrutinas que agregan a un evento el filtro correspondiente, sin embargo cuando se trata de muchas casillas o queremos ahorrarnos tiempo de digitación, podemos hacer uso de controles personalizados que hagan esta labor por nosotros.

Figura Nº01: "Uso TextBoxDecimal"

Lo que queremos en síntesis es tomar del ToolBox un TextBox (que en este caso llamaremos TextBoxDecimal) que al pegarlo a nuestra pantalla de diseño y posteriormente al ejecutarlo sólo permita el ingreso de números (Ver figura Nº01). En este artículo veremos como crear una clase que nos permita generar una librería que incorporaremos a nuestros proyectos. Primero generaremos nuestro control personalizado y luego lo usaremos en un proyecto cualquiera.

 

 

1. Generar Librería Personalizada

Primero deberemos crear un nuevo proyecto que llamaremos "TextBoxDecimal", este proyecto será una Librería de Clases (Ver figura Nº02).

Figura Nº02: "Crear el Proyecto"

Una vez creado el proyecto veremos en pantalla lo siguiente (Ver figura Nº03).

Figura Nº03: "Inicio del Proyecto"

Aquí lo que tenemos que hacer es borrar todo (desde Public Class hasta End Class), más adelante volveremos sobre esta pantalla que por ahora queda en blanco.

A continuación vamos al explorador de soluciones y agregamos la referencia que vamos a necesitar (Ver figura Nº04).

Figura Nº04: "Referencias del Proyecto"

Como en nuestro proyecto vamos a usar el control TextBox, lo que debemos agregar es la librería System.Windows.Form que se encuentra en la pestaña .NET (Ver figura Nº05).

Figura Nº05: "Agregar Referencia System.Windows.Form"

Luego volvemos al explorador de soluciones, efectuamos el cambio de nombre de la clase que originalmente se llamaba Class1.vb lo sobrescribimos y dejamos como TextBoxDecimal.vb. (Ver figura Nº06).

Figura Nº06: "Cambio de Nombre de la Clase"

Bien ahora estamos en condiciones de trabajar el código para crear nuestro control TexBox Personalizado

A continuación sigue código en Visual Basic.NET:

Option Explicit On

Imports System
Imports System.Windows.Forms

Aca creamos la cabecera donde anteriormente habíamos dejado espacio en blanco (Ver figura Nº03). Luego incluimos en nuestro control personalizado, la librería de formularios de Windows que agregamos como referencia en pasos anteriores (Ver figura Nº04 y Nº05).

Agregamos el espacio donde se desarrollara nuestra librería:

Option Explicit On 

Imports System
Imports System.Windows.Forms

Namespace TextBoxDecimal


End Namespace

Y finalmente la clase.

 Option Explicit On 
Imports System
Imports System.Windows.Forms
Namespace TextBoxDecimal

     Public Class TextBoxDecimal

     End Class
End Namespace

Hasta acá tenemos las referencias incluidas, el nombre del espacio donde se desarrolla nuestra librería y hemos empezado la clase, es decir tenemos el marco de referencia donde se desarrolla la librería que dará origen a nuestro TexBox personalizado, nos queda solo incluir el TexBox y la subrutina que filtrara los eventos que ocurran sobre el control.

Option Explicit On 
Imports System
Imports System.Windows.Forms
Namespace TextBoxDecimal

     Public Class TextBoxDecimal
        Inherits TextBox
        Public Sub ChangeText(ByVal sender As Object, ByVal e As KeyPressEventArgs) Handles MyBase.KeyPress
                    If (Not e.KeyChar.IsDigit(e.KeyChar)) And (Not e.KeyChar = Convert.ToChar(Keys.Back)) And _
                                           (Not (e.KeyChar = Convert.ToChar("."c) _ 
                            And CType(sender, TextBox).Text.IndexOfAny(".") = -1)) Then
                e.Handled = True
                                        End If

        End Sub

     End Class
End Namespace

Primero agregamos el control TextBox a través de la instrucción Inherits y luego escribimos la subrutina que actuara en los eventos que sucedan sobre nuestro control.

No voy a ahondar sobre esta subrutina de filtro por ser ampliamente conocida, sólo diré que mi mayor quebradero de cabeza, fue como asociar la subrutina de filtrado con el evento KeyPress que ocurriere sobre el TexBox.

La solución fue que al agregar en el evento MyBase.KeyPress.

Bien hasta acá tenemos lista la librería solo nos queda construir la solución (build solution) y en nuestra carpeta bin quedara un archivo TextBoxDecimal.dll, el cual debemos copiar y guardar para usar en nuestros proyectos.

 

 

2. Incluir Nuestra Librería Personalizada TextBoxDecimal en nuestros Proyectos

Primero creamos un nuevo proyecto (para probar nuestro control) o abrimos un proyecto donde queramos incluir el control personalizado.

Sobre el Toolbox, presionamos botón derecho y agregamos un nuevo ítem (Ver figura Nº07).

Figura Nº07: "Agregar Control TextBoxDecimal a un aplicación o proyecto"

Veremos aparecer la pantalla de personalización de la barra de herramientas, presionamos [Browse] (Ver figura Nº08), y buscamos la carpeta donde hayamos guardado TextBoxDecimal.dll , seleccionamos y aceptamos dicho archivo.

Figura Nº08: "Personalizar Toolbox "

Figura Nº09: "Agregar Control TextBoxDecimal al ToolBox"

Luego de haber seleccionado y aceptado TextBoxDecimal.dll. Aparecerá TexBoxDecimal chequeado (Ver figura Nº09), ahora sólo nos resta presionar [OK] y ya nos quedara en el Toolbox, el Control TextBoxDecimal (Ver figura Nº10).

Figura Nº10: "ToolBox Personalizado"

El control TextBoxDecimal actuara igual que un control TextBox regular con la salvedad que solo se puede escribir números y un máximo de un punto. No hay que escribir ninguna subrutina para usarlo, sólo pegarlo sobre nuestras pantallas de diseño.

---

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

Imports System
Imports System.Windows.Forms

Fichero con la DLL : nelsonc_TextBoxDecimal_dll.zip - 2,06 KB

(MD5 checksum: 1162EE54C7218B341A52B00F307CBD2C)

Fichero con el Código : nelsonc_TextBoxDecimal_src.zip - 12,0 KB

(MD5 checksum: C50D2BBA4E4385D2D3E9C4095CD3B798)

Fichero con DLL Aplicada : nelsonc_TextBoxDecimal_dem.zip - 23,9 KB

(MD5 checksum: E183FCCC8454447E1AFC373926D3C1A8)