CollapsiblePanel

Descripción

Con el CollapsiblePanel conseguiremos que cualquier control ASP.NET pueda ser maximizado o minimizado a nuestro antojo. Distinguiremos entre el contenido, que será el control que vaya a cerrarse y abrirse (por ejemplo un Panel) y el controlador, que será el control sobre el que deberemos hacer clic para cerrar y/o abrir el contenido.

El estado del contenido (abierto o cerrado) es guardado a lo largo de los postbacks, por lo que permanecerá igual cuando recarguemos una página. Además, podemos especificar si queremos que el contenido tenga una altura y/o anchura determinadas, o por el contrario permitimos que se dimensione como requiera.

Propiedades

• TargetControlID: el ID del control Web correspondiente al contenido.
• CollapsedSize: el tamaño en pixels del contenido cuando está cerrado. Lo habitual es ponerlo a 0, de modo que queda totalmente cerrado.
• ExpandedSize: el tamaño en pixels del contenido cuando esté abierto.
• Collapsed: especifica el estado del contenido cuando se inicializa la página. Puede ser collapsed (cerrado) o expanded (abierto).
• Scroll Contents: si especificamos true, se añadirá una barra de scroll cuando el tamaño sobrepaso al especificado en CollapsedSize y ExpandedSize. Si no queremos que se produzca ningún efecto, lo pondremos a false.
• ExpandControlID/CollapseControlID: el ID del control Web correspondiendo al controlador. Como vemos podemos elegir un controlador que maximice el contenido y otro que lo minimice. Habitualmente ambos atributos apuntan al mismo controlador.
• TextLabelID: el ID de la Label donde se especificará el estado en que se encuentra el contenido (ver las dos próximas propiedades).
• CollapsedText: texto que se mostrará en la Label especificada en TextLabelId cuando el controlador esté cerrado.
• ExpandedText: texto que se mostrará en la Label especificada en TextLabelId cuando el controlador esté abierto.
• ImageControlID: En lugar de un texto, podemos especificar una imagen para que sea ésta la que describa el estado en que se encuentra el contenido. Si además también hemos especificado un texto, éste se corresponderá con el texto alternativo de la imagen (el atributo “alt”).
• CollapsedImage: Path que apunta a la imagen que se mostrará cuando el contenido esté minimizado.
• ExpandedImage: Path que apunta a la imagen que se mostrará cuando el contenido esté maximizado.
• ExpandDirection: podemos definir que el contenido se abra de arriba a abajo o de izquierda a derecha. En el primer caso asignaremos “Vertical” y en el segundo “Horizontal”.

Mas Información aqui.