Using the Silverlight Accordion Control
page 3 of 6
by Brian Mains
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 67928/ 150

Accordion Items

Each accordion item works like an expander; clicking it shows or hides the content.  However, the accordion has a special feature that only enables one item at a time.  There may be other ways to get around this, but the primary nature of the Accordion is meant to work this way.  To get the ability to have one or more items open at a given time, bind a list control, and use an Expander   as the template.

The header and content properties can be specified in a variety of ways.  Listing 1 contains some of the ways that it can be listed.

Listing 1: Header and Content

<Accordion>
     <AccordionItem Header="First Header" Content="First Content" />
    <AccordionItem Header="Second Header">
        <TextBlock Text="Second Content" />
    </AccordionItem>
    <AccordionItem>
        <AccordionItem.Header>
             <TextBox Text="Third Item" />
         </AccordionItem.Header>
         <AccordionItem.Content>
             <TextBlock Text="Third Item" />
         </AccordionItem.Content>
    </AccordionItem>
    <AccordionItem>
        <AccordionItem.Header>
             <TextBlock Text="Fourth Item" />
         </AccordionItem.Header>
         <TextBlock Text="Third Item" />
    </AccordionItem>
 </Accordion>

In these four scenarios, notice the differences between them.  In their simplest forms, the AccordionItem component can accept a textual header and content to display within it.  All content controls can accept a wide array of content, so the AccordionItem takes a TextBlock element as its content parameter.

The third item uses long-form for the header and content properties, specifying the elements that should appear within the header and content.  Notice the explicit header and content designations, but the content designation is missing from the second and now the fourth examples.  This comes to be because the Content property is the default, and any content not within a property designation is considered to be a part of the control's content.

Notice the short-hand and long-hand form: the short-hand form uses attributes to specify the parameter values, while the long-hand form use a child element in the form of <Type.PropertyName>.  Any values, including other elements to display, must be used in the long-hand form, unless using templates (a subject not discussed in this article)

Here's a note about content controls in general: content controls can only have one child.  Because of this restriction, the AccordionItem.Content property must have a container control to group the accordion's interface.


View Entire Article

User Comments

Title: reply   
Name: dana
Date: 2012-03-14 12:53:32 PM
Comment:
How do I reference the description textblock from code
Title: Accordion imports?   
Name: davraf
Date: 2010-09-06 11:43:07 AM
Comment:
Hi,
what's the xmlns to use?
Title: reply   
Name: samantha
Date: 2009-07-01 2:57:24 AM
Comment:
giv some more code and give a full example how to bind data source to accordion
Title: Re   
Name: Jack
Date: 2009-06-11 9:14:41 PM
Comment:
Accordion is a fashion style since Outlook first bring it to us, a fashion control
Title: Needs some screen shots   
Name: graphics
Date: 2009-06-11 8:00:30 PM
Comment:
It is nice to see what the code produces, show a screen shot .....






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2019 ASPAlliance.com  |  Page Processed at 2019-05-25 3:28:49 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search