Imitando el menu de SharePoint

Hola a todos.

En esta ocasion le mostrare como añadir controles al Menu de ASP.NET, asi como estilos y codigo html para transformarlo completamente a como nuestro diseño lo demande. Para esto trataremos de imitar un menu de SharePoint.

Lo primero, es agregar un control al proyecto, una vez insertado, colocamos el cursor sobre el control, del lado derecho aparecera un boton, desplegamos el menu «Tasks», y nos vamos a «Edit Templates» luego en «Displays» seleecionamos «DynamicItemTemplate».

En el espacion en blanco colocamos dos controles «Label», el primero sera el Titulo de la opcion del menu y el segundo sera la Descripcion de la opcion. A cada control «Label» le asignamos el tipo de letra,color,tamaño,etc. una vez hecho esto, nos vamos al codigo aspx de la pagina, y editamos dentro de la etiqueta «<DynamicItemTemplate>».

Dentro de esta etiqueta, insertamos una tabla «<table>» y agregamos dos «<tr>» uno donde ira el Label del titulo y otro donde ira el Label Descripcion, y cada renglon contendra tres columnas «<td>» una sera la columna color gris de la izquierda, la segunda sera la separacion entre la primera columna y el texto, y la tercera sera el contenido, es decir los controles Label.

Luego de esto, en el control «Menu» agregamos los items que necesitemos.

Por ultimo, nos vamos al codigo .cs y aqui en el metodo «OnLoad()», buscamos el control con el metodo Page.FindControl(), y a partir de aqui, buscamos los ID’s de los controles Label’s y cambiamos su propiedad «Text» con el valor que necesitemos.

Teniendo como resultado:

Y el nuestro:

No es 100% igual pero con un poco de paciencia y bastante lado femenino podremos darle un diseño muy profesional a nuestros controles.

Descargar ejemplo

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 )

Imagen de Twitter

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

Foto de Facebook

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

Conectando a %s