DropDownList Color Picker

Quien no ha necesitado alguna vez poder echar mano de algún control para poder mostrar los colores del sistema y que los usuarios puedan personalizar su entorno.

Pues hoy vamos a retocar la presentación de un DropdonwList para mostrar el color de fondo con el color del registro.

Nuestro control se mostrara tal que así:

Para realizar esto solo necesitaremos un método.

private void CargarColores( DropDownList ddl )
{
    int index = -1;
    if (ddl.SelectedIndex > 0)
       index = ddl.SelectedIndex;
    //Inicializamos los colores y mostramos el mensaje
    // de seleccionar color.

    ddl.Items.Clear();
    ddl.Items.Add("Color...");
    foreach (int pos in Enum.GetValues(typeof
       (System.Drawing.KnownColor)))
    {

       string strnColor = Enum.GetName(typeof
          (System.Drawing.KnownColor), pos);
       System.Drawing.Color color =
          System.Drawing.Color.FromName(strnColor);

       if (!color.IsSystemColor)
       {
          ListItem item = new ListItem(color.Name,
            pos.ToString());

          item.Attributes.CssStyle.Add
            (HtmlTextWriterStyle.BackgroundColor,
              color.Name);

          ddl.Items.Add(item);
       }
    }

    //Si tenia indice lo seleccionamos.
    if (index > 0)
      ddl.SelectedIndex = index;
}

Para obtener los colores del sistema contamos con la enumeración System.Drawing.KnownColor el cual lo recorreremos para obtener un objeto System.Drawing.Color  y poderlo utilizar para generar los items del Dropdownlist .

foreach (int pos in Enum.GetValues(typeof(System.Drawing.KnownColor)))

Para que solo nos muestre los colores compatibles y no los de los controles del sistema  if (!color.IsSystemColor).

Finalmente crearemos el Item y le añadiremos el estilo adecuado para mostrar el color de fondo.

 

item.Attributes.CssStyle.Add(HtmlTextWriterStyle.BackgroundColor, color.Name);

 

Para que podáis jugar un poco con la pruebas he creado un proyecto que podréis descargar.

 Espero que sea de utilidad.

 

 

 

Anuncio publicitario

2 comentarios en “DropDownList Color Picker

  1. Jony dijo:

    si por javascript quiero digamos generar una alerta por cada color; ejemplo si selecciono el item con el texto azul salga no se un alert(‘color item azul’)

Deja una respuesta

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. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s