Crear controles personalizados (DecimalTextBox) – Windows Forms – 2

Resultado final de nuestros controles personalizados.En el tutorial anterior, solo ampliamos la clase TexBox que donde sobrescribimos el método OnKeyPress para que solo acepte números, ahora haremos algo parecido para que acepte números y decimales, además de que agregaremos una propiedad más al control para que permita al usuario especificar el número de decimales que debe aceptar el control, empecemos entonces.

Abrimos el proyecto anterior y a nuestro proyecto ControlesPersonalizados, agregamos un nuevo elemento del tipo Control de usuario y le ponemos por nombre DecimalTextBox, realizamos el mismo procedimiento para cambiar la herencia de la clase, de UserControl a TextBox.

Realizamos el mismo procedimiento del tutorial anterior para eliminar la línea de código this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font; del archivo DecmimalTextBox.Designer.cs, ahora dentro de la clase DecimalTextBox declaramos un campo privado del tipo short donde almacenaremos el número de decimales, posteriormente implementamos la propiedad NumeroDecimales del mismo tipo para actualizar o devolver el valor de nuestro campo, el código quedaría así:

private short decimales = 2; //por default permitira 2 decimales
//Implementar la propiedad que permita al usuario establecer el numero de decimales a mostrar
//Agregamos una descripcion a la propiedad que pueda leer el usuario
[Description("Define el número de decimales para el cuadro de texto.")]
public short NumeroDecimales
{
get { return this.decimales; }
set { this.decimales = value; }
}

Por default, inicializamos nuestro campo decimales con un valor de 2, esto hará que nuestro control acepte por default 2 decimales, pero el usuario puede especificar su valor por medio de la propiedad que acabamos de implementar.

Ya con la propiedad lista, ahora trabajaremos en el método OnKeyPress para sobrescribir el método original de la clase TextBox, aquí utilizaremos el campo decimales y nos apoyaremos en una variable del tipo bool para almacenar que ya se tiene o no el carácter “.” (punto) en el cuadro de texto.
Antes de esto, agregaremos el using System.Text.RegularExpressions; para utilizar la clase Regex.
El código para nuestro método debe quedar más o menos así:

private bool punto = false; //auxiliar para limitar el numero de puntos en el textbox
//sobrescribir el metodo OnKeyPress
protected override void OnKeyPress(KeyPressEventArgs e)
{
//verificar si el textbox contiene el caracter punto y actualizar nuestra variable a true si ya se tiene un punto
if (this.Text.Contains(".") == true)
punto = true;
else
punto = false;

//permitir solo los caractedes de digitos y punto
// e.KeyChar == (char)Keys.Home
if (char.IsDigit(e.KeyChar) || e.KeyChar == '.')
{
//validar si el usuario esta ingresando el caracter (punto)
if (e.KeyChar == '.')
{
//limitar el numero de puntos en el textbox
if (punto == false)
{
//si no existe ningun punto en el textbox, permitir el caracter
e.Handled = false;
punto = true;
}
else
e.Handled = true; // si ya existe un punto, bloquear el caracter

return;
}

//si el caracter es un digito
//comprobar que el cuadro de texto cumpla con la expresion regular:
//0 a n digitos(punto)n numero de decimales
//si cumple con la expresion, permitir el digito ingresado
if (Regex.IsMatch(this.Text, "^\\d*\\.\\d{" + decimales + "}$")) e.Handled = true;
}
else
{
//si es tecla de control especial, permitirla
if (Char.IsControl(e.KeyChar))
{
e.Handled = false;
}
else
e.Handled = true;
}
//e.Handled = e.KeyChar != (char)Keys.Back;
}

En nuestro método estamos forzando al cuadro de texto para que cumpla con la expresión regular (patrón) ejemplo: la expresión “^\\d*\\.\\d{2}$” permitiría el numero decimal del tipo 12345…n.00.

Terminado nuestro método, especificamos el icono de quede mostrar nuestro control en el cuadro de herramientas, generamos el proyecto ControlesPersonalizados o la solución entera, abrimos el formulario de nuestro proyecto de prueba y vemos que el nuevo control ya aparecerá en nuestro cuadro de herramientas.

Agregamos nuestro nuevo control al formulario y ejecutamos la aplicación, donde comprobamos que efectivamente solo permite el ingreso de dígitos, un punto y dos decimales (por default).

Si seleccionamos nuestro nuevo control en el formulario y nos vamos a la ventana de propiedades, ahí podemos encontrar nuestra nueva propiedad NumeroDecimales donde podemos especificar el número de decimales para nuestro textbox, cambiamos el valor 2 a 4, ejecutamos y comprobamos:

Hasta aquí ya tenemos un nuevo control personalizado, si queremos utilizarlo en otras aplicaciones que diseñemos, entonces debemos agregarlo al cuadro de herramientas (si ya tenemos agregado el control anterior, este se agregará automáticamente porque es parte del mismo ensamblado).

La descripción que aparece en el DecimalTextBox control, se la agregué utilizando la clase Description, similar a como se hizo en la descripción de la propiedad NumeroDecimales.

Descargar: Código fuente de la clase DecimalTextBox

Calificar esta entrada:

Anuncios

Un comentario en “Crear controles personalizados (DecimalTextBox) – Windows Forms – 2

  1. Para implementar una propiedad llamada Value que devuelva el valor que contiene el cuadro de texto pero como tipo de dato Decimal y ocultar la propiedad Text en la ventana de propiedades seria:

    //ocultar la propiedad Text
    [Browsable(false)]
    public override string Text
    {
    get
    {
    return base.Text;
    }
    set
    {
    base.Text = value;
    }
    }

    //implementar la propiedad Value que devuelva el valor con el tipo de dato correcto (Decimal)

    private decimal valor; //campo para almacenar el valor

    [Description(“Obtiene o establece el valor decimal para el DecimalTextBox.”)]
    public decimal Value
    {
    get
    {
    if (this.Text != “”)
    valor = Convert.ToDecimal(this.Text);

    return valor;
    }
    set
    {
    valor = value;

    if(valor!=0)
    this.Text = valor.ToString();
    }
    }

Escribe tu comentario:

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s