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.
