En algunas ocasiones se presentan proyectos que no revisten una complejidad alta, por tanto se planean en tiempo record, además de tener limitaciones de presupuesto, este tipo de situaciones no permite recurrir a nada que revista complejidad en su implementación, es en esos casos cuando se recurre al uso de los controles básicos que trae ASP Net.
En esta ocasión, se hizo necesario el uso del control Menú que viene de serie con Visual Studio, lo particular de la situación es que según el esquema de colores que se planteo suponía un pequeño problema, y es que la flecha que usa el control Menú para indicar que un elemento tiene subelementos es de color negro por defecto.
Si bien no hay mucha información al respecto, la susodicha flecha resulto ser un recurso incrustado en el control, de manera que el primer paso es conseguir la imagen original para conocer sus características.
Una vez hemos guardado copia de la imagen procedemos a revisar las propiedades de esta con el fin de obtener mas información sobre ella.
Como se puede observar se trata de un GIF de 15 x 15 pixeles, con profundidad de 8 bits. El siguiente paso consiste en crear una imagen totalmente transparente para el menú estático, y modificar la flecha existente cambiando su color de negro a gris claro para los ítems dinámicos.
En este punto es necesario el uso de alguna herramienta de diseño grafico, en mi caso usare GIMP, que además de ser Open Source es sencillo de usar e instalar, ya que no dispongo de las horas necesarias para la instalación que requeriría otros productos.
Abrimos GIMP y creamos una nueva imagen, en la ventana de propiedades definimos las opciones de la siguiente forma:
Una vez tenemos nuestra transparencia, la exportamos como GIF.
Ahora solo resta cambiar el color de la flecha existente para que quede de color gris, para ello abrimos la imagen en GIMP, ampliamos la imagen para poder manejarla mejor, seleccionamos la herramienta de rellenado
, seleccionamos el color blanco.
Ahora, señalamos el área de color negro y voila… ya quedo… se ve gris gracias al ajuste de Umbral.
De esta forma ya tenemos listas nuestras imágenes, ahora procedemos a vincularlas a nuestro menú, tal como se ve a continuación:
1: <asp:Menu ID="Menu" CssClass="menu" runat="server" DynamicHorizontalOffset="2" Orientation="Horizontal"
2: StaticSubMenuIndent="10px" DynamicPopOutImageUrl="~/Images/MenuArrowGrey.gif"StaticPopOutImageUrl="~/Images/Trasparency.gif">
3: <StaticSelectedStyle CssClass="staticSelectedStyle" />
4: <StaticMenuItemStyle CssClass="staticMenuItemStyle" />
Para ello basta con asignar a las propiedades StaticPopOutImageUrl y DynamicPopOutImageUrl las rutas de las imágenes y ya tenemos el menú de acuerdo a los requisitos.
Como se puede observar, los ítems estáticos ya no tienen la flecha, y los subitems la tienen de color gris, tal como requería.
El proceso es en realidad sencillo, la manipulación de las imágenes no representa mayor dificultad, y me permite alcanzar mis objetivos sin mayor dificultad.
No hay comentarios:
Publicar un comentario