Accordion

Descripción

El control Web Accordion te permite ubicar múltiples paneles, de modo que únicamente uno será visible en cada momento. Dichos paneles son los AccordionPane, de los que debemos definir la cabecera (Header) y el contenido (Content). El estado del Accordion es guardado, de modo que el AccordionPane activo se mantendrá visible a través de los postbacks.

Propiedades

9 propiedades definen al Accordion:
• SelectedIndex: Define el AccordionPane que estará activo por defecto, donde el primero tiene como índice 0. Es opcional y por defecto vale 0.
• HeaderCssClass / ContentCssClass: Identifica el nombre de la clase CSS utilizada para las cabeceras/contenidos (Header/content). Si se define como atributo del Accordion, la clase se aplicará por defecto a todos los AccordionPane de que esté compuesto. También se puede definir individualmente como atributo de cada AccordionPane.
• FadeTransitions: en caso de ser true se aplicacará un efecto de fading en la transición, en caso de ser false la transición se realizará de modo normal. Es optativo y por defecto vale false.
• TransitionDuration: cantidad de milisegundos que definen la duración de una transición. Se consigue un efecto muy agradeble con transición de unos 200-300 milisegundos.
• FramesPerSecond: número de frames por segundo que se usará en la animación de las transiciones. Suele ser suficiente un número superior a 40.
• AutoSize: define la restricción en la altura del Accordion. Puede tomar tres valores:
o None: No tiene ninguna restricción. La altura del Accordion no tiene límite. Es importante reseñar que esto puede implicar que otros elementos de la misma Web sean movidos.
o Limit: como máximo, el Accordion medirá lo que marque la propiedad Height. Si el Accordion es más alto de lo que marque su Height, al AccordionPane activo se le añadirá un scroll para ajustarse al límite. En caso de ser menor a ese límite el Accordion no sufre cambios.
o Fill: el Accordion siempre medirá lo que marqué su propiedad Height, expandiendo o minimizando el contenido en base a las necesidades.
• Header: es una propiedad del AccordionPane y define el valor de su cabecera.
• Content: es una propiedad del AccordionPane y define el valor de su contenido.
• DataSource: El DataSource a aplicar (totalmente optativo). Para una correcta aplicación hay que llamar a DataBind().
• DataSourceID: – Alternativamente, poder asignar el identificador de nuestra fuente de datos.
• DataMember: el miembro a enlazar cuando se usa el DataSourceID.

Sin embargo, lo que no se hará automáticamente, y debemos hacerlo nosotros siempre, es incluir una referencia al ScriptManager, lo que no requiere más que otro sencillo arrastre desde nuestra caja de herramientas.

Además, y como es obvio, deberán definirse las clases CSS tanto de la cabecera como del contenido.

ejemplo en un Ciclo.

private void CargaNews()
{
cls_New ne = new cls_New();
DataSet ds2 = ne.home();

foreach (DataRow dr2 in ds2.Tables[0].Rows)
{
Label lblHeader = new Label(); //Titulo
Label lblContent = new Label(); //Contenido

lblHeader.Text = dr2["N_TITULO"].ToString();
lblContent.Text = dr2["N_BAJADA"].ToString();

//crea obeto tipo panel
AjaxControlToolkit.AccordionPane acpPanel = new AjaxControlToolkit.AccordionPane();
acpPanel.HeaderContainer.Controls.Add(lblHeader); //Agrega Titulo
acpPanel.ContentContainer.Controls.Add(lblContent); //Agrega Contenido

Accordion.Panes.Add(acpPanel); //Crea Panel de Accordion
}
ds2.Dispose();
}

Mas Información aqui